<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增人员</title>
    <link rel="stylesheet" href="../../../layui/css/layui.css" media="all"/>
</head>
<body>
    <form  class="layui-form" action="" onsubmit="return false">
        <table id="baseTable" class="layui-table" lay-filter="filterTable"></table>
        <div class="layui-form-item" style="display: none">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn subBtn" id="commit" lay-submit lay-filter="formDemo">提交
                </button>
            </div>
        </div>
    </form>
</body>
</html>
<script type="text/html" id="selectDept">
    <select name="deptId" lay-filter="deptChange" lay-append-to="body" lay-verify="required">
    <option value="">选择所属部门/项目</option>
    {{#  layui.each(deptSelect, function(i, v){ }}
    <option value="{{= v.id }}" {{= v.id === d.deptId ? 'selected' : '' }}>{{= v.name }}</option>
    {{#  }); }}
    </select>
</script>
<script type="text/html" id="selectRole">
    <select name="roleId" lay-filter="roleChange" lay-append-to="body"  lay-verify="required">
        <option value="">选择角色</option>
        {{#  layui.each(roleSelect, function(i, v){ }}
        <option value="{{= v.id }}" {{= v.id === d.roleId ? 'selected' : '' }}>{{= v.name }}</option>
        {{#  }); }}
    </select>
</script>
<script src="../../../js/publicJs.js"></script>
<script src="../../../js/common_methon.js"></script>
<script type="text/javascript" src="../../../js/libs/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../../../js/jq.js"></script>
<script type="text/javascript" src="../../../js/my/permission.js"></script>
<script src="../../../js/common_methon.js"></script>
<script src="../../../js/common.js"></script>
<script src="../../../layui/layui.js"></script>
<script type="text/javascript">
    let form, table;
    let roleSelect = [];
    let deptSelect = [];
    layui.use(['table', 'form', 'tree'], function () {
        table = layui.table;
        form = layui.form;
        let data = localStorage.getItem("personList");
        data = JSON.parse(data);
        getDeptSelect();
        getRoleSelect();
        initData(data)
        form.on('submit(formDemo)', function (data) {
            let tableData = table.cache.baseTable;
            let obj = [];
            tableData.forEach(function (item) {
                obj.push({
                    deptId: item.deptId,
                    roleId: item.roleId,
                });
            });

            submit(tableData);
            return false;
        });
    })

    function initData(data) {
        tableIns = table.render({
            elem: '#baseTable',
            data: data,
            css: [ // 设置单元格样式
                // 取消默认的溢出隐藏，并设置适当高度
                '.layui-table-cell{height: 50px; line-height: 40px;}',
                '.layui-table-cell .layui-colorpicker{width: 38px; height: 38px;}',
                '.layui-table-cell select{height: 36px; padding: 0 5px;}'
            ].join(''),
            cols: [[ //标题栏
                // {type: 'checkbox', fixed: 'left'},
                {
                    field: 'number', width: 80, title: '序号', align: 'center', type: 'numbers'
                },
                {field: 'idCard', title: '身份证号', align: 'center', minWidth: 180},
                {field: 'name', title: '姓名', align: 'center', minWidth: 160},
                {field: 'sex', title: '性别', align: 'center', minWidth: 80},
                {field: 'phone', title: '联系电话', align: 'center', minWidth: 160},
                {field: 'roleId', title: '系统角色', minWidth: 160, templet: '#selectRole'},
                {field: 'deptId', title: '所属部门/项目', minWidth: 160, templet: '#selectDept'},

            ]]
            , page: false //开启分页
            , done: function (res, curr, count) {
                var options = this;
                // layui form select 事件
                // 获取当前行数据 - 自定义方法
                table.getRowData = function(tableId, elem){
                    var index = $(elem).closest('tr').data('index');
                    return table.cache['baseTable'][index] || {};
                };
                form.on('select(roleChange)', function(obj){
                    var value = obj.value; // 获取选中项 value
                    // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
                    var data = table.getRowData(options.id, obj.elem);
                    // 更新数据中对应的字段
                    data.roleId = value;
                    data.roleName = obj.elem[obj.elem.selectedIndex].text;
                    if(value == '7'){
                        //删除deptId内的值
                        $(obj.elem).closest('tr').find('select[name="deptId"]').val('');
                        //去除 项目部必填 并设置不可操作
                        data.deptId = '0';
                        data.deptName = '项目部';
                        //去除必填校验
                        $(obj.elem).closest('tr').find('select[name="deptId"]').removeAttr('lay-verify');
                        //设置deptId所在的td不可操作
                        $(obj.elem).closest('tr').find('select[name="deptId"]').attr('disabled', 'disabled');
                        //设置
                        $(obj.elem).closest('tr').find('select[name="deptId"]').addClass('layui-disabled');
                        layui.form.render('select');
                    }else if (value == '6' || value == '5'){
                        $(obj.elem).closest('tr').find('select[name="deptId"]').val('');
                        //添加 项目部必校验
                        data.deptId = '7';
                        data.deptName = '发展运营中心';
                        //设置deptId = 7 的选中
                        $(obj.elem).closest('tr').find('select[name="deptId"]').val('7');
                        //去除必填校验
                        $(obj.elem).closest('tr').find('select[name="deptId"]').removeAttr('lay-verify');
                        //设置deptId所在的td不可操作
                        $(obj.elem).closest('tr').find('select[name="deptId"]').attr('disabled', 'disabled');
                        //设置
                        $(obj.elem).closest('tr').find('select[name="deptId"]').addClass('layui-disabled');
                        layui.form.render('select');
                    } else{
                        //添加 项目部必校验
                        $(obj.elem).closest('tr').find('select[name="deptId"]').attr('lay-verify', 'required');
                        $(obj.elem).closest('tr').find('select[name="deptId"]').removeAttr('disabled');
                        $(obj.elem).closest('tr').find('select[name="deptId"]').removeClass('layui-disabled');
                        layui.form.render('select');
                    }
                    // 显示当前行最新数据 - 仅用于示例展示
                });
                form.on('select(deptChange)', function(obj){
                    var value = obj.value; // 获取选中项 value
                    // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
                    var data = table.getRowData(options.id, obj.elem);
                    // 更新数据中对应的字段
                    data.deptId = value;
                    data.deptName = obj.elem[obj.elem.selectedIndex].text;
                    // 显示当前行最新数据 - 仅用于示例展示
                });
            }
        });
    }

    function getRoleSelect() {
        $.ajax({
            type: 'post',
            url: ctxPath + '/evaluatePerson/getRoleSelect',
            async: false,
            success: function (data) {
                roleSelect = data;
            }
        });
    }
    function getDeptSelect(){
        $.ajax({
            type: 'post',
            url: ctxPath + '/evaluatePerson/getDeptSelect',
            async: false,
            success: function (data) {
                deptSelect = data;
            }
        });
    }

    function submit(data){
        $.ajax({
            url: ctxPath + '/evaluatePerson/addPersonInfo',
            type: 'POST',
            data: {
                personList: JSON.stringify(data)
            },
            success: function (res) {
                if (res.res === 1) {
                    layer.msg('提交成功', {icon: 6});
                    table.reload('baseTable', {
                        data: []
                    });
                    closePage();
                } else if (res.res === 0){
                    layer.msg(res.resMsg, {icon: 5});
                }
            }
        });
    }

    function closePage() {
        let index = parent.layer.getFrameIndex(window.name); // 先得到当前 iframe层的索引
        parent.layer.close(index); // 关闭当前层
        let parentIndex = parent.parent.layer.getFrameIndex(parent.window.name); // 获取父层的索引
        parent.parent.searchTable(1)
        parent.parent.layer.close(parentIndex); // 关闭父层
    }
</script>