<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="decorator" content="base"/>
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/static/css/reset.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/style/formSelects-v4.css" media="all">
    <style>
        html{
            background-color: #fff;
        }
        .layui-form-select dl{
            max-height:200px;
            width: 80%;
        }
        .xm-select-dl dl{
            max-height:200px;
        }
    </style>
</head>
<body>
<div class="aaa layui-form" id="LAY_app">
    <div class="layui-card">
        <div class="layui-col-xs12 mt-10 pr-30">
            <label class="layui-form-label w-130"><i class="red">*</i>省：</label>
            <div class="layui-input-block ml-130">
                <div class="layui-col-xs12 pr-20">
                    <select class="province" id="province" name="province" lay-verify="province" lay-filter="province" lay-search>
                        <option value="">请选择省</option>
                        <c:forEach items="${province}" var="pro">
                            <option value="${pro.columns.ProvinceName}" title="${pro.columns.ProvinceID}">${pro.columns.ProvinceName}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 mt-10 pr-30">
            <label class="layui-form-label w-130">市：</label>
            <div class="layui-input-block ml-130">
                <div class="layui-col-xs12 pr-20">
                    <select id="city" name="city" lay-verify="city" lay-filter="city" xm-select="cityId" xm-select-type="1" xm-select-height="30px" xm-select-show-count="6"  xm-select-search>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 mt-10 pr-30">
            <label class="layui-form-label w-130">区/县：</label>
            <div class="layui-input-block ml-130">
                <div class="layui-col-xs12 pr-20">
                    <select id="area" name="area"  xm-select="areaId" xm-select-type="1" xm-select-height="30px" xm-select-show-count="6" xm-select-search>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="operate-footer">
        <input type="button" lay-submit lay-filter="confirm" id="confirm" class="layui-btn " value="保存">
        <input type="button" value="取消" class="layui-btn layui-btn-primary " onclick="closeDiv();">
    </div>
</div>

<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/lib/formSelects-v4.js"></script>
<script type="text/javascript">
    //初始数据
    var $form;
    var form;
    var upload;
    var $;
    var formSelects;
    layui.use(['form', 'table', 'upload','laydate', 'jquery', 'formSelects'], function () {
        $ = layui.jquery;
        form = layui.form;
        upload = layui.upload;
        laydate = layui.laydate;
        $form = $('form');
        formSelects = layui.formSelects;

        formSelects.closed('cityId', function(id){
            console.log('合上了');
            var city =  formSelects.value('cityId', 'nameStr');
            cityOrder(city)
        });

        form.on('submit(confirm)', function (data) {
            let province = $("#province").val();
            if (isBlank(province)) {
                layer.msg("请选择省");
                return;
            }
            let city = $("#city").val();
            let cityId = formSelects.value('cityId', 'nameStr');
            // let city = formSelects.value('CityId', 'nameStr');
            let area = formSelects.value('areaId', 'nameStr');
            parent.addAreaHtml(province, cityId, area);
            closeDiv();
        });

        form.on('select(province)', function (data) {
            let province = $(data.elem).find("option:selected").val();
            $("#city").empty();
            $("#area").empty();
            formSelects.render('areaId');
            if (isBlank(province)) {
                $("#city").empty();
                return "";
            }
            provinceOrder(province)
        });

        form.on('select(city)', function (data) {
            console.log("进来")
            let city = formSelects.value('cityId', 'nameStr');
            if (isBlank(city)) {
                $("#area").empty();
                return "";
            }
            cityOrder(city)
        });
    })

    function provinceOrder(province){
        $.ajax({
            type:"POST",
            url:"${ctx}/main/redirect/getCitysByProName",
            data: {
                province: province
            },
            success:function(result){
                if(result =="205"){
                    layer.msg("暂无数据!")
                    return
                }
                let html = " <option value=''>请选择市</option>";
                for (let i = 0; i < result.length; i++) {
                    let city = result[i];
                    html = html + '<option value="' + city.columns.CityName + '" title="' + city.columns.CityID + '">' + city.columns.CityName + '</option>';
                }
                $("#city").append(html);
                formSelects.render('cityId');
                $(".xm-select-dl").css("max-height", "220px");
            }
        });
    }


    function cityOrder(city){
        $("#area").empty();
        if (isBlank(city)) {
            $("#area").append("<option value=''>请选择区</option>");
            formSelects.render('areaId');
            return "";
        }
        $.ajax({
            type: "POST",
            url: "${ctx}/main/redirect/getAreaListByCityName",
            data: {
                city: city
            },
            success: function (result) {
                if (result == "205") {
                    layer.msg("暂无数据!")
                    return
                }
                let html = "<option value=''>请选择区</option>";
                for (let i = 0; i < result.length; i++) {
                    let area = result[i];
                    html = html + '<option value="' + area.columns.DistrictName + '" title="' + area.columns.DistrictID + '">' + area.columns.DistrictName + '</option>';
                }
                $("#area").append(html);
                formSelects.render('areaId');
                $(".xm-select-dl").css("max-height", "220px");
            }
        });
    }

    function  closeDiv() {
        let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index);
    }

    function isBlank(val) {
        if (val == null || val == '' || val == undefined) {
            return true;
        }
        return false;
    }
</script>
</body>
</html>
