<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<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">
    <div id="LocationDiv" style="display: none;">
        <p>
            您现在距离办事地点过远！
        </p>
    </div>
    <form id="formsubmit" style="display: block;">
        <input type="hidden" id="openid" name="openid" th:value="${openid}">
        <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="guidanceParent" 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 name="guidanceId" id="guidanceId" onchange="getYy(true)">
                                <option selected value="">---请选择---</option>
                            </select>
                        </div>
                    </div>
                    <div class="weui_cell" id="waitCountDiv">
                        <div class="weui_cell_hd ">
                            <label class="weui_label">&nbsp;&nbsp;等待人数</label>
                        </div>
                        <div class="weui_cell_bd weui_cell_primary">
                            <p id="waitCount">

                            </p>
                        </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" 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>
            <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 th:inline="javascript"> var ctx = [[@{
    /}]]; var captchaType = [[${captchaType}]]; </script>
<!-- 全局js -->
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<!-- 验证插件 -->
<script src="../static/ajax/libs/validate/jquery.validate.min.js"
        th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script src="../static/ajax/libs/validate/messages_zh.min.js"
        th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.0.0}"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '[[${sign["appid"]}]]', // 必填，公众号的唯一标识
        timestamp: [[${sign["timestamp"]}]], // 必填，生成签名的时间戳
        nonceStr: '[[${sign["nonceStr"]}]]', // 必填，生成签名的随机串
        signature: '[[${sign["signature"]}]]',// 必填，签名
        jsApiList: [
            'checkJsApi',
            'openLocation',
            'getLocation'
        ]
    });
    wx.ready(function () {
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

        wx.checkJsApi({
            jsApiList: [
                'getLocation',
            ],
            success: function (res) {
                if (res.checkResult.getLocation == false) {
                    alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
                    return;
                }
            }
        });

        wx.getLocation({
            type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: function (res) {
                var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                //获取到经纬度之后，异步去后台加载出来真实的地理位置
                getFlatternDistance(latitude, longitude, 38.005645751953125, 114.46509552001953);//广美国际经纬度
            }
        });
    });
    $(function () {
        $("#remarkDiv").hide();
        getGuidanceChild(true);
    });

    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>');
        }
    }

    function getYy(isNew) {
        var bookedDay = $("#bookedDay option:selected");  //获取选中的项
        var guidanceId = $("#guidanceId option:selected");  //获取选中的项
        if (isNew) {
            $("#bookedTime").val("");
        }
        if (guidanceId.val() != "") {
            $.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: "数据加载失败!"
                    });
                }
            });
            $.ajax({
                url: "http://123.182.230.242:1888/getno?data={\"cmd\":\"GetQueueCount\",\"QueueId\":\"" + guidanceId.val() + "\"}",
                type: "get",
                dataType: 'json',
                success: function (data) {
                    if (data["State"] == "1") {
                        $("#waitCount").show();
                        $("#waitCount").text("您前面还有" + data["WaitCount"] + "人");
                    } else {
                        $('body').dialogBox({
                            hasMask: true,
                            hasClose: true,
                            effect: 'sign',
                            hasBtn: true,
                            confirmValue: '确定',
                            title: '提示',
                            content: "数据加载失败!"
                        });
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    $('body').dialogBox({
                        hasMask: true,
                        hasClose: true,
                        effect: 'sign',
                        hasBtn: true,
                        confirmValue: '确定',
                        title: '提示',
                        content: "数据加载失败!"
                    });
                }
            });
        } else {
            $("#remarkDiv").hide();
        }
    }

    function getFlatternDistance(lat1, lng1, lat2, lng2) {
        var radLat1 = lat1 * Math.PI / 180.0;
        var radLat2 = lat2 * Math.PI / 180.0;
        var a = radLat1 - radLat2;
        var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
        var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
        s = s * 6378.137;
        s = Math.round(s * 10000) / 10;
        alert(s);
        if (s > 500) {
            $("#formsubmit").hide();
            $("#LocationDiv").show();
        } else {
            $("#formsubmit").show();
            $("#LocationDiv").hide();
        }
    }

    function SubMitUser() {
        if (CheckForm()) {
            if (confirm("请您再次核对信息，确认后提交！")) {
                var subData = $('#formsubmit').serializeArray();
                subData.push({"name": "bookedTime", "value": $("#bookedTime").val()});
                $.ajax({
                    url: "/xcqh/web/saveXcqh",    //后台webservice里的方法名称
                    type: "post",
                    dataType: 'json',
                    data: subData,
                    success: function (data) {
                        console.log(data);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        $('body').dialogBox({
                            hasMask: true,
                            hasClose: true,
                            effect: 'sign',
                            hasBtn: true,
                            confirmValue: '确定',
                            title: '提示',
                            content: "数据加载失败!"
                        });
                    }
                });
            }
        }
    }

    function CheckForm() {
        if ($("#guidanceId option:selected").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;
        }
        return true;
    }
</script>
</body>
</html>