<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>修改</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
    <style>

        .layui-form-item label{
            width: 15%;
        }
        .layui-input-block input{
            width: 90%;
        }
        .layui-input-block textarea{
            width: 90%;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form" style="margin-left: -15px; margin-right: 20px">
    <div class="layui-form-item">
        <label class="layui-form-label required">项目名称</label>
        <div class="layui-input-block">
            <input type="hidden" name="id" id="id" th:value="${projects.id}">
            <input type="text" name="name" id="name" th:value="${projects.projectName}"
                   lay-verify="required"
                   lay-reqtext="项目名称不能为空！"
                   autocomplete="off"
                   placeholder="请输入项目名称..." maxlength="30"
                   class="layui-input"  readonly>
            <div style=" margin-left: 7%;
            color:#e74c3c;
            font-weight: bold;"> 注:不可编辑！</div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">项目编码</label>
        <div class="layui-input-block">
            <input type="text" name="code" id="code" lay-verify="required" th:value="${projects.code}" lay-reqtext="岗位编码不能为空" autocomplete="off" placeholder="请输入项目编码..."
                   class="layui-input" readonly>
            <div style=" margin-left: 7%;
            color:#e74c3c;
            font-weight: bold;">注：不可编辑！</div>
            <!-- 项目编码 采用  12- 20位的编码格式 ，编码组成 为  YYYYMMDD-XXX-NNNN ; YYYYMMDD 表示为8 位日期 XXX:3位项目类型或部门代码 “NNNN”： 4位 序列号 -->
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">项目状态</label>
        <div class="layui-input-inline" style="width: 75%;">
            <select id="status" name="status">
                <option value="">请选择...</option>
                <option th:each="item:${bugproject}" th:text="${item.value}" th:value="${item.key}"/>
            </select>
            <div style="
            font-weight: bold;">[[${projects.dictValue}]]</div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">负责人</label>
        <div class="layui-input-block">
            <input type="hidden" id="leader" name="leader" class="layui-input"/>
            <input type="text" id="leaderName" name="leaderName" lay-verify="required" th:value="${projects.leaderNames}" placeholder="请选择(可多选）..." autocomplete="off"
                   class="layui-input" lay-reqtext="项目负责人不能为空！" readonly>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">项目起止时间</label>
        <div class="layui-form-item layui-inline" style="width: auto">
            <div class="layui-input-inline" style="width: 45%">
                <input type="text" name="beginTime" id="beginTime" lay-verify="required|date" placeholder="开始日期" th:value="${projects.beginTime}"
                       lay-reqtext="开始日期不能为空" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline" style="width: 45%">
                <input type="text" name="comeTime" id="comeTime" lay-verify="required|date" placeholder="结束日期" th:value="${projects.comeTime}"
                       lay-reqtext="结束日期不能为空" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">项目周期</label>
        <div class="layui-input-block">
            <input type="text" name="xmzq" id="xmzq" class="layui-input" readonly/>
            <div style=" margin-left: 7%;
            color:#e74c3c;
            font-weight: bold;">注：不可编辑！</div>

        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <textarea name="remark" id="remark" class="layui-textarea" autocomplete="off"  th:text="${projects.remark}"></textarea>
        </div>
    </div>

    <!-- 右侧悬浮按钮 -->
    <div class="right-bottom-btn">
        <button class="layui-btn" lay-filter="cancleBtn"><i
                class="layui-icon layui-icon-close"></i>取消
        </button>
        <button class="layui-btn" lay-submit lay-filter="saveBtn"><i
                class="layui-icon layui-icon-ok"></i>确认
        </button>

    </div>

</div>
<script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/lib/coco-message/coco-message.js}" charset="utf-8"></script>
<script th:src="@{/js/lay-config.js}" charset="utf-8"></script>
<script type="text/javascript" th:inline="javascript">
    AjaxUtil.ctx = /*[[@{/}]]*/'';
    layui.use(['form', 'layer','table','tableSelect'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table,
            laydate = layui.laydate,
            tableSelect= layui.tableSelect;
        // 周期验算
        setTimeout(function () {
            let begintime = ((new Date([[${projects.comeTime}]]).getTime())- (new Date([[${projects.beginTime}]]).getTime())) / (24*60*60*1000);
            $('#xmzq').val(begintime+'天');
        },1000);
        //监听提交
        // 日期
        laydate.render({
            elem: '#beginTime',
            done:function (value,date,endDate) {
                setTimeout(function () {
                        let qs = $('#beginTime').val();
                        let wc = $('#comeTime').val();
                        // 格式转换
                        let qss = new Date(qs);
                        let wcc = new Date(wc);
                        let timeDiff = wcc.getTime() - qss.getTime();
                        let oneMonthsInMilid = 1*30*24*60*60*1000;
                        let zq = timeDiff /(1000*60*60*24);
                        if (wc < qs){
                            layer.msg('完成时间不能早于项目开始时间！',{icon:2},function () {
                                $('#comeTime').val('');
                                $('#xmzq').val('0天');
                                return false;

                            });
                        }else if (qs == wc){
                            layer.msg('开始时间和完成时间不能是同一天！',{icon:2},function () {
                                $('#comeTime').val('')
                                $('#xmzq').val('0天');
                                return false;
                            });

                        }else if (timeDiff < oneMonthsInMilid){
                            layer.msg('项目时间不能小于一个月',{icon:2},function () {

                                $('#comeTime').val('');
                                $('#xmzq').val('0天');
                                return false;
                            });
                        }
                        if (zq != null){
                            $('#xmzq').val(zq+'天');
                            return false;
                        }
                        $('#xmzq').val('天');
                        return false;
                    }
                    ,1000);

            }
        });

        laydate.render({
            elem:'#comeTime',
            done:function (value,date,endDate) {

                let qs = $('#beginTime').val();
                let wc = $('#comeTime').val();
                let qss = new Date(qs);
                let wcc = new Date(wc);
                let timeDiff = wcc.getTime() - qss.getTime();
                let oneMonthsInMilid = 1*30*24*60*60*1000;
                let zq = timeDiff /(1000*60*60*24);
                if (wc < qs){
                    layer.msg('完成时间不能早于项目开始时间！',{icon:2});
                    $('#beginTime').val('')

                }else if (qs == wc){
                    layer.msg('开始时间和完成时间不能是同一天！',{icon:2},function () {
                        $('#beginTime').val('')

                    });
                }else if (timeDiff < oneMonthsInMilid){
                    layer.msg('项目时间不能小于一个月',{icon:2});
                    $('#beginTime').val('')

                }

                if (zq != null){
                    $('#xmzq').val(zq+'天');
                    return false;
                }
                $('#xmzq').val('天');
                return false;

            }
        });
        // 项目负责人
        tableSelect.render({
            elem: '#leaderName',
            checkedKey: 'userId',
            searchKey: 'name',
            searchPlaceholder:'搜索姓名',
            table:{
                url: AjaxUtil.ctx + 'userinfo/rylist',
                cols:[
                    [
                        {type:'checkbox',title:'😊',fixed:'left'}
                        ,{type:'numbers',align:'center',title: '序号',}
                        ,{field:'name',align: 'center',title: '姓名'}
                        ,{field:'deptName',align: 'center',title: '所属部门'}

                    ]
                ]
            },
            done:function (elem,data) {
                var NEWJSON =[];
                var NEWJSON1= [];
                layui.each(data.data,function (index,item) {
                    NEWJSON.push(item.name);
                    NEWJSON1.push(item.userId);
                });
                elem.val(NEWJSON.join(','));
                $('#leader').val(NEWJSON1.join(','));
            }
        });

        form.on('submit(saveBtn)', function (data) {
            var index = layer.alert('确认提交吗？', function () {
                var loading = layer.load(0, {shade: 0.1});
                console.log(data.field);
                AjaxUtil.post({
                    url: AjaxUtil.ctx + "bug/update",
                    data: data.field,
                    success: function (res) {
                        layer.close(index);
                        layer.close(loading);
                        if (res.code === 0) {
                            layer.msg(res.message,{icon:1}, function () {
                                // 重载表格
                                parent.setUpdateFlag();
                                var iframeIndex = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(iframeIndex);
                            });
                        } else {
                            layer.msg(res.message, {icon:2});
                        }
                    },
                    error: function (error) {
                        layer.close(index);
                    }
                });
            });
            return false;
        });

        // 监听取消按钮
        $("button[lay-filter='cancleBtn']").click(function () {
            var iframeIndex = parent.layer.getFrameIndex(window.name);
            parent.layer.close(iframeIndex);
        });

    });
</script>
</body>
</html>