<%@ 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: 10%;
        }
        .area-info{
            width: 25% !important;
        }
        /*.layui-icon-add-circle{*/
        /*    color:#1E9FFF*/
        /*}*/
    </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">用户ID</label>
        <div class="layui-input-block">
            <input name="userId" type="number" value="${entity.userId}" autocomplete="off" maxlength="11"  placeholder="手机号和用户ID二选一" class="layui-input"/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">登录账号</label>
        <div class="layui-input-block">
            <input name="loginName" type="text" value="${entity.loginName}" autocomplete="off" maxlength="50"  placeholder="登录账号和用户ID二选一" class="layui-input" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">奖励类型</label>
        <div class="layui-input-block">
            <select name="reId" id="reId" lay-verify="required">
                <c:forEach items="${rList}" var="r">
                    <option ${entity.reId eq r.id ? 'selected' : ''} value="${r.id}">${r.name}</option>
                </c:forEach>
            </select>
        </div>
    </div>

<%--    <div class="layui-form-item layui-hide" id="hide-area-info">--%>
<%--        <div class="layui-form-label">区域</div>--%>
<%--        <div class="layui-input-inline area-info" >--%>
<%--            <select name="province" class="province-selector" lay-filter="province-1" lay-verify="required">--%>
<%--                <option value="">请选择</option>--%>
<%--                <c:forEach items="${pList}" var="p">--%>
<%--                    <option ${entity.areaNo eq p.areaCode ? 'selected' : ''} value="${p.areaCode}">${p.areaName}</option>--%>
<%--                </c:forEach>--%>
<%--            </select>--%>
<%--        </div>--%>
<%--    </div>--%>

    <div class="layui-form-item" id="area-info">
        <div class="layui-form-label">区域</div>
        <div class="layui-input-inline area-info" >
            <select name="province" id="province-selector" class="province-selector" lay-filter="province-1" lay-verify="required">
                <option value="">请选择</option>
                <c:forEach items="${pList}" var="p">
                    <option ${entity.areaNo eq p.areaCode ? 'selected' : ''} value="${p.areaCode}">${p.areaName}</option>
                </c:forEach>
            </select>
        </div>
        <div class="layui-input-inline area-info ${entity.areaLevel eq 2 or entity.areaLevel eq 3 ? '' : 'layui-hide'}">
            <select name="city" id="city-selector" class="city-selector" lay-filter="city-1">
            </select>
        </div>
        <div class="layui-input-inline area-info ${entity.areaLevel eq 3 ? '' : 'layui-hide'}">
            <select name="county" id="county-selector" class="county-selector" lay-filter="county-1">
            </select>
        </div>
<%--        <div class="layui-input-inline" style="width: auto;padding-top:10px" id="addArea">--%>
<%--            <i class="layui-icon layui-icon-add-circle"></i>--%>
<%--        </div>--%>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <select name="status" id="status" lay-verify="required">
                <option value="">请选择</option>
                <option value="1" ${empty entity or entity.status eq 1 ? 'selected' : ''}>正常</option>
                <option value="-1" ${entity.status eq -1 ? 'selected' : ''}>禁用</option>
            </select>
        </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 areaNo = '${entity.areaNo}';
        if(areaNo){
            if(areaNo.indexOf("-") < 0){
                let dom = $("#city-selector");
                getNextAreaInfo(areaNo,dom);
            }else{
                let checkAreaNo = areaNo.split("-");
                if(checkAreaNo.length == 2){
                    let dom = $("#city-selector");
                    getNextAreaInfo(checkAreaNo[1],dom);
                }else{
                    let dom = $("#county-selector");
                    getNextAreaInfo(checkAreaNo[2],dom);
                }
            }
        }
        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('submit(formDemo)', function(data){
            let index = layer.load(1,{shade: [0.1,'#000'] });
            let param = data.field;
            let areaLevel = 1;
            let areaNo = $("#province-selector").children("option:selected").val();
            let areaName = $("#province-selector").children("option:selected").text();

            let cityCode = $("#city-selector").children("option:selected").val();
            let cityName = $("#city-selector").children("option:selected").text();
            let countyCode = $("#county-selector").children("option:selected").val();
            let countyName = $("#county-selector").children("option:selected").text();
            if(cityCode){
                areaNo = areaNo + "-" + cityCode;
                areaName = areaName + "-" + cityName;
                areaLevel = 2;
            }
            if(countyCode){
                areaNo = areaNo + "-" + countyCode;
                areaName = areaName + "-" + countyName;
                areaLevel = 3
            }
            param.areaNo = areaNo;
            param.areaName = areaName;
            param.areaLevel = areaLevel;
            $.ajax({
                url: '${ctx}/userRewardInfo/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('userRewardInfo');
                            parent.layer.close(index);
                        });
                    } else {
                        layer.msg(res.message, {
                            icon: 2
                        });
                    }
                }
            })
            return false;
        });

        function getNextAreaInfo(value,dom){
            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 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>
