<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<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-form-item{
            margin-top: 10px;
        }
        .layui-form{
            width: 75%;
            margin-left: 5%;
        }
        .area-info{
            width: 25% !important;
        }
        .layui-form-item .layui-input-inline{
            margin-right: 0 !important;
        }
        .area{
            display: none;
        }
    </style>
</head>
<body>
<form class="layui-form" action="" id="addForm">
    <input name="id" value="${entity.id}" hidden/>
    <div class="layui-form-item">
        <label class="layui-form-label">用户角色</label>
        <div class="layui-input-block">
            <select name="roleCode" lay-verify="required" id="roleCode">
                <option value="">请选择</option>
                <c:forEach items="${roleList}" var="r">
                    <option value="${r.roleCode}" ${entity.roleCode eq r.roleCode ? 'selected' : ''}>${r.roleName}</option>
                </c:forEach>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">类型</label>
        <div class="layui-input-block">
            <select name="type" lay-verify="required" lay-filter="type" id="type">
                <option value="">请选择</option>
                <option value="01" ${entity.type eq '01' ? 'selected' : ''} >默认</option>
                <option value="02" ${entity.type eq '02' ? 'selected' : ''}>区域</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item ${entity.type eq '01' or empty entity ? 'area' : '' }" id="area-info">
        <div class="layui-form-label">区域</div>
        <div class="layui-input-inline area-info" >
            <select name="provinceCode" id="province-selector" class="province-selector" lay-filter="province-1">
                <option value="">请选择</option>
                <c:forEach items="${pList}" var="p">
                    <option ${entity.provinceCode eq p.areaCode ? 'selected' : ''} value="${p.areaCode}">${p.areaName}</option>
                </c:forEach>
            </select>
        </div>
        <div class="layui-input-inline area-info ${entity.level eq 2 or entity.level eq 3 ? '' : 'layui-hide'}">
            <select name="cityCode" id="city-selector" class="city-selector" lay-filter="city-1">
            </select>
        </div>
        <div class="layui-input-inline area-info ${entity.level eq 3 ? '' : 'layui-hide'}">
            <select name="areaCode" id="county-selector" class="county-selector" lay-filter="county-1">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">金额</label>
        <div class="layui-input-block">
            <input name="rewardAmt" type="number" value="${entity.rewardAmt}" lay-verify="required|price" autocomplete="off" maxlength="11"  placeholder="奖励金额" class="layui-input"/>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="button" id="close" class="layui-btn layui-btn-primary">关闭</button>
        </div>
    </div>
</form>
<script>
    layui.use(['form','layer'], function(){
        let layer = layui.layer
            , form = layui.form;
        $('#close').click(function() {
            parent.layer.closeAll();
        });
        let provinceCode = '${entity.provinceCode}';
        let cityCode = '${entity.cityCode}';
        let areaCode = '${entity.areaCode}';
        if(provinceCode){
            let dom = $("#city-selector");
            getNextAreaInfo(provinceCode,dom,cityCode);
            if(cityCode){
                let dom = $("#county-selector");
                getNextAreaInfo(cityCode,dom,areaCode);
            }

        }
        form.on('select(province-1)',function (data){
            let value = data.value;
            let dom = $("#city-selector");
            getNextAreaInfo(value,dom);
            $("#county-selector").empty().parent().addClass("layui-hide")
        })
        form.on('select(city-1)',function (data){
            let value = data.value;
            let dom = $("#county-selector");
            getNextAreaInfo(value,dom);
        })

        form.on('select(type)',function (data){
            if(data.value == "02"){
                $(".area").show();
                form.render("select");
            }else{
                $(".area").hide();
            }
        })
        //监听提交
        form.on('submit(formDemo)', function(data){
            let index = layer.load(1,{shade: [0.1,'#000'] });
            let param = data.field;
            let level = 1;
            if(param.type == "01"){
                level = 0;
                param.provinceCode = "";
                param.cityCode = "";
                param.areaCode = "";
            }else{
                let provinceName = $("#province-selector").children("option:selected").text();
                let cityCode = $("#city-selector").children("option:selected").val();
                let cityName = $("#city-selector").children("option:selected").text();
                let areaCode = $("#county-selector").children("option:selected").val();
                let areaName = $("#county-selector").children("option:selected").text();
                if(cityCode){
                    level = 2;
                }
                if(areaCode){
                    level = 3
                }
                param.provinceName = provinceName;
                param.cityName = cityName == "请选择" ? "" : cityName;
                param.areaName = areaName == "请选择" ? "" : areaName;
            }
            param.level = level;

            $.ajax({
                url: '${ctx}/openAccountConfig/save',
                method: 'post',
                data: JSON.stringify(data.field),
                dataType: 'JSON',
                contentType:"application/json",
                success: function(res) {
                    layer.close(index);
                    if(res.code == 200) {
                        layer.msg(res.message, { icon: 1, time: 1000 }, function () {
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layui.table.reload('openAccountConfig');
                            parent.layer.close(index);
                        });
                    } else {
                        layer.msg(res.message, {
                            icon: 2
                        });
                    }
                }
            })
            return false;
        });

        function getNextAreaInfo(value,dom,cVal){
            let url = '${ctx}/userRewardInfo/getNextAreaInfo/'+value;
            $.get(url,function(res){
               if(res.code == 200){
                   let html = "<option value=''>请选择</option>";
                   $.each(res.data,function (index,e){
                       html += '<option '+(e.areaCode === cVal ? 'selected' : '')+'  value="'+e.areaCode+'">'+e.areaName+'</option>';
                   })
                   dom.empty();
                   dom.append(html);
                   dom.parent("div").removeClass("layui-hide");
                   form.render("select");
               }
            })
        }
    });
    function del(obj){
        let value = $(obj).data().value;
        let values = $("#areaNos").val();
        $("#areaNos").val(values.replace(","+value,""));
        $(obj).parent().remove();
    }
</script>
</body>
</html>
