<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>预约</title>
    <link href="/wsyystyle/css/uploadify.css" rel="stylesheet">
    <script src="/wsyystyle/js/jquery-1.7.2.min.js"></script>
    <script src="/wsyystyle/js/jquery.uploadify.js"></script>
    <script src="/wsyystyle/js/jquery.uploadify.min.js"></script>
    <!--    <script src="/wsyystyle/js/zxyy.js"></script>-->
    <link href="/wsyystyle/css/jquery.dialogBox.css" rel="stylesheet">
    <script src="/wsyystyle/js/jquery.dialogBox.js"></script>
    <link rel="stylesheet" href="/wsyystyle/css/font-awesome.min.css">
    <link rel="stylesheet" href="/wsyystyle/css/weui.css">
    <link rel="stylesheet" href="/wsyystyle/css/example.css">
    <link rel="stylesheet" href="/wsyystyle/css/style.css">
    <link rel="stylesheet" href="/wsyystyle/css/style1.css">
</head>
<body>
<header class="header"><a href="/" class="weui_btn weui_btn_mini  fl tit_a"><i class="fa fa-angle-left font22"></i> </a>
    <h1 class="title fl" id="lx">预约取号</h1>
</header>
<div id="StrContent">
    <form id="formsubmit">
        <input type="hidden" id="bookedTime" name="type">
        <div class="weui_tab">
            <div class="weui_tab_bd">
                <div class="weui_cells weui_cells_form" id="parentFrom" name="parentFrom">
                    <div class="weui_cell">
                        <div class="weui_cell_hd ">
                            <label class="weui_label"><span class="red">* </span>预约分类</label>
                        </div>
                        <div class="weui_cell_bd weui_cell_primary">
                            <select name="guidanceId" id="guidanceParent" onchange="getGuidanceChild(false)">
                                <option selected value="">---请选择分类---</option>
                            </select>
                        </div>
                    </div>
                    <div class="weui_cell">
                        <div class="weui_cell_hd ">
                            <label class="weui_label"><span class="red">* </span>事项分类</label>
                        </div>
                        <div class="weui_cell_bd weui_cell_primary">
                            <select id="guidanceId" onchange="getYy(true)">
                                <option selected value="">---请选择---</option>
                            </select>
                        </div>
                    </div>
                    <div class="weui_cell" id="remarkDiv">
                        <div class="weui_cell_hd ">
                            <label class="weui_label">&nbsp;&nbsp;详细事项</label>
                        </div>
                        <div class="weui_cell_bd weui_cell_primary">
                            <p id="remark">

                            </p>
                        </div>
                    </div>
                    <div class="weui_cell">
                        <div class="weui_cell_hd ">
                            <label class="weui_label"><span class="red">* </span>预约日期</label>
                        </div>
                        <div class="weui_cell_bd weui_cell_primary">
                            <select name="bookedDay" id="bookedDay" onchange="getYy(true)">
                            </select>
                        </div>
                    </div>
                    <div class="weui_cell" id="applyForNameDiv" name="applyForNameDiv">
                        <div class="weui_cell_hd">
                            <label class="weui_label"><span class="red">* </span>预 约 人</label>
                        </div>
                        <div class="weui_cell_bd weui_cell_primary">
                            <input class="weui_input" type="text" id="applyForName" name="applyForName"
                                   placeholder="请输入预约人姓名">
                        </div>
                    </div>
                    <div class="weui_cell">
                        <div class="weui_cell_hd">
                            <label class="weui_label"><span class="red">* </span>身份证号</label>
                        </div>
                        <div class="weui_cell_bd weui_cell_primary">
                            <input class="weui_input" type="text" id="idNum" name="idNum" placeholder="请输入身份证号码">
                        </div>
                    </div>
                    <div class="weui_cell">
                        <div class="weui_cell_hd">
                            <label class="weui_label"><span class="red">* </span>手机号码</label>
                        </div>
                        <div class="weui_cell_bd weui_cell_primary">
                            <input class="weui_input" type="number" id="phongNum" name="phongNum" pattern="[0-9]*"
                                   placeholder="请输入手机号码">
                        </div>
                    </div>
                </div>
                <div class="weui_cell" style="padding: 0;">
                    <div class="applicant-info">
                        <div class="bespeak mt10">
                            <table id="tbYYList" class="make-appointment" style="width:50%;float:left">
                                <thead>
                                <tr id="tr_0">
                                    <th id="th_0"><span>上午</span><span></span></th>
                                    <th id="th_1" type="2017-06-23">预约</th>
                                </tr>
                                </thead>
                                <tbody id="sjlb" style="">

                                </tbody>
                            </table>
                            <table id="tbYYList1" class="make-appointment" style="width:50%;float:left">
                                <thead>
                                <tr id="tr_1">
                                    <th id="th_2"><span>下午</span><span></span></th>
                                    <th id="th_3" type="2017-06-23">预约</th>
                                </tr>
                                </thead>
                                <tbody id="sjlb1" style="">

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="weui_tabbar">
                <a href="javascript:;" class="weui_btn weui_btn_blue" style="width:49%;float:left;" id="showToast"
                   onclick="SubMitUser();">
                    提交
                </a>
                <a href="/yyqh/web/yycx" class="weui_btn weui_btn_blue" style="width:49%;float:right;margin-top: 0"
                   id="showToast">
                    预约查询/取消
                </a>
            </div>
            <div id="toast" style="display:none;">
                <div class="weui_mask_transparent"></div>
                <div class="weui_toast"><i class="weui_icon_toast"></i>
                    <p class="weui_toast_content">预约成功,请准时到大厅取号机刷取预约人身份证取号！</p>
                </div>
            </div>
        </div>
    </form>
</div>
<script th:inline="javascript">
    var timeScope = [[${yyqhSetting.timeScope}]];
    var holidayWork = [[${yyqhSetting.holidayWork}]];
    var timeQuantumNum = [[${yyqhSetting.timeQuantumNum}]];
    var holidays = JSON.parse([[${holidays}]]);
    $(function () {
        getRecentlyDay();
        getYy(true);
        var discount = $("input[name=applyType]:checked").val();
        hideagcyName(discount);
        $("input[name=applyType]").each(function () {
            $(this).click(function () {
                hideagcyName($(this).val());
            });
        });
        getGuidanceChild(true);
    });

    function checkIsHoliday(checkDate) {
        var firstDate = new Date(checkDate);
        for (let i = 0; i < holidays.length; i++) {
            var holidayDate = new Date(holidays[i]["dayTime"]);
            if (firstDate - holidayDate == 0) {
                console.log("true: " + checkDate + " --- " + holidays[i]["dayTime"]);
                return true;
            }
        }
        return false;
    }

    function getGuidanceChild(isNew) {
        if (isNew) {
            guidanceParent = "0";
        } else {
            var guidanceParent = $("#guidanceParent option:selected").val();  //获取选中的项
        }
        if (guidanceParent != "") {
            $.ajax({
                url: "/yyqh/web/getYyqhGuidance",
                type: "post",
                dataType: 'json',
                data: {
                    "guidanceParentId": guidanceParent,
                },
                success: function (data) {
                    if (isNew) {
                        $("#guidanceParent").empty();
                        $("#guidanceParent").append('<option selected value="">---请选择---</option>');
                        for (var item in data) {
                            $("#guidanceParent").append("<option  value=\"" + data[item]['yyqhGuidanceId'] + "\">" + data[item]['guidanceName'] + "</option>");
                        }
                    } else {
                        $("#guidanceId").empty();
                        $("#guidanceId").append('<option selected value="">---请选择--</option>');
                        for (var item in data) {
                            $("#guidanceId").append("<option  value=\"" + data[item]['yyqhGuidanceId'] + "\">" + data[item]['guidanceName'] + "</option>");
                        }
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    $('body').dialogBox({
                        hasMask: true,
                        hasClose: true,
                        effect: 'sign',
                        hasBtn: true,
                        confirmValue: '确定',
                        title: '提示',
                        content: "数据加载失败!"
                    });
                }
            });
        } else {
            $("#remarkDiv").hide();
            $("#guidanceId").empty();
            $("#guidanceId").append('<option selected value="">---请选择--</option>');
            $("#sjlb").empty();
            $("#sjlb1").empty();
        }
    }

    function getYy(isNew) {
        var bookedDay = $("#bookedDay option:selected");  //获取选中的项
        var guidanceParent = $("#guidanceParent option:selected");  //获取选中的项
        if (isNew) {
            $("#bookedTime").val("");
        }
        if (guidanceParent.val() != "") {
            $.ajax({
                url: "/yyqh/web/getTimeQuantumNum",
                type: "post",
                dataType: 'json',
                data: {
                    "guidanceParent": guidanceParent.val(),
                    "bookedDay": bookedDay.val()
                },
                success: function (data) {
                    $("#sjlb").empty();
                    $("#sjlb1").empty();
                    for (var key in data) {
                        var lbhtml = '<tr id="tr_1">';
                        lbhtml += '         <td class="left-time" id="td_0" type="830">' + key + '<br>';
                        lbhtml += '             <sapn id="s1h">已预约' + data[key][1] + '人</sapn> </td>';
                        if (getSumMin(bookedDay.val() + " " + key.substr(0, 5)) < 0) {
                            lbhtml += '         <td id="td_2">停止预约</td>';
                        } else if (data[key][1] >= timeQuantumNum) {
                            lbhtml += '         <td id="td_2"><font color="red">已约满</font></td>';
                        } else if ($("#bookedTime").val() == data[key][0]) {
                            lbhtml += '         <td id="td_2" style="background: lightgreen">已选择</td>';
                        } else {
                            lbhtml += '         <td id="td_2"><a href="javascript:void(0)" onclick="selectYy(' + data[key][0] + ')">预约</a></td>';
                        }
                        lbhtml += '    </tr>';
                        if (parseInt(key.substr(0, 2)) <= 12) {
                            $("#sjlb").append(lbhtml);
                        } else {
                            $("#sjlb1").append(lbhtml);
                        }

                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    $('body').dialogBox({
                        hasMask: true,
                        hasClose: true,
                        effect: 'sign',
                        hasBtn: true,
                        confirmValue: '确定',
                        title: '提示',
                        content: "数据加载失败!"
                    });
                }
            });
            $.ajax({
                url: "/yyqh/web/getGuidance?id=" + guidanceId.val(),
                type: "get",
                dataType: 'json',
                success: function (data) {
                    $("#remarkDiv").show();
                    $("#remark").text(data["remark"]);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    $('body').dialogBox({
                        hasMask: true,
                        hasClose: true,
                        effect: 'sign',
                        hasBtn: true,
                        confirmValue: '确定',
                        title: '提示',
                        content: "数据加载失败!"
                    });
                }
            });
        } else {
            $("#sjlb").empty();
            $("#sjlb1").empty();
            $("#remarkDiv").hide();
        }
    }

    function selectYy(value) {
        $("#bookedTime").val(value);
        getYy(false);
    }

    function getRecentlyDay() {
        for (var i = 0; i < timeScope; i++) {
            switch (holidayWork) {
                case "1":
                    var day = getDay(+i);
                    if (getWek(day) != 7 && !checkIsHoliday(day)) {
                        if (i == 0) {
                            $("#bookedDay").append("<option selected=\"selected\"  value=\"" + day + "\">" + day + "</option>");
                        } else {
                            $("#bookedDay").append("<option  value=\"" + day + "\">" + day + "</option>");
                        }
                    } else {
                        timeScope++;
                    }
                    break;
                case "2":
                    var day = getDay(+i);
                    if (getWek(day) != 6 && !checkIsHoliday(day)) {
                        if (i == 0) {
                            $("#bookedDay").append("<option selected=\"selected\"  value=\"" + day + "\">" + day + "</option>");
                        } else {
                            $("#bookedDay").append("<option  value=\"" + day + "\">" + day + "</option>");
                        }
                    } else {
                        timeScope++;
                    }
                    break;
                case "3":
                    var day = getDay(+i);
                    if (!checkIsHoliday(day)) {
                        if (i == 0) {
                            $("#bookedDay").append("<option selected=\"selected\"  value=\"" + day + "\">" + day + "</option>");
                        } else {
                            $("#bookedDay").append("<option  value=\"" + day + "\">" + day + "</option>");
                        }
                    } else {
                        timeScope++;
                    }
                    break;
                case "4":
                    var day = getDay(+i);
                    if (getWek(day) != 7 && getWek(day) != 6 && !checkIsHoliday(day)) {
                        if (i == 0) {
                            $("#bookedDay").append("<option selected=\"selected\"  value=\"" + day + "\">" + day + "</option>");
                        } else {
                            $("#bookedDay").append("<option  value=\"" + day + "\">" + day + "</option>");
                        }
                    } else {
                        timeScope++;
                    }
                    break;
            }
        }
    }

    function getDay(day) {
        var today = new Date();
        var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
        today.setTime(targetday_milliseconds); //注意，这行是关键代码
        var tYear = today.getFullYear();
        var tMonth = today.getMonth();
        var tDate = today.getDate();
        tMonth = doHandleMonth(tMonth + 1);
        tDate = doHandleMonth(tDate);
        return tYear + "-" + tMonth + "-" + tDate;
    }

    function doHandleMonth(month) {
        var m = month;
        if (month.toString().length == 1) {
            m = "0" + month;
        }
        return m;
    }

    function getWek(value) {
        var day = new Date(value).getDay(),
            text = "";
        switch (day) {
            case 0:
                text = 7;
                break;
            case 6:
                text = 6;
                break;
        }
        return text;
    }

    function getSumMin(date) {
        date = date.replace(/-/g, '/');
        var date1 = new Date();
        var date2 = new Date(date);
        var s1 = date1.getTime(), s2 = date2.getTime();
        var min = (s2 - s1) / (1000 * 60);
        return min;
    }

    function SubMitUser() {
        if (CheckForm()) {
            if (confirm("请您再次核对信息，确认后提交！")) {
                var subData = $('#formsubmit').serializeArray();
                subData.push({"name": "bookedTime", "value": $("#bookedTime").val()});
                $.ajax({
                    url: "/yyqh/web/saveYyqh",    //后台webservice里的方法名称
                    type: "post",
                    dataType: 'json',
                    data: subData,
                    success: function (data) {
                        if (data == 1) {
                            $("#toast").show();
                            setTimeout(function () {
                                history.go(0);
                            }, 3000);
                        } else if (data == 2) {
                            alert("您选择的该时段已达预约上限");
                        } else if (data == 3) {
                            alert("您已经在此时间段预约业务");
                        } else {
                            $('body').dialogBox({
                                hasMask: true,
                                hasClose: true,
                                effect: 'sign',
                                hasBtn: true,
                                confirmValue: '确定',
                                title: '提示',
                                content: "数据加载失败!"
                            });

                        }
                        //history.go(-1);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        $('body').dialogBox({
                            hasMask: true,
                            hasClose: true,
                            effect: 'sign',
                            hasBtn: true,
                            confirmValue: '确定',
                            title: '提示',
                            content: "数据加载失败!"
                        });
                    }
                });
            }
        }
    }

    function CheckForm() {
        var allTime = [
            '09:00 - 10:00',
            '10:00 - 11:00',
            '11:00 - 12:00',
            '12:00 - 13:00',
            '13:00 - 14:00',
            '14:00 - 15:00',
            '15:00 - 16:00',
            '16:00 - 17:00',
            '17:00 - 18:00',
            '18:00 - 19:00',
        ];
        if ($("#guidanceId option:selected").val() == "") {
            alert("请选择要预约的事项！");
            return false;
        }
        if ($('#bookedDay').val() == "") {
            alert("请选择预约日期！");
            return false;
        }
        if ($('#applyForName').val() == "") {
            alert("请输入预约人姓名！");
            $('#applyForName').focus();
            return false;
        }
        if (document.getElementById("idNum").value == "") {
            alert("请输入身份证号码！");
            document.getElementById("idNum").focus();
            return false;
        } else {
            //传入身份号码，根据特定的算法进行判断验证，计算出最后传入的身份证号码是否正确。
            /*  身份证验证  开始  */
            var identNumber = document.getElementById('idNum').value;
            if (!(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(identNumber))) {
                alert("请输入正确的身份证号码!");
                return false;
            }
            //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X。
            if (!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(identNumber))) {
                alert("请输入正确的身份证号码!");
                return false;
            }
            //校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10。
            //下面分别分析出生日期和校验位
            var len, re;
            len = identNumber.length;
            //判断18位身份证号码，现在在国家统一身份证为18位。
            if (len == 18) {
                re = new RegExp(/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/);
                var arrSplit = identNumber.match(re);
                //检查生日日期是否正确
                var dtmBirth = new Date(arrSplit[2] + "/" + arrSplit[3] + "/" + arrSplit[4]);
                var bGoodDay;
                bGoodDay = (dtmBirth.getFullYear() == Number(arrSplit[2])) && ((dtmBirth.getMonth() + 1) == Number(arrSplit[3])) && (dtmBirth.getDate() == Number(arrSplit[4]));
                if (!bGoodDay) {
                    alert("请输入正确的身份证号码!");
                    return false;
                } else {
                    //检验18位身份证的校验码是否正确。
                    //校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10。
                    var valnum;
                    var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
                    var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
                    var nTemp = 0, i;
                    for (i = 0; i < 17; i++) {
                        nTemp += identNumber.substr(i, 1) * arrInt[i];
                    }
                    valnum = arrCh[nTemp % 11];
                    if (valnum != identNumber.substr(17, 1)) {
                        alert("请输入正确的身份证号码!");
                        return false;
                    }
                }
            } else {
                alert("请输入正确的身份证号码!");
                return false;
            }
            /*  身份证验证  结束  */
        }
        if (document.getElementById("phongNum").value == "") {
            alert("请输入手机号码！");
            document.getElementById("phongNum").focus();
            return false;
        }
        if (!(/^1[3456789]\d{9}$/.test(document.getElementById("phongNum").value))) {
            alert("手机号码有误，请重填");
            return false;
        }
        if ($('#bookedTime').val().length == 0) {
            alert("请选择预约时间！");
            return false;
        }
        if (getSumMin($("#bookedDay option:selected").val() + " " + allTime[$('#bookedTime').val() - 1].substr(0, 5)) < 0) {
            alert("当前时间段已停止预约！");
            getYy(true);
            return false;
        }
        return true;
    }

    function hideagcyName(value) {
        if (value == 2) {
            $("#agcyDiv").show();
        } else if (value == 1) {
            $("#agcyDiv").hide();
        }
    }
</script>
</body>
</html>