<%@ page contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="renderer" content="webkit">
    <!-- 移动设备 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <jsp:include page="../../../common.jsp"/>

    <style>
        .layui-table-cell {
            text-align: center;
            height: auto;
            white-space: normal;
        }

        .layui-table img {
            max-width: 300px
        }
    </style>
</head>
<body>
<form action="" class="layui-form" lay-filter="form" style="width: 80%; margin-top: 20px;">
    <input name="regionSrc" value="${regionSrc}" hidden>

    <div class="layui-form-item">
        <label class="layui-form-label">省</label>
        <div class="layui-input-block">
            <select name="province" lay-filter="province" lay-search>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">市</label>
        <div class="layui-input-block">
            <select name="city" lay-filter="city" lay-search>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">县</label>
        <div class="layui-input-block">
            <select name="area" lay-filter="area" lay-search>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
        </div>
    </div>

</form>

<script>
    var form, element, layer;

    var province;

    layui.use(['form', 'element', 'layer'], function () {
        form = layui.form;
        layer = layui.layer;

        $.get('${ctx}/regionReflect/listProvince/${type}', function (d) {
            var content = '';

            d.data.forEach(function (el) {
                content += '<option value="' + el + '">' + el + "</option>";
            })

            console.log("province: " + content);
            $('select[name="province"]').html(content);
            form.render('select');
        })

        form.on('select(province)', function(data){
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象

            province = data.value;

            $.get('${ctx}/regionReflect/listCity/${type}/' + province, function (d) {
                var content = '';

                d.data.forEach(function (el) {
                    content += '<option value="' + el + '">' + el + "</option>";
                })

                console.log("city: " + content);
                $('select[name="city"]').html(content);

                form.render('select');
            })
        });

        form.on('select(city)', function(data){
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象

            $.get('${ctx}/regionReflect/listArea/${type}/' + province + "/" + data.value, function (d) {
                var content = "";

                d.data.forEach(function (el) {
                    content += '<option value="' + el + '">' + el + "</option>"
                })

                $('select[name="area"]').html(content);

                form.render('select');
            })
        });

        //监听提交
        form.on('submit(formDemo)', function(data){
            var fileData = data.field;
            fileData.type = '${type}';
            $.post('${ctx}/regionReflect/save', fileData, function(d) {
                layer.msg(d.message);
                if (d.code == 200) {
                    parent.layer.closeAll();
                    parent.reload();
                }
            })

            return false;
        });
    })
</script>
</body>
</html>