<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <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 {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form" style="margin-left: -10px">
    <div class="layui-form layuimini-form">
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label required">编码</label>
            <div class="layui-input-inline" style="width: 300px">
                <input type="text" id="bm" name="bm" lay-verify="required" lay-reqtext="编码不能为空" autocomplete="off"
                       class="layui-input">
            </div>
            <label class="layui-form-label required">类型</label>
            <div class="layui-input-inline" style="width: 300px">
                <select name="lx" id="lx" lay-verify="required" lay-reqtext="类型不能为空">
                    <option value="">请选择</option>
                    <option value="1">内部单位</option>
                    <option value="2">外部单位</option>
                </select>
            </div>
        </div>
        <!--        <div class="layui-form-item layui-inline">-->
        <!--            <label class="layui-form-label">父编码</label>-->
        <!--            <div class="layui-input-inline" style="width: 300px">-->
        <!--                <input type="text" id="fbm" name="fbm" class="layui-input">-->
        <!--            </div>-->
        <!--            <label class="layui-form-label">排序</label>-->
        <!--            <div class="layui-input-inline" style="width: 300px">-->
        <!--                <input type="text" id="px" name="px" class="layui-input">-->
        <!--            </div>-->
        <!--        </div>-->
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label required">名称</label>
            <div class="layui-input-inline" style="width: 720px">
                <input type="text" id="mc" name="mc" lay-verify="required" lay-reqtext="名称不能为空" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label required">单位全称</label>
            <div class="layui-input-inline" style="width: 720px">
                <input type="text" id="dwqc" name="dwqc" lay-verify="required" lay-reqtext="单位全称不能为空" autocomplete="off"
                       class="layui-input">
                <!--                                <tip1>单位全称，请务必填写正确，如果提示重复，请选择已存在的单位</tip1>-->
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">所在地</label>
            <div class="layui-input-inline" style="width: 300px">
                <input type="text" id="szd" name="szd" class="layui-input">
            </div>
            <label class="layui-form-label">邮政编码</label>
            <div class="layui-input-inline" style="width: 300px">
                <input type="text" id="yzbm" name="yzbm" maxlength="6" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">通讯地址</label>
            <div class="layui-input-inline" style="width: 720px">
                <input type="text" id="txdz" name="txdz" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">单位性质</label>
            <div class="layui-input-inline" style="width: 720px">
                <input type="hidden" id="dwxz" name="dwxz" class="layui-input">
                <input type="text" id="dwxzmc" name="dwxzmc" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">联系人</label>
            <div class="layui-input-inline" style="width: 720px">
                <input type="hidden" id="lxr" name="lxr" class="layui-input">
                <input type="text" id="lxrxm" name="lxrxm" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline" style="width: 300px">
                <input type="text" id="xm" name="xm" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">固定电话</label>
            <div class="layui-input-inline" style="width: 300px">
                <input type="text" id="gddh" name="gddh" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">电子邮件</label>
            <div class="layui-input-inline" style="width: 300px">
                <input type="text" id="dzyj" name="dzyj" class="layui-input">
            </div>
            <label class="layui-form-label">移动电话</label>
            <div class="layui-input-inline" style="width: 300px">
                <input type="text" id="yddh" name="yddh" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">传真</label>
            <div class="layui-input-inline" style="width: 300px">
                <input type="text" id="cz" name="cz" class="layui-input">
            </div>
            <!--            <label class="layui-form-label">系统单位</label>-->
            <!--            <div class="layui-input-inline" style="width: 300px">-->
            <!--                <select name="xtdw" id="xtdw" lay-filter="xtdw">-->
            <!--                    <option value="0">[无]</option>-->
            <!--                    <option value="-1">[浏览]</option>-->
            <!--                </select>-->
            <!--            </div>-->
        </div>
        <!-- 右侧悬浮按钮 -->
        <div class="right-bottom-btn">
            <button class="layui-btn" lay-submit 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>
</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/md5/md5.min.js}" charset="utf-8"></script>
<script th:src="@{/lib/xm-select-v1.2.2/xm-select.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', 'layCascader', 'tableSelect'], function () {
        var form = layui.form,
            layCascader = layui.layCascader,
            layer = layui.layer,
            tableSelect = layui.tableSelect;

        //单位类型(性质)
        var index1 = layer.load(0, {shade: 0.1});
        AjaxUtil.get({
            url: AjaxUtil.ctx + 'baseCompanytype/list',
            success: function (res) {
                layer.close(index1);
                var datalist = [];
                for (let item of res.data) {
                    item.value = item.id;
                    item.label = item.name;
                    datalist.push(item);
                }
                // 扁平数据转树
                var options = arrayToTree(datalist, "0");

                // 初始化cascader实例
                cascader = layCascader({
                    elem: '#dwxzmc',
                    clearable: true,
                    props: {
                        checkStrictly: true // 配置选择任意一级选项
                    },
                    options: options
                });

                // 监听cascader变化
                cascader.changeEvent(function (value, node) {
                    $("#dwxz").val(value);
                    $("#dwxzmc").val(node.data.label);
                    // 主动关闭面板
                    cascader.close();
                });
            },
            error: function (error) {
                layer.close(index1);
                Message.error('获取单位性质失败！', 1000);
            }
        });
        //联系人
        tableSelect.render({
            elem: '#lxrxm',
            checkedKey: 'id',
            searchKey: 'xm',
            searchPlaceholder: '搜索姓名',
            table: {
                url: AjaxUtil.ctx + 'basePerson/rylist',
                cols: [
                    [
                        {type: 'radio'},
                        {
                            field: '', title: '序号', type: 'numbers', align: 'center', templet: function (d) {
                                return d.LAY_TABLE_INDEX + 1;
                            }
                        },
                        {field: 'xm', title: '姓名'},
                        // {field: 'xb', title: '性别'},
                        {field: 'dwmc', title: '公司/单位'}
                    ]
                ]
            },
            done: function (elem, data) {
                var NEWJSON = [];
                var NEWJSON1 = [];
                var NEWJSON2 = [];
                var NEWJSON3 = [];
                var NEWJSON4 = [];
                var NEWJSON5 = [];
                layui.each(data.data, function (index, item) {
                    NEWJSON.push(item.xm);
                    NEWJSON1.push(item.id);
                    NEWJSON2.push(item.gddh);
                    NEWJSON3.push(item.dzyj);
                    NEWJSON4.push(item.yddh);
                    NEWJSON5.push(item.cz);
                })
                elem.val(NEWJSON.join(","));
                $("#lxr").val(NEWJSON1.join(","));
                $("#xm").val(NEWJSON.join(","));
                $("#gddh").val(NEWJSON2.join(","));
                $("#dzyj").val(NEWJSON3.join(","));
                $("#yddh").val(NEWJSON4.join(","));
                $("#cz").val(NEWJSON5.join(","));
            }
        })

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var loading = layer.load(0, {shade: 0.1}); //0代表加载的风格，支持0-2
            AjaxUtil.post({
                url: AjaxUtil.ctx + "baseCompany/doAdd",
                data: data.field,
                success: function (res) {
                    if (res.code === 0) {
                        layer.close(loading);
                        Message.success(1500, res.message, function () {
                            parent.setUpdateFlag();
                            // 重载表格
                            var iframeIndex = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(iframeIndex);
                        });
                    } else {
                        layer.close(loading);
                        Message.error(res.message, 2000);
                    }
                },
                error: function (error) {
                    layer.close(loading);
                }
            });
            return false;
        });

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

    /**
     *  扁平数据转树结构
     * @returns {[]}
     * @param data
     * @param firstPid
     */
    function arrayToTree(data, firstPid) {
        const result = [];
        getChildren(data, result, firstPid)
        return result;
    }

    function getChildren(data, result, parentId) {
        for (const item of data) {
            if (item.pid.toString() === parentId) {
                const newItem = {...item, children: []};
                result.push(newItem);
                getChildren(data, newItem.children, item.id.toString());
            }
        }
    }
</script>
</body>
</html>