<!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>

<form class="layui-form" action="" lay-filter="formDemo">
    <div class="layui-tab layui-tab-card">
        <ul class="layui-tab-title">
            <li>基本信息</li>
            <li class="layui-this">项目进度</li>
        </ul>
        <div class="layui-tab-content">
            <!-- 基本信息开始 -->
            <div class="layui-tab-item " style="min-height: 550px">

                <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="text" name="name" id="name" th:value="${projects.projectName}" readonly
                                   lay-verify="required"
                                   lay-reqtext="项目名称不能为空！"
                                   autocomplete="off"
                                   placeholder="请输入项目名称..." maxlength="30"
                                   class="layui-input">
                            <div style=" margin-left: 7%;
            color:#e74c3c;
            font-weight: bold;"> 注:项目名称（中文）不能超过30字（含字符）！</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-block" >
                            <input type="text" name="xmzt" id="xmzt" lay-verify="required" th:value="${projects.dictValue}" lay-reqtext="岗位编码不能为空" autocomplete="off" placeholder="请输入项目编码..."
                                   class="layui-input"  readonly>
                            <!--  <select id="status" name="status">
                                  <option value="">请选择...</option>
                                  <option th:each="item:${bugproject}" th:text="${item.value}" th:value="${item.key}"/>
                              </select>-->
                        </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}"  readonly
                                       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}"  readonly
                                       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>
                    </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}"  readonly></textarea>
                        </div>
                    </div>

                    <!-- 右侧悬浮按钮 -->
                    <div class="right-bottom-btn">
                        <button class="layui-btn" lay-filter="cancleBtn">
                            <i class="layui-icon layui-icon-close"></i>关闭
                        </button>
                    </div>
                </div>
            </div>
            <!-- 基本信息结束 -->
            <div class="layui-tab-item layui-show" style="min-height: 550px">
                <div class="layuimini-container">
                    <div class="layuimini-main">
                        <form class="layui-form" action="" lay-filter="formDemo">

                            <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

                            <!-- 右侧悬浮按钮 -->
                            <div class="layui-form layuimini-form" style="padding-bottom: 100px">
                                <div class="right-bottom-btn">
                                    <button class="layui-btn" lay-filter="cancleBtn">
                                        <i class="layui-icon layui-icon-close"></i>关闭
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>
</form>
<script type="text/html" id="currentTableBar">
    <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">
        <i class="layui-icon layui-icon-delete" style="font-size: 10px;"></i>删除
    </a>
</script>
<!--<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm data-add-btn" lay-event="progress">
            <i class="layui-icon layui-icon-addition" style="font-size: 10px;"></i>发布
        </button>
    </div>
</script>-->

<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'], function () {
        var layer = layui.layer,
            table = layui.table;
        var xmid = [[${projects.id}]];
        var account = [[${account}]];
        var type = 'prjProject';

        var currTable = table.render({
            elem: '#currentTableId',
            url: AjaxUtil.ctx + 'bug/progresslist/' + xmid +'?type='+type,
            method: 'post',
           /* toolbar: '#toolbarDemo',*/
            // defaultToolbar: ['filter', 'exports', 'print'],
            cols: [
                [
                    {type: 'numbers', align: 'center',title: '排序'},
                    {field: 'progress', width: '44%', title: '进度描述'},
                    {field: 'createUser', width: '10%', title: '发布人', align: 'center'},
                    {field: 'createTime', width: '25%', title: '发布时间', align: 'center'},
                    {title: '操作', width: '13%', toolbar: '#currentTableBar', align: 'center'}
                ]
            ],
            sortName: 'jtsj',
            autoSort: false,
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            page: true,
            skin: 'grid',
            parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.rows //解析数据列表
                };
            }
        });
        // 监听行工具事件
        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            console.log(data);
            if (obj.event === 'delete') {
                if (data.createUser != account){
                    layer.msg('你不是发布人，不能删除！',{icon: 2},function (){
                        return false;
                    })
                }else {
                    layer.confirm('确定删除该描述吗？', function (index) {
                        layer.close(index);
                        AjaxUtil.post({
                            url: AjaxUtil.ctx + "bug/prodelete/" + data.id,
                            success: function (res) {
                                if (res.code === 0) {
                                    layer.msg(res.message,{icon:1}, function () {
                                        currTable.reload();
                                    });
                                } else {
                                    layer.msg(res.message, {icon:2});
                                }
                            },
                            error: function (error) {
                            }
                        });
                    });
                }
            }
        });
        /**
         * toolbar监听事件
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            if(obj.event === 'progress'){
                    setTimeout(function (){
                        var index = layer.open({
                            title: '进度录入',
                            type: 2,
                            shade: 0.3,
                            maxmin: true,
                            shadeClose: true,
                            area: ['50%', '70%'],
                            content: AjaxUtil.ctx + 'bugger/init/' + xmid,
                            end: function () {
                                layer.close(index);
                            }
                        });
                    },1000)

                }
        });





        setTimeout(function () {
            let beginTime = [[${projects.beginTime}]];
            let comeTime = [[${projects.comeTime}]];
            let zq = (new Date(comeTime).getTime()) - (new Date(beginTime).getTime());
            $('#xmzq').val(zq/(24*60*60*1000)+'天');
        },1000);
        // 监听取消按钮
        $("button[lay-filter='cancleBtn']").click(function () {
            var iframeIndex = parent.layer.getFrameIndex(window.name);
            parent.layer.close(iframeIndex);
        });
    });
</script>
</body>
</html>