<!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">[[${title}]]</h1>
</header>
<div id="StrContent">
    <form id="formsubmit">
        <input type="hidden" id="type" name="type" th:value="${yytype}">
        <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="bookedDay" id="bookedDay" onchange="getYy(true)">
                            </select>
                        </div>
                    </div>
                    <div class="weui_cell" id="siteDiv" name="siteDiv">
                        <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="site" id="site" onchange="Getbldz()"
                                    th:with="type=${@dict.getType('banliwangdian')}">
                                <option value="">&#45;&#45;请选择办理网点&#45;&#45;</option>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictValue}"></option>
                            </select>
                        </div>

                    </div>
                    <div class="weui_cell" id="addressDiv" name="addressDiv">
                        <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="address" name="address" disabled>
                        </div>
                    </div>
                    <div class="weui_cell" id="entNameDiv" name="entNameDiv">
                        <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="entName" name="entName" placeholder="请输入企业名称">
                        </div>
                    </div>
                    <div class="weui_cell" id="businessTypeDiv" name="businessTypeDiv">
                        <div class="weui_cell_hd">
                            <label class="weui_label"><span class="red">* </span>业务类型</label>
                        </div>
                        <div class="weui_cell_bd weui_cell_primary">
                            <input type="radio" id="businessType1" name="businessType" value="1" checked> 变更 &nbsp;
                            <input type="radio" id="businessType2" name="businessType" value="2"> 注销
                        </div>
                    </div>
                    <div class="weui_cell" id="applyTypeDiv" name="applyTypeDiv">
                        <div class="weui_cell_hd">
                            <label class="weui_label"><span class="red">* </span>预约人类型</label>
                        </div>
                        <div class="weui_cell_bd weui_cell_primary">
                            <input type="radio" id="xz1" name="applyType" value="1" checked> 个人 &nbsp;
                            <input type="radio" id="xz2" name="applyType" value="2"> 代办
                        </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 class="weui_cell" id="businessBelongsDiv" name="businessBelongsDiv">
                        <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="businessBelongs" id="businessBelongs"
                                    th:with="type=${@dict.getType('banliwangdian')}">
                                <option value="">--请选择街道--</option>
                                <option value="">&#45;&#45;请选择办理网点&#45;&#45;</option>
                                <!--      <option selected="selected" value="">&#45;&#45;请选择办理网点&#45;&#45;</option>';
                                      <option value="裕华西路85号">&#45;&#45;农行西城支行&#45;&#45;</option>';
                                      <option value="友谊南大街122号">&#45;&#45;农行友谊南支行&#45;&#45;</option>';
                                      <option value="友谊南大街23号">&#45;&#45;农行和平支行&#45;&#45;</option>';
                                      <option value="工农路558号">&#45;&#45;农行西环路支行&#45;&#45;</option>';
                                      <option value="新石中路375号">&#45;&#45;农行新石中支行&#45;&#45;</option>';-->
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictValue}"></option>
                            </select>
                        </div>

                    </div>
                    <div class="weui_cell" id="agcyDiv" name="agcyDiv">
                        <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="agcy" name="agcy" 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="tbYYList2" class="make-appointment" style="width:50%;float:left">
                                <thead>
                                <tr id="tr_1">
                                    <th id="th_2" type="2017-06-26"><span>下午</span><span></span></th>
                                    <th id="th1" type="2017-06-26">预约</th>
                                </tr>
                                </thead>
                                <tbody id="sjlb2" style="">

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="weui_tabbar"><a href="javascript:;" class="weui_btn weui_btn_blue" id="showToast"
                                        onclick="SubMitUser();">提交</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>
    var timeScope = [[${wsyySetting.timeScope}]];
    var holidayWork = [[${wsyySetting.holidayWork}]];
    var timeQuantumNum = [[${wsyySetting.timeQuantumNum}]];
    var type = $("#type").val();
    console.log(type);
    $(function () {
        initPageView(type);
        getRecentlyDay();
        getYy(true);
        var discount = $("input[name=applyType]:checked").val();
        hideagcyName(discount);
        $("input[name=applyType]").each(function () {
            $(this).click(function () {
                hideagcyName($(this).val());
            });
        });
    });

    function initPageView(type) {
        switch (type) {
            case "1":
                $('#businessTypeDiv').remove();
                $('#businessBelongsDiv').remove();
                $('#applyForNameDiv').remove();
                break;
            case "2":
                $('#siteDiv').remove();
                $('#addressDiv').remove();
                $('#businessBelongsDiv').remove();
                $('#applyForNameDiv').remove();
                break;
            case "3":
                $('#siteDiv').remove();
                $('#addressDiv').remove();
                $('#entNameDiv').remove();
                $('#businessTypeDiv').remove();
                $('#applyTypeDiv').remove();
                $('#agcyDiv').remove();
                break;
        }
    }

    function getYy(isNew) {
        var bookedDay = $("#bookedDay option:selected");  //获取选中的项
        if (isNew) {
            $("#bookedTime").val("");
        }
        $.ajax({
            url: "/wsyy/web/getTimeQuantumNum",
            type: "post",
            dataType: 'json',
            data: {
                "type": type,
                "bookedDay": bookedDay.val()
            },
            success: function (data) {
                $("#sjlb").empty();
                $("#sjlb2").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)) < 20) {
                        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">已选择</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, 5)) <= 12) {
                        $("#sjlb").append(lbhtml);
                    } else {
                        $("#sjlb2").append(lbhtml);
                    }
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $('body').dialogBox({
                    hasMask: true,
                    hasClose: true,
                    effect: 'sign',
                    hasBtn: true,
                    confirmValue: '确定',
                    title: '提示',
                    content: "数据加载失败!"
                });
            }
        });
    }

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

/*    $("select[name='site']").change(function(){
        var options = $("#site option:selected");  //获取选中的项
        if (options.val() == "") {
            alert("请选择办理网点");
            $("#address").value = "";
        } else {
            $("#address").val(options.val());
        }
    })*/

    function Getbldz() {
        var options = $("#site option:selected");  //获取选中的项
        if (options.val() == "") {
            alert("请选择办理网点");
            $("#address").value = "";
        } else {
            $("#address").val(options.val());
        }
    }

    function getRecentlyDay() {
        for (var i = 0; i < timeScope; i++) {//最多往后预约几天
            switch (holidayWork) {//周六日是否接收预约
                case 1:
                    var day = getDay(+i);
                    if (getWek(day) != 7) {
                        if (i == 0) {
                            $("#bookedDay").append("<option selected=\"selected\"  value=\"" + day + "\">" + day + "</option>");
                        } else {
                            $("#bookedDay").append("<option  value=\"" + day + "\">" + day + "</option>");
                        }
                    }else {
                        console.log(i);
                    }
                    break;
                case 2:
                    var day = getDay(+i);
                    if (getWek(day) != 6) {
                        if (i == 0) {
                            $("#bookedDay").append("<option selected=\"selected\"  value=\"" + day + "\">" + day + "</option>");
                        } else {
                            $("#bookedDay").append("<option  value=\"" + day + "\">" + day + "</option>");
                        }
                    }
                    else {
                        console.log(i);
                    }
                    break;
                case 3:
                    var day = getDay(+i);
                    if (i == 0) {
                        $("#bookedDay").append("<option selected=\"selected\"  value=\"" + day + "\">" + day + "</option>");
                    } else {
                        $("#bookedDay").append("<option  value=\"" + day + "\">" + day + "</option>");
                    }

                    break;
                case 4:
                    var day = getDay(+i);
                    if (getWek(day) != 7 && getWek(day) != 6) {
                        if (i == 0) {
                            $("#bookedDay").append("<option selected=\"selected\"  value=\"" + day + "\">" + day + "</option>");
                        } else {
                            $("#bookedDay").append("<option  value=\"" + day + "\">" + day + "</option>");
                        }
                    } else {
                        console.log(i);
                    }
                    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: "/wsyy/web/saveYy",    //后台webservice里的方法名称
                    type: "post",
                    dataType: 'json',
                    data: subData,
                    success: function (data) {
                        if (data == "1") {
                            $("#toast").show();
                            setTimeout('window.location.href = "/wsyy/web/index"', 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 ($('#bookedDay').val() == "") {
            alert("请选择预约日期！");
            return false;
        }
        if (type == 1 && $("#site option:selected").val() == "" && $('#address').val() == "") {
            alert("请重新选择办理网点！");
            return false;
        }
        if (type != 3 && document.getElementById("entName").value == "") {
            alert("请输入企业名称！");
            document.getElementById("entName").focus();
            return false;
        }
        if (type == 3 && $('#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 (type != 3 && $("input[name=applyType]:checked").val() == "2" && document.getElementById("agcy").value == "") {
            alert("请输入代办公司名称！");
            document.getElementById("agcy").focus();
            return false;
        }
        if (type == 3 && $("#businessBelongs option:selected").val() == "") {
            alert("请选择经营所属！");
            return false;
        }
        if ($('#bookedTime').val().length == 0) {
            alert("请选择预约时间！");
            return false;
        }
        if (getSumMin($("#bookedDay option:selected").val() + " " + allTime[$('#bookedTime').val() - 1].substr(0, 5)) < 20) {
            alert("当前时间段已停止预约！");
            getYy(true);
            return false;
        }
        return true;
    }

    function hideagcyName(value) {
        if (value == 2) {
            $("#agcyDiv").show();
        } else if (value == 1) {
            $("#agcyDiv").hide();
        }
    }

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