<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>项目转移</title>
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <style>
        body {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .left-section,
        .right-section {
            width: 50%;
            height: 100%;
            border: 1.5px solid dimgrey;
            position: relative; /* 添加这一行，使其成为定位参考 */
        }
        h2 {
            text-align: center;
            margin-top: 10%;
            color: #0C0C0C;
        }

        .layui-form-item {
            margin-bottom: 15px; /* 控制每个表单项之间的间距 */
        }

        .right-bottom-btn {
            position: absolute;
            bottom: 20px; /* 距离底部20px */
            right: 20px; /* 距离右边20px */
        }
        /* 可根据需要自定义样式和布局 */

        .left-section .layui-form{
            margin-top: 10%;
        }
        .right-section .layui-form {
            margin-top: 10%;
        }
    </style>
</head>
<body>
<div class="left-section">
    <!-- 左侧内容 -->
    <h2>转移前</h2>

    <div class="layui-form layuimini-form">
        <div class="layui-form-item layui-inline" style="width: 100%">
            <label class="layui-form-label required" style="width: 17%">项目名称</label>
            <div class="layui-input-inline" style="width: 70%">
                <input type="text" class="layui-input" th:value="${project.zwmc}" disabled>
            </div>
        </div>
        <div class="layui-form-item layui-inline" style="width: 100%">
            <label class="layui-form-label" style="width: 17%">ERP编号</label>
            <div class="layui-input-inline" style="width: 70%">
                <input type="text"  class="layui-input" th:value="${project.erpbh}" disabled>
            </div>
        </div>

        <div class="layui-form-item layui-inline" style="width: 100%">
            <label class="layui-form-label" style="width: 17%">所属部门</label>
            <div class="layui-input-inline" style="width: 70%">
                <input type="text"  class="layui-input" th:value="${project.ssbmmc}" disabled>
            </div>
        </div>

        <div class="layui-form-item layui-inline" style="width: 100%">
            <label class="layui-form-label" style="width: 17%">电科院负责人</label>
            <div class="layui-input-inline" style="width: 70%">
                <input type="text"  class="layui-input" th:value="${project.dkyfzrxm}" disabled>
            </div>
        </div>
        <div class="layui-form-item layui-inline" style="width: 100%">
            <label class="layui-form-label" style="width: 17%">申请人</label>
            <div class="layui-input-inline" style="width: 70%">
                <input type="text" class="layui-input"  th:value="${project.cjrxm}" disabled>
            </div>
        </div>
    </div>

</div>

<div class="right-section">
    <!-- 右侧内容 -->
    <h2>转移后</h2>
        <div class="layui-form layuimini-form">
            <div class="layui-form-item layui-inline" style="width: 100%">
                <label class="layui-form-label required" style="width: 17%">项目名称</label>
                <div class="layui-input-inline" style="width: 70%">
                    <input type="text" id="xmmc" name="xmmc" class="layui-input" th:value="${project.zwmc}" disabled>
                    <input type="hidden" id="id" name="id" class="layui-input" th:value="${project.id}">
                </div>
            </div>
            <div class="layui-form-item layui-inline" style="width: 100%">
                <label class="layui-form-label" style="width: 17%">ERP编号</label>
                <div class="layui-input-inline" style="width: 70%">
                    <input type="text" id="erpbh" name="erpbh" class="layui-input" th:value="${project.erpbh}" disabled>
                </div>
            </div>

            <div class="layui-form-item layui-inline" style="width: 100%">
                <label class="layui-form-label" style="width: 17%">所属部门<span style="color: red;">*</span></label>
                <div class="layui-input-inline" style="width: 70%">
                    <input type="hidden" id="ssbm" name="ssbm" class="layui-input">
                    <!-- 设置一个下拉框 -->
                    <select name="ssbmmc" id="ssbmmc"  lay-search>
                        <option value="">请选择</option>
                        <option th:each="item:${dept}" th:text="${item.deptName}" th:value="${item.deptId}"></option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item layui-inline" style="width: 100%">
                <label class="layui-form-label" style="width: 17%">电科院负责人<span style="color: red;">*</span></label>
                <div class="layui-input-inline" style="width: 70%">
                    <input type="hidden" id="dkyfzr" name="dkyfzr" class="layui-input">
                    <input type="text" id = 'dkyfzrxm' name="dkyfzrxm" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-inline" style="width: 100%">
                <label class="layui-form-label" style="width: 17%">申请人<span style="color: red;">*</span></label>
                <div class="layui-input-inline" style="width: 70%">
                    <input type="hidden" id="sqr" name="sqr" class="layui-input">
                    <input type="text" id = 'sqrxm' name="sqrxm" class="layui-input">

                </div>
            </div>
        </div>

        <!-- 右侧悬浮按钮 -->
        <div class="right-bottom-btn">
            <button class="layui-btn"  lay-filter="saveBtn">
                <i class="layui-icon layui-icon-ok"></i>确定
            </button>
            <button class="layui-btn" lay-filter="cancleBtn">
                <i class="layui-icon layui-icon-close"></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="@{/lib/xm-select-v1.2.2/xm-select.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 = /*[[@{/}]]*/'';
    var updateflag = 0;
    var xmApproval = {};
    // 初始化 LayUI
    layui.use(['form','table','tableSelect'], function () {
        var form = layui.form,
            layer = layui.layer,
            tableSelect = layui.tableSelect,
        table = layui.table;
        //获取创建人
        tableSelect.render({
            elem: '#sqrxm',
            checkedKey: 'userid',
            searchKey: 'name',
            searchPlaceholder: '搜索申请人',
            table:{
                url:AjaxUtil.ctx+'prjContract/cjr',
                cols:[
                    [
                        {type:'radio',title:'😊',width: '7%'},
                        {type: 'numbers',title: '序号',align: 'center',width: '10%'},
                        {field:'name',title: '姓名',align: 'center',width:'30%'},
                        {field: 'deptName',title: '部门',align: 'left',width: '50%'}
                    ]
                ]
            },
            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(","));
                $("#sqr").val(NEWJSON1.join(","));
                
            }
        });
        // 获取电科院负责人
        tableSelect.render({
            elem: '#dkyfzrxm',
            checkedKey: 'id',
            searchKey: 'xm',
            searchPlaceholder: '搜索电科院负责人',
            table:{
                url:AjaxUtil.ctx +'prjContract/dkyfzr',
                cols: [
                    [
                        {type:'radio',title:'😊',width:'7%'},
                        {type: 'numbers',title: '序号',align:'center',width: '10%'},
                        {field: 'xm',title: '姓名',align: 'center',width: '30%'},
                        {field: 'bmmc',title: '部门',align: 'left',width: '50%'}

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

            }
        });

        $("button[lay-filter='saveBtn']").click(function (data) {
            // 提交表单元素
            // 将表单元素提交至后台
            // 获取表单的数据
            // 创建一个集合
            var formData = {
                'id': document.getElementById('id').value
                ,'xmmc': $('#xmmc').val()
                ,'erpbh':$('#erpbh').val()
                ,'dkyfzr':$('#dkyfzr').val()
                ,'dkyfzrxm':$('#dkyfzrxm').val()
                ,'ssbm':$('#ssbm').val()
                ,'ssbmmc':$('#ssbmmc').val()
                ,'sqr':$('#sqr').val()
                ,'sqrxm':$('#sqrxm').val()
            }
            // 将对象转换为 JSON 字符串
            AjaxUtil.post({
                url: AjaxUtil.ctx + 'prjProject/upssbm',
                contentType: "application/json",
                data: JSON.stringify(formData),
                success: function (res) {
                    if (res.code === 0) {
                        layer.msg(res.message,{icon: 1}, function (){
                            setTimeout(function () {
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                            },1000);

                        });
                        // 获取弹框 并关闭弹
                    }else {
                        layer.msg(res.message,{ icon:2 });
                    }
                },
                error: function (error) {
                    layer.msg("请求出错，请稍后重试！", { icon: 2 }); // 处理 Ajax 错误
                }
            });
        });
        // 监听取消按钮
        $("button[lay-filter='cancleBtn']").click(function () {
            var iframeIndex = parent.layer.getFrameIndex(window.name);
            parent.layer.close(iframeIndex);
        });
    });

</script>
</body>
</html>