<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
    <meta name="decorator" content="base" />
    <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;
        }
        .xm-select-parent .xm-form-select dl{
            max-height: 200px;
        }
    </style>
</head>
<body style="">

<div class="layui-form" id="" style="height: 100%;" lay-filter="component-form-element">
    <div class="" style="height: 100%;padding: 20px;">
        <div class="layui-card-body">
                <input type="hidden" name="id" id="roleId" value="${id}">

            <c:if test="${'1' ne type}">
                <div class="layui-form-item" style="margin-bottom: 15px;">
                    <label class="layui-form-label"><span class="mark">*</span>划分区域：</label>
                    <div class="layui-input-block">
                        <select id="ProvinceName" name="ProvinceName" xm-select="ProvinceName" xm-select-type="1" xm-select-height="30px" xm-select-show-count="6" xm-select-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 class="layui-input-block" style="margin-top: 10px">
                        <select id="city" name="city"  xm-select="CityId" xm-select-type="1" xm-select-height="30px" xm-select-show-count="6" xm-select-search>
                            <option value="">请选择市</option>
                            <c:forEach items="${citys}" var="city">
                                <option value="${city.columns.CityName}" title="${city.columns.CityId }">${city.columns.CityName}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item " style="margin-bottom: 15px;">
                    <label class="layui-form-label">划分产品：</label>
                    <div class="layui-input-block">
                        <select id="project" name="project"  xm-select="selectId" xm-select-type="1" xm-select-height="40px" xm-select-show-count="6" xm-select-search>
                            <option value=""></option>
                            <c:forEach items="${projectList}" var="fac">
                                <option value="${fac.columns.id}" title="${fac.columns.name}">${fac.columns.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item " style="margin-bottom: 15px;">
                    <label class="layui-form-label">划分代理商：</label>
                    <div class="layui-input-block">
                        <select id="traderId" name="traderId"  xm-select="traderId" xm-select-type="1" xm-select-height="40px" xm-select-show-count="6" xm-select-search>
                            <option value=""></option>
                            <c:forEach items="${listtrader}" var="tra">
                                <option value="${tra.columns.id}" >${tra.columns.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
            </c:if>

            <c:if test="${'1' eq type}">
                <div class="layui-form-item">
                    <label class="layui-form-label">数据权限：</label>
                    <div class="layui-input-block">
                        <input type="radio" name="dataAuthority"  title="仅看自己数据"
                               value="1" <c:if test="${'1' eq dataAuthority}">checked</c:if> />

                        <input type="radio" name="dataAuthority"  title="看所有数据"
                               value="2"  <c:if test="${'2' eq dataAuthority}">checked</c:if> />
                    </div>
                </div>
            </c:if>

        </div>
    </div>
    <div class="operate-footer">
        <c:if test="${'1' ne type}">
            <button class="layui-btn" lay-submit lay-filter="component-form-element">保存</button>
        </c:if>
        <c:if test="${'1' eq type}">
            <button class="layui-btn" lay-submit lay-filter="component-form-element2">保存</button>
        </c:if>
        <button type="button" class="layui-btn layui-btn-primary" onclick="cancel()">取消</button>
    </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">
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'jquery', 'layer', 'laydate', 'formSelects'], function(){
        var $ = layui.$
            ,form = layui.form
            ,formSelects = layui.formSelects
            ,index = parent.layer.getFrameIndex(window.name); //获取窗口索引;

        var laydate = layui.laydate;

        $(".sf-ly-date").each(function(){
            laydate.render({
                elem: this,
                trigger: 'click'
            });
        });


        //监听下拉框的关闭
        formSelects.closed('ProvinceName', function(id){
            console.log('合上了');
            var province =  formSelects.value('ProvinceName', 'nameStr');
            console.log(province)
            provinceOrder(province)

            TraderByprovince(province);
            ProjectByprovince(province)
        });


        var province = "${rds.columns.provices}";
        console.log(province)
        formSelects.value('ProvinceName', province.split(","), true);
        var city = "${rds.columns.city}";
        formSelects.value('CityId', city.split(","), true);

        var pro = "${rds.columns.project_number}";
        formSelects.value('selectId', pro.split(","), true);

        var tra = "${rds.columns.trader_id}";
        formSelects.value('traderId', tra.split(","), true);

        form.on('checkbox(roleId)', function(data){
            var valu = data.value;
            if(valu =='1'){
               if(data.elem.checked){
                $(".orderprovince").removeClass("layui-hide");
                $(".orderisMany").removeClass("layui-hide");
               }else{
                $(".orderprovince").addClass("layui-hide");
                $(".orderCity").addClass("layui-hide");
                $(".orderisMany").addClass("layui-hide");
                //清除选中
                   $("#province").val('');
                   formSelects.render('selectId');
               }
            }
        });


        form.on('submit(component-form-element)', function(data){

            var postData = data.field;
            var  province ="";
            var  city ="";
            province =  formSelects.value('ProvinceName', 'nameStr');
            city =  formSelects.value('CityId', 'nameStr');
            postData.province = province;
            postData.city = city;
           var  traderId =  formSelects.value('traderId', 'valStr');
            postData.traderIds = traderId;
            var valid = true;

            if(!valid){
                return false;
            }


            $.post('${ctx}/member/saveRights', postData, function(result){
                if("200" == result.code){
                    layer.msg("保存成功", {icon:1}, function(){
                        parent.location.reload();
                        parent.layer.close(index);
                    });
                }else{

                        layer.msg("保存失败，请刷新重试!", {icon:2});
                }
            });
            return false;
        });

        form.on('submit(component-form-element2)', function(data){
            var postData = data.field;
            var dataAuthority=$('input:radio[name="dataAuthority"]:checked').val(); //数据权限
            postData.dataAuthority=dataAuthority;
            $.post('${ctx}/traderEmploye/saveTraderRights', postData, function(result){
                console.log(result);
                if("200" == result.code){
                    layer.msg("保存成功", {icon:1}, function(){
                       cancel();
                    });
                }else{

                    layer.msg("保存失败，请刷新重试!", {icon:2});
                }
            });
            return false;
        });


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

        }


        function TraderByprovince(province){
            $("#traderId").empty();
            console.log(province)

            $.ajax({
                type:"POST",
                url:"${ctx}/trader/findTraderListByProvinces",
                data:{
                    province:province
                },
                success:function(result){
                    console.log(result)
                    if(result =="205"){
                        layer.msg("暂无数据!")
                        return
                    }
                    var html =" <option value=''>请选择代理商</option>";
                    for(var i=0;i<result.length;i++){
                        var trader = result[i];
                        html =html+ '<option value="'+trader.columns.id+'" title="'+trader.columns.number+'">'+trader.columns.name+'</option>';
                    }
                    $("#traderId").append(html);
                    $(".xm-select-dl").css("height", "210px");
                    formSelects.render('traderId');
                }
            });
        }

        function ProjectByprovince(province){
            $("#project").empty();
            console.log(province)

            $.ajax({
                type:"POST",
                url:"${ctx}/trader/findProjectListByProvince",
                data:{
                    province:province
                },
                success:function(result){
                    console.log(result)
                    if(result =="205"){
                        layer.msg("暂无数据!")
                        return
                    }
                    var html =" <option value=''>请选择产品</option>";
                    for(var i=0;i<result.length;i++){
                        var project = result[i];
                        html =html+ '<option value="'+project.columns.id+'" title="'+project.columns.number+'">'+project.columns.name+'</option>';
                    }
                    $("#project").append(html);
                    $(".xm-select-dl").css("height", "210px");
                    formSelects.render('selectId');
                }
            });

        }

    });
    function isBlank(val) {
        if (val == null || val == '' || val == undefined) {
            return true;
        }
        return false;
    }
    // 关闭弹框
    function cancel() {
        var index = parent.layer.getFrameIndex(window.name);//先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
    }
</script>
</body>
</html>