<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <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" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/style/admin.css" media="all">
    <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;padding-bottom: 50px;}
        .layui-form-select dl{
            max-height:200px;
            width: 80%;
        }
        .border-s{border: 1px #DDD dashed; padding: 6px 0; width: 95%; margin: 0 auto; border-radius: 10px;margin-bottom: 10px}
        .xm-select-parent .xm-select {
            min-height: 32px;
        }
        .layui-btn.black-cloth{display: block}

        .remoDiv{
            display: none;
        }
        .layui-table tr{
            text-align: center;
        }
    </style>
</head>
<body>

<div class="layui-form">
    <div class="layui-card mt-10">
        <input name="id" value="${apply.columns.id}" hidden>
        <input name="type" value="${type}" hidden>

        <div id="anyDiv">
            <span style="margin-left: 30px">功能说明：代理商结算款账户方案设置</span>
            <c:if test="${empty items}">
                <div class="layui-row border-s">
                    <div class="layui-col-xs10">
                        <div class="layui-col-xs12 mb-15 pr-30">
                            <div class="layui-inline layui-col-xs12">
                                <label class="layui-form-label" style="width: 150px"><i class="red">*</i>安装验收后结算比例：</label>
                                <div class="layui-col-xs8">
                                   <div class="layui-inline">
                                       <input type="text" class="layui-input"  name="amount" lay-verify="required" value="" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                                       <span class="pos-a h-32 lh-32 layui-span-unit" >%</span>
                                   </div>
                                </div>

                            </div>
                        </div>
                        <div class="layui-col-xs12 mb-15 pr-30 diDiv">
                            <div class="layui-inline layui-col-xs6 range">
                                <label class="layui-form-label w-130"><i class="red">*</i>适用范围：</label>
                                <div class="layui-input-block">
                                    <select name="rangeTap" lay-filter="rangeTap" lay-verify="required">
                                        <option value="">请选择</option>
                                        <option value="1">所有代理商</option>
                                        <option value="2">指定代理商</option>
                                    </select>
                                </div>
                            </div>

                            <div class="layui-inline layui-col-xs6 remoDiv disTrade">
                                <label class="layui-form-label w-130"><i class="red">*</i>代理商名称：</label>
                                <div class="layui-col-xs8 mt-5">
                                    <a class="layui-table-opt-link" href="javascript:;" onclick="choiceTrader(this)">请选择</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs2 btns" style=" height: 100px; text-align: center; border-left: 1px dashed #DDD;">
                        <input type="button" class="layui-btn mt-30 addDiv" value="新增" onclick="addDiv()"><br/>
                    </div>
                    <input hidden name="traderId">
                </div>
            </c:if>

            <c:forEach var="item" items="${items}" varStatus="vs">
                <div class="layui-row border-s">
                    <div class="layui-col-xs10">
                        <div class="layui-col-xs12 mb-15 pr-30">
                            <div class="layui-inline layui-col-xs12">
                                <label class="layui-form-label" style="width: 150px"><i class="red">*</i>安装验收后结算比例：</label>
                                <div class="layui-col-xs8">
                                   <div class="layui-inline">
                                       <input type="text" class="layui-input"  name="amount" lay-verify="required" value="${item.columns.amount}" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                                       <span class="pos-a h-32 lh-32 layui-span-unit" >%</span>
                                   </div>
                                </div>

                            </div>
                        </div>
                        <div class="layui-col-xs12 mb-15 pr-30 diDiv">
                            <div class="layui-inline layui-col-xs6 range">
                                <label class="layui-form-label w-130"><i class="red">*</i>适用范围：</label>
                                <div class="layui-input-block">
                                    <select name="rangeTap" lay-filter="rangeTap">
                                        <option value="">请选择</option>

                                        <option value="1" <c:if test="${item.columns.range_tap == '1'}">selected</c:if>>所有代理商</option>
                                        <option value="2" <c:if test="${item.columns.range_tap == '2'}">selected</c:if>>指定代理商</option>
                                    </select>
                                </div>
                            </div>

                            <div class="layui-inline layui-col-xs6 disTrade <c:if test="${item.columns.range_tap == '1'}">remoDiv</c:if>">
                                <label class="layui-form-label w-130"><i class="red">*</i>代理商名称：</label>
                                <div class="layui-col-xs8 mt-5">
                                    <a class="layui-table-opt-link" href="javascript:;" onclick="choiceTrader(this)"><c:if test="${empty item.columns.trader_id}">请选择</c:if><c:if test="${not empty item.columns.trader_id}">重新选择</c:if></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs2 btns" style=" height: 100px; text-align: center; border-left: 1px dashed #DDD;">
                        <c:if test="${items.size() == vs.count}">
                            <input type="button" class="layui-btn mt-30 addDiv" value="新增" onclick="addDiv()"><br/>
                        </c:if>
                        <c:if test="${vs.count>1 || items.size()>1}">
                            <input type="button" class="layui-btn mt-20 deleteDiv" value="删除" onclick="deleteDiv(this)">
                        </c:if>
                    </div>
                    <input hidden name="traderId" value="${item.columns.trader_id}">
                </div>

            </c:forEach>

        </div>

        <div class="layui-col-xs12 mb-20 pr-30 mt-20">
        </div>
    </div>
    <div class="operate-footer" >
        <input type="button" id="confirm" class="layui-btn " value="保存">
        <input type="button"   value="取消" class="layui-btn layui-btn-primary " onclick="closeDiv();" >
    </div>
</div>

<div  class="layui-card mb-0 layui-hide">
    <select name="traderSele">
        <option value="">请选择</option>
        <c:forEach items="${traders}" var="trader">
            <option id="${trader.columns.id}" data-title="${trader.columns.actual_contacts}" data-type="${trader.columns.telephone}" data-value="${trader.columns.name}"></option>
        </c:forEach>
    </select>

</div>

<div class="layui-card mb-0 layui-hide" id="choiceTrader">
    <div class="layui-card-body">
        <div class="layui-form mt-10">
            <div class="layui-col-xs10 mb-15 pr-30">
                <select name="traderS" xm-select="traderS" xm-select-type="1" xm-select-height="25px" xm-select-show-count="6" xm-select-search>
                    <option value="">请输入代理商名称进行查询</option>
                    <c:forEach items="${traders}" var="trader">
                        <option value="${trader.columns.id}">${trader.columns.name}</option>
                    </c:forEach>
                </select>
            </div>
            <div class="layui-col-xs2 mb-15 pr-30">
                <input type="button"  id="cond" class="layui-btn" value="确定">
            </div>

            <table class="layui-table">
                <colgroup>
                    <col width="8%">
                    <col width="10%">
                    <col width="10%">
                    <col width="10%">
                    <col width="10%">
                </colgroup>
                <thead>
                <tr>
                    <th>序号</th>
                    <th>代理商名称</th>
                    <th>实控人</th>
                    <th>联系电话</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="trades">
                </tbody>
            </table>

            <div class="layui-form-item" style="text-align: center; margin-top: 30px" >
                <input type="button"  value="确定" class="layui-btn confirmTrader">
                <input type="button"   value="取消" class="layui-btn layui-btn-primary " onclick="closeThisDiv();" >
            </div>
        </div>
    </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">
    //初始数据
    var form;
    var formSelects;
    var cou=0;
    var addIndex = '';
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'tableExt', 'jquery', 'layer','laypage','laydate','form','formSelects'], function(){
        $ = layui.jquery;
        form = layui.form;
        formSelects = layui.formSelects;

        if(${not empty apply.columns.id}){
            var objs = eval(${itemJson});
            $("#anyDiv .border-s").each(function(index){
                var obj=objs[index];
                var project_ids=obj.value;
                var fie=$(this).attr("data-type");
                formSelects.value(fie,project_ids.split(","),true);
            })
        }

        form.on('select(rangeTap)', function(data){
            var rangeTap = data.value;
            if("2"==rangeTap){
                $(data.elem).parents(".range").next(".disTrade").removeClass("remoDiv")
            }
            if("1"==rangeTap){
                $(data.elem).parents(".range").next(".disTrade").addClass("remoDiv")
            }
        });

        $("#cond").click(function (){
            var traderId=formSelects.value('traderS','valStr');
            if (isBlank(traderId)) {
                layer.msg("请选择代理代理商!",{time:1000});
                return false;
            }
            var traderIds=traderId.split(",");
            var trCount=$("#trades tr").length;
            var htm='';
            for(var i=0;i<traderIds.length;i++){
                var id=traderIds[i];
                var flag = false;
                $("#trades tr").each(function(index){
                    var exsitId=$(this).find("td:first").attr("data-value");
                    if (exsitId === id) {
                        flag = true;
                    }
                });
                if (flag) {
                    continue;
                }
                trCount++;
                var obj=$('#'+id);
                var contact=obj.attr("data-title");
                var telephone=obj.attr("data-type");
                var name=obj.attr("data-value");
                htm+='<tr><td data-value="'+id+'">'+trCount+'</td><td>'+name+'</td><td>'+contact+'</td><td>'+telephone+'</td><td><a class="layui-table-opt-link" href="javascript:" onclick="deleteTr(this)">删除</a></td></tr>';
            }
            $("#trades").append(htm);
            formSelects.render('traderS');
        })

        $(".confirmTrader").click(function(){
            if($("#trades tr").length==0){
                layer.msg("请选择代理代理商!",{time:3000});
                return false;
            }
            var traderId='';
            $("#trades tr").each(function(index){
                var id=$(this).find("td:first").attr("data-value");
                traderId+=','+id;
            })
            $(".activityDiv input[name='traderId']").val(traderId.substring("1"));
            $(".activityDiv .disTrade .layui-table-opt-link ").text("重新选择");
            $("#trades tr").remove();
            $("#choiceTrader").addClass("layui-hide")
            layer.close(addIndex);
        })

        $("#confirm").click(function (){
            $("#confirm").attr("disabled","true");
            var item=[];
            var fg=false;
            var con=false;
            $("#anyDiv .border-s").each(function(index){
                var amount=$(this).find("input[name='amount']").val();
                if (amount <= 0 || amount >= 100) {
                    layer.msg("第 "+(index+1)+" 行，结算比例只能在0到100之间!", {time: 3000});
                    con = true;
                    return;
                }
                var rangeTap=$(this).find("select[name='rangeTap'] option:selected").val();
                var traderIds=$(this).find("input[name='traderId']").val();
                if("2"==rangeTap && isBlank(traderIds)){
                    layer.msg("第 "+(index+1)+" 行，请选择指定的代理商!",{time:3000});
                    con=true;
                    return;
                }
                if("1"==rangeTap && fg){
                    layer.msg("已指定过所有代理商，不能重复指定!",{time:3000});
                    con=true;
                    return;
                }
                fg=true;
                var obj={
                    amount:amount,
                    rangeTap:rangeTap,
                    traderId:traderIds
                }
                item.push(obj)
            })
            if(con){
                $("#confirm").removeAttr("disabled");
                return false;
            }
            var type=$("input[name='type']").val();
            var data={
                items:item,
                type:type
            };
            $.ajax({
                url:'${ctx}/accountSet/saveAccountSet',
                method:'post',
                contentType : "application/json;charsetset=UTF-8",
                data:JSON.stringify(data),
                success:function(res){
                    if(res.code=="200"){
                        layer.msg("保存成功",{time:2000},function(){
                            parent.layer.closeAll();
                            parent.window.location.reload();
                        });
                    } else{
                        layer.msg(res.errMsg,{time:3000});
                        $("#confirm").removeAttr("disabled");
                    }
                },
                error:function (data) {
                }
            }) ;
        })

    })

    function addDiv(){
        cou++;
        var htm='<div class="layui-row border-s">';

        htm+=`<div class="layui-col-xs10">
                    <div class="layui-col-xs12 mb-15 pr-30">

                            <div class="layui-inline layui-col-xs12">
                                <label class="layui-form-label" style="width: 150px"><i class="red">*</i>安装验收后结算比例：</label>
                                <div class="layui-col-xs8">
                                   <div class="layui-inline">
                                       <input type="text" class="layui-input"  name="amount" lay-verify="required" oninput="value=value.replace(/^\\D*(\\d*(?:\\.\\d{0,2})?).*$/g, '$1')">
                                       <span class="pos-a h-32 lh-32 layui-span-unit" >%</span>
                                   </div>
                                </div>

                            </div>
                    </div>
                    <div class="layui-col-xs12 mb-15 pr-30 diDiv">
                            <div class="layui-inline layui-col-xs6 range">
                                <label class="layui-form-label w-130"><i class="red">*</i>适用范围：</label>
                                <div class="layui-input-block">
                                    <select name="rangeTap" lay-filter="rangeTap">
                                        <option value="">请选择</option>
                                        <option value="1">所有代理商</option>
                                        <option value="2">指定代理商</option>
                                    </select>
                                </div>
                            </div>

                            <div class="layui-inline layui-col-xs6 remoDiv disTrade">
                                <label class="layui-form-label w-130"><i class="red">*</i>代理商名称：</label>
                                <div class="layui-col-xs8 mt-5">
                                    <a class="layui-table-opt-link" href="javascript:;" onclick="choiceTrader(this)">请选择</a>
                                </div>
                            </div>
                    </div> `

        htm+=  `</div>
                <div class="layui-col-xs2 btns" style=" height: 100px; text-align: center; border-left: 1px dashed #DDD;">
                    <input type="button" class="layui-btn mt-30 addDiv" value="新增" onclick="addDiv()"><br/>
                    <input type="button" class="layui-btn mt-20 deleteDiv" value="删除" onclick="deleteDiv(this)">
                </div>
                      <input hidden name="traderId">
            </div>`;

        $(".addDiv").remove();
        if($("#anyDiv .border-s:first").find(".deleteDiv").length==0){
            $("#anyDiv .border-s:first").find(".btns").append('<input type="button" class="layui-btn mt-20 deleteDiv" value="删除" onclick="deleteDiv(this)">')
        }
        $("#anyDiv").append(htm);
        form.render('select');
        form.render('formSelects')
    }

    function  deleteDiv(that){
        $(that).parents(".border-s").remove();
        $(".addDiv").remove();
        $("#anyDiv .border-s:last").find(".btns").html('<input type="button" class="layui-btn mt-30 addDiv" value="新增" onclick="addDiv()"><br/><input type="button" class="layui-btn mt-20 deleteDiv" value="删除" onclick="deleteDiv(this)">')
        if($("#anyDiv .border-s").length==1){
            $(".deleteDiv").remove();
        }
    }

    function  closeDiv() {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index);
    }

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

    function closeThisDiv(){
        $("#trades tr").remove();
        $("#choiceTrader").addClass("layui-hide")
        layer.close(addIndex);
    }

    function deleteTr(that){
        $(that).parent().parent().remove();
        $("#trades tr").each(function(index){
            $(this).find("td:first").text(index+1);
        })
    }


    function choiceTrader(that){
        $("#choiceTrader").removeClass("layui-hide");
        $(".border-s").removeClass("activityDiv");
        $(that).parents(".border-s").addClass("activityDiv");
        var traderIds=$(that).parents(".border-s").find('input[name="traderId"]').val();
        var tra=traderIds.split(",");
        var htm="";
        for(var i=0;i<tra.length;i++){
            var id=tra[i];
            if(!isBlank(id)){
                var obj=$('#'+id);
                var contact=obj.attr("data-title");
                var telephone=obj.attr("data-type");
                var name=obj.attr("data-value");
                htm+='<tr><td data-value="'+id+'">'+(i+1)+'</td><td>'+name+'</td><td>'+contact+'</td><td>'+telephone+'</td><td><a class="layui-table-opt-link" href="javascript:" onclick="deleteTr(this)">删除</a></td></tr>';
            }
        }
        $("#trades").append(htm);
        addIndex=layer.open({
            content: $("#choiceTrader")
            ,type: 1
            ,area:["1000px","500px"]
            ,title:"代理商选择"
            ,cancel: function(){
                $("#choiceTrader").addClass("layui-hide")
            }
        });
    }


</script>
</body>
</html>




