<!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>
<form class="layui-form" action="">
    <div class="layui-form layuimini-form">
        <div class="layui-form-item layui-inline" style="width: 100%">
            <label class="layui-form-label required" style="width: 80px">姓名</label>
            <div class="layui-input-inline" style="width: 250px">
                <input type="text" id="xm" name="xm"  lay-verify="required" lay-reqtext="姓名不能为空"  autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label required" style="width: 30px">性别</label>
            <div class="layui-input-inline" style="width: 130px">
                <select name="xb" id="xb" required>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <label class="layui-form-label required" style="width: 80px">身份证号</label>
            <div class="layui-input-inline" style="width: 250px">
                <input type="text" id="sfzh" name="sfzh"  lay-verify="required" lay-reqtext="身份证号不能为空" autocomplete="off" lay-min="18" class="layui-input">
            </div>

            <label class="layui-form-label required" style="width: 80px;top: 10px">工作内容</label>
            <div class="layui-input-inline" style="width: 250px;top: 10px">
                <input type="text" id="gznr" name="gznr" class="layui-input" required>
            </div>
            <label class="layui-form-label required" style="width: 70px;margin-left:-40px;top: 10px">学历</label>
            <div class="layui-input-inline" style="width: 130px;top: 10px">
                <select name="xl" id="xl" lay-search required>
                    <option value="">请选择</option>
                    <option th:each="item:${xlList}" th:text="${item.name}" th:value="${item.name}"></option>
                </select>
            </div>
            <label class="layui-form-label required" style="width: 80px;top: 10px">毕业学校</label>
            <div class="layui-input-inline" style="width: 250px;top: 10px">
                <input type="text" id="byxy" name="byxy" class="layui-input" required>
            </div>

            <label class="layui-form-label required" style="width:80px;top: 20px;">电话</label>
            <div class="layui-input-inline" style="width: 250px;top: 20px;height: 40px  ">
                <input type="text" id="phone" name="phone" lay-verify="required" lay-reqtext="电话不能为空" maxlength="12" autocomplete="off" lay-min="11" class="layui-input">
            </div>
            <label class="layui-form-label required" style="width: 80px;margin-left: -50px;top: 20px">专业</label>
            <div class="layui-input-inline" style="width: 130px;top: 20px">
                <input type="text" id="zy" name="zy" class="layui-input" required>
            </div>
                <label class="layui-form-label required" style="width: 90px; left: -580px;top: 75px" >起止日期</label>
                <div class="layui-input-inline" style="width: 150px;top: 70px;left: -580px">
                    <input type="text" name="qpsj" id="qpsj" lay-verify="required" lay-reqtext="日期不能为空" placeholder="开始日期" class="layui-input" readonly>
                </div>
                <div class="layui-form-mid" style="top: 70px;left: -580px">-</div>
                <div class="layui-input-inline" style="width: 150px;top: 32px;left: -85px">
                    <input type="text" name="dqsj" id="dqsj" lay-verify="required" lay-reqtext="日期不能为空" placeholder="结束日期" class="layui-input" readonly>
                </div>

        </div>
        <div class="right-bottom-btn" style="margin-right: 10px">
            <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>

</form>

<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', 'layCascader'], function () {
        var form = layui.form,
            tableSelect = layui.tableSelect,
            layer = layui.layer,
            layCascader = layui.layCascader,
            laydate = layui.laydate;
        //日期
        laydate.render({
            elem: '#qpsj'
        });
        laydate.render({
            elem: '#dqsj'
        });
        //监听专业专长
        form.on('select(zyzc)', function (data) {
            let text = data.elem.selectedOptions[0].text;
            $("#zyzc").val(text);
        });
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            console.log('获取 data的值：'+data);

            var a=$('form').serializeArray();
            console.log('这是第二种方式：'+a);

            var str=JSON.stringify(a);

            if(!validateIDCard($('#sfzh').val())){
                alert('您输入的身份证号有误，请重新输入');
                return false;

            }
            if (validatePhoneNumber($('#phone').val()) != true){
                Message.error('您输入的电话号码有误，请重新输入',2000);
                return false;
            }


            AjaxUtil.post({
                url: AjaxUtil.ctx + 'lsUser/save',
                contentType: "application/json",
                data:JSON.stringify(data.field),
                success: function (res) {
                    console.log(res);
                    if (res.code === 0) {
                        Message.success(res.message,1000,function () {
                            var iframeIndex = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(iframeIndex);
                            window.parent.location.reload();
                        })

                    } else {
                        Message.error(res.message, 2000,function (){
                            var iframeIndex = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(iframeIndex);
                            window.parent.location.reload();
                        });
                    }
                },
                error: function (error) {
                    layer.alert('服务器睡着了',{icon:5});
                    console.log(error);
                }
            });
            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 arrayToTree1(data, firstPid) {
        const result = [];
        getChildren1(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());
            }
        }
    }
    function getChildren1(data, result, parentId) {
        for (const item of data) {
            if (item.parentId === parentId) {
                const newItem = {...item, children: []};
                result.push(newItem);
                getChildren1(data, newItem.children, item.deptId);
            }
        }
    }
    function validateIDCard(idCard) {
        // 正则表达式验证规则
        var regExp = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;

        if (regExp.test(idCard)) {
            // 校验位的检测
            var idCardArray = idCard.split('');
            var factor = [
                7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2
            ];
            var parityBit = [
                '1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'
            ];
            var checkSum = 0;

            for (var i = 0; i < 17; i++) {
                checkSum += parseInt(idCardArray[i]) * factor[i];
            }

            if (parityBit[checkSum % 11] !== idCardArray[17]) {
                return false; // 校验位错误
            } else {
                return true; // 校验通过
            }
        } else {
            return false; // 格式错误
        }
    }
    function validatePhoneNumber(phoneNumber) {
        // 正则表达式验证规则
        var regExp = /^[1-9]\d{10}$/;

        if (regExp.test(phoneNumber)) {
            return true; // 电话号码格式正确
        } else {
            return false; // 电话号码格式错误
        }
    }

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