<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>区域授权</title>
    <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" type="text/css" href="${ctxPlugin}/static/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="${ctxPlugin}/lib/font/iconfont.css" />
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/style/formSelects-v4.css" media="all">
    <style>
        html{
            background-color: #fff;
        }

        @font-face {
            font-family: 'iconfont';
            src: url('${ctxPlugin}/lib/font/iconfont.eot');
            src: url('${ctxPlugin}/lib/font/iconfont.eot?#iefix') format('embedded-opentype'),
            url('${ctxPlugin}/lib/font/iconfont.woff2') format('woff2'),
            url('${ctxPlugin}/lib/font/iconfont.woff') format('woff'),
            url('${ctxPlugin}/lib/font/iconfont.ttf') format('truetype'),
            url('${ctxPlugin}/lib/font/iconfont.svg#iconfont') format('svg');
        }

        .layui-tab-title li {
            background-color:#f2f2f2;
            line-height: 40px;
        }
        .layui-tab-title .layui-this {
            background-color: #fff;
        }
        .layui-table td, .layui-table th {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="layui-form mb-0 pr-15" lay-filter="layuiadmin-form-admin" id="layuiadmin-form-admin">
    <div class="layui-card">
        <div id="textDiv" class="layui-card-body">
            <div class="layui-col-xs6 mb-15 mt-20">
                <label class="layui-form-label w-130">代理商名称：</label>
                <div class="layui-input-block">
                    <input type="text" name="name" class="layui-input layui-bg-gray" value="${trader.name}" disabled>
                </div>
            </div>
            <div class="layui-col-xs12 mb-15 mt-20">
                <div>
                    <div class="" style="position: relative">
                        <ul class="layui-tab-title">
<%--                            <li class="layui-this">授权产品</li>--%>
                            <li>授权区域</li>
                        </ul>
                        <a onclick="addArea()" class="tableTitle" style="color: #0e8ee7;position: absolute;top: 10px;right: 10px">+添加区域</a>
<%--                        <a onclick="addProject()" class="tableTitle" style="color: #0e8ee7;position: absolute;top: 10px;right: 10px">+添加产品</a>--%>

                    </div>
                    <div class="layui-tab-content">
<%--                        <div class="layui-tab-item layui-show">--%>
<%--                            <table class="layui-table" style="margin-bottom: 60px">--%>
<%--                                <thead>--%>
<%--                                <tr>--%>
<%--                                    <th style="width: 25% !important">产品编号</th>--%>
<%--                                    <th style="width: 25% !important">产品名称</th>--%>
<%--                                    <th style="width: 17% !important">产品线</th>--%>
<%--                                    <th style="width: 17% !important">备案类型</th>--%>
<%--                                    <th style="width: 8% !important">状态</th>--%>
<%--                                    <th style="width: 8% !important">操作</th>--%>
<%--                                </tr>--%>
<%--                                </thead>--%>
<%--                                <tbody id="productSetListBody">--%>
<%--                                <c:forEach items="${projectList}" var="pl">--%>
<%--                                    <tr rel="${pl.columns.id}">--%>
<%--                                        <td>${pl.columns.code}</td>--%>
<%--                                        <td>${pl.columns.name}</td>--%>
<%--                                        <td>${pl.columns.productLineName}</td>--%>
<%--                                        <td>${pl.columns.filingType}</td>--%>
<%--                                        <td>${pl.columns.status}</td>--%>
<%--                                        <td><span onclick="delOne(this)" style="color: #0e8ee7">删除</span></td>--%>
<%--                                    </tr>--%>
<%--                                </c:forEach>--%>
<%--                                </tbody>--%>
<%--                            </table>--%>
<%--                        </div>--%>
                        <div class="layui-tab-item layui-show">
                            <table class="layui-table" style="margin-bottom: 60px">
                                <thead>
                                <tr>
                                    <th>省</th>
                                    <th>市</th>
                                    <th>区/县</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="areaSetListBody">
                                <c:forEach items="${areaList}" var="al">
                                    <tr>
                                        <td>${al.province}</td>
                                        <td>${al.city}</td>
                                        <td>${al.area}</td>
                                        <td><span onclick="delOne(this)" style="color: #0e8ee7">删除</span></td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <%--<div class="layui-col-xs12 mb-10">
            <label class="layui-form-label"><i class="mark">*</i>授权项目：</label>
            <div class="layui-input-block ">
                <select id="projectId" name="projectId"  xm-select="projectId" xm-select-type="1" xm-select-height="30px" xm-select-show-count="6" xm-select-search>
                    <option value=""></option>
                    <c:forEach items="${project}" var="ins">
                        <option value="${ins.columns.id}" >${ins.columns.name}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <div class="layui-col-xs12 mb-10">
            <label class="layui-form-label"><i class="mark">*</i>所属分公司：</label>
            <div class="layui-input-block ">
                <select id="regionId" name="regionId"  lay-filter="regionId" lay-search>
                    <option value=""></option>
                    <c:forEach items="${depList}" var="dep">
                        <option value="${dep.columns.id}"  title="${dep.columns.name }" <c:if test="${trader.regionId eq dep.columns.id}">selected </c:if>>${dep.columns.name}</option>
                    </c:forEach>
                </select>
            </div>
        </div>--%>
        <input type="hidden" name="regionName" id="regionName">
    </div>

    <div class="layui-form-item text-c operate-footer" >
        <button class="layui-btn " lay-submit lay-filter="component-form-element" <%--onclick="addRole()"--%>>保存</button>
        <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 src="${ctxPlugin}/lib/font/iconfont.js"></script>
<script>
    var formSelects;
    var $;
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['form','jquery','formSelects'], function () {
        $ = layui.$,
        form = layui.form,
        formSelects = layui.formSelects;

        $(".layui-tab-title li").click(function (data) {
            $('.layui-tab-item').eq($(this).index()).addClass('layui-show').siblings('.layui-tab-item').removeClass('layui-show');
            $(".layui-tab-title li").removeClass("layui-this");
            $(this).addClass("layui-this");
            $(".tableTitle").eq($(this).index()).removeClass("layui-hide").siblings('.tableTitle').addClass('layui-hide');
        })

       /* form.on('select(regionId)', function(data){
            var regionName = $(data.elem).find("option:selected").attr("title");
            $("#regionName").val(regionName)
        });*/

       form.on('submit(component-form-element)',function(data){
           var field = data.field; //获取提交的字段
           var url = '${ctx}/trader/addProjectEmpower';
           let partnerIds = [];
           let projectIds = [];
           $("#productSetListBody").find("tr").each(function (index) {
               projectIds.push($(this).attr("rel"));
           })
           let areaList = [];
           $("#areaSetListBody").find("tr").each(function (index) {
               let province = $(this).find("td").eq(0).text();
               let city = $(this).find("td").eq(1).text();
               let area = $(this).find("td").eq(2).text();
               let addAreaVo = {
                   province: province,
                   city: city,
                   area: area
               };
               areaList.push(addAreaVo);
           })
           // if (projectIds.length <= 0) {
           //     layer.msg("请选择项目信息！", {icon: 5, anim: 6});
           //     return
           // }
           /*if (isBlank(field.regionId)) {
               layer.msg("请选择所属分公司！", {icon: 5, anim: 6});
               return
           }*/

           $.ajax({
               url: url,
               type: 'post',
               data: JSON.stringify({
                   traderId: '${id}',
                   projectIds: projectIds,
                   areaList: areaList,
                   partnerIds:partnerIds
               }),
               dataType: 'JSON',
               contentType: 'application/json',
               success: function(data) {
                   if(data.code === "200"){
                       var index = parent.layer.getFrameIndex(window.name);
                       layer.msg('操作成功！', {icon:1,time:1000},function(){
                           parent.layer.close(index);
                           parent.location.reload(); //刷新父页面
                       })
                   }else if(data.code ==="501"){
                       layer.msg(data.msg,{icon:5,anim:6});
                   }else{
                       layer.msg("添加失败！",{icon:5,anim:6});
                   }
               },
               complete:function(){

               }
           });
       })
    });

    function addProject(){
        layer.open({
            type: 2,
            title: '添加产品',
            content: '${ctx}/trader/toAddProjectPage',
            area: ['60%','50%'],
            success : function(layero) {
                layero.find('.layui-layer-btn').css('text-align', 'center');
                layero.find('.layui-layer-btn').find(".layui-layer-btn0").css("background-color","#009688");
            }
        });
    }

    function addProjectHtml(id) {
        let flag = false;
        $("#productSetListBody").find("tr").each(function (index){
            let oldId = $(this).attr("rel");
            if (oldId == id) {
                layer.msg('产品已存在');
                flag = true;
            }
        })
        if (flag) {
            return;
        }
        // 查询产品信息
        $.ajax({
            type: "get",
            url: "${ctx}/sysSettings/projectInfoSetting/getProjectById",
            data: {
                id: id
            },
            success: function (result) {
                if (result.code == "200") {
                    let data = result.data;
                    let html = '<tr rel="' + data.columns.id + '">';
                    html += '<td>' + data.columns.code + '</td>';
                    html += '<td>' + data.columns.name + '</td>';
                    html += '<td>' + data.columns.productLineName + '</td>';
                    html += '<td>' + data.columns.filingType + '</td>';
                    html += '<td>' + data.columns.status + '</td>';
                    html += '<td><span onclick="delOne(this)" style="color: #0e8ee7">删除</span></td>';
                    html += '</tr>';
                    $("#productSetListBody").append(html);
                } else {
                    layer.msg(result.errMsg);
                }
            }
        });
    }

    function delOne(that) {
        $(that).parent().parent().remove();
    }

    function addArea(){
        layer.open({
            type: 2,
            title: '添加区域',
            content: '${ctx}/trader/toAddAreaPage',
            area: ['60%','100%'],
            success : function(layero) {
                layero.find('.layui-layer-btn').css('text-align', 'center');
                layero.find('.layui-layer-btn').find(".layui-layer-btn0").css("background-color","#009688");
            }
        });
    }

    function addAreaHtml(province, city, area) {
        let flag = false;
        $("#areaSetListBody").find("tr").each(function (index){
            let pro = $(this).find("td").eq(0).text();
            let cit = $(this).find("td").eq(1).text();
            let are = $(this).find("td").eq(2).text();
            if (pro === province) {
                if (isBlank(city)) {
                    layer.msg('区域已存在');
                    flag = true;
                    return false;
                } else if (cit === city) {
                    if (isBlank(area)) {
                        layer.msg('区域已存在');
                        flag = true;
                        return false;
                    } else {
                        let split = area.split(",");
                        for (let i = 0; i < split.length; i++) {
                            if (are === split[i]) {
                                layer.msg('区域已存在');
                                flag = true;
                                return false;
                            }
                        }
                    }
                    if (isBlank(are)){
                        layer.msg('区域已存在');
                        flag = true;
                        return false;
                    }
                }
                if (isBlank(cit)){
                    layer.msg('区域已存在');
                    flag = true;
                    return false;
                }else if (cit === city) {
                    if (isBlank(area)) {
                        layer.msg('区域已存在');
                        flag = true;
                        return false;
                    } else {
                        let split = area.split(",");
                        for (let i = 0; i < split.length; i++) {
                            if (are === split[i]) {
                                layer.msg('区域已存在');
                                flag = true;
                                return false;
                            }
                        }
                    }
                }

            }
        })
        if (flag) {
            return;
        }
        let html = '';
        if (isBlank(area)) {
            html += '<tr>';
            html += '<td>' + province + '</td>';
            html += '<td>' + city + '</td>';
            html += '<td>' + area + '</td>';
            html += '<td><span onclick="delOne(this)" style="color: #0e8ee7">删除</span></td>';
            html += '</tr>';
        } else {
            let split = area.split(",");
            for (let i = 0; i < split.length; i++) {
                html += '<tr>';
                html += '<td>' + province + '</td>';
                html += '<td>' + city + '</td>';
                html += '<td>' + split[i] + '</td>';
                html += '<td><span onclick="delOne(this)" style="color: #0e8ee7">删除</span></td>';
                html += '</tr>';
            }
        }

        $("#areaSetListBody").append(html);
    }

    function isBlank(val) {
        if (val == null || val == '' || val == undefined) {
            return true;
        }
        return false;
    }

    function cancel(){
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }
</script>
</body>
</html>
