<%@ 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: 20px 0; width: 95%; margin: 0 auto; border-radius: 10px;margin-bottom: 10px}
        .xm-select-parent .xm-select {
            min-height: 32px;
        }
        .layui-tab-title li {
            background-color:#f2f2f2;
            line-height: 40px;
        }
        .layui-tab-title .layui-this {
            background-color: #fff;
        }
        .tab-box{position: relative;}
        .tab-box button{position: absolute; right: 10px; top: 10px; background: #0a6597; color: #fff; border: none; padding: 3px 10px }
    </style>
</head>
<body>

<div class="layui-form">
    <div class="layui-card mt-10">
        <input name="id" value="${apply.columns.id}" hidden>
        <div id="anyDiv">
            <c:if test="${empty items}">
            <div class="layui-row border-s" data-type="projectIds">
                <div class="layui-col-xs12">
                    <div class="layui-col-xs12 mb-10 pr-30">
                        <div class="layui-inline layui-col-xs6">
                            <label class="layui-form-label w-130"><i class="red">*</i>方案名称：</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input"  name="name" lay-verify="required">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-xs6">
                            <label class="layui-form-label w-130"><i class="red">*</i>生效时间：</label>
                            <div class="layui-input-block">
                                <div class="layui-col-xs5">
                                    <input type="text" name="createTime" id="createTime" class="layui-input"  lay-verify="required"  placeholder="生效日期">
                                </div>
                                <div class="layui-col-xs2 text-c lh-30">
                                    —
                                </div>
                                <div class="layui-col-xs5">
                                    <input type="text" name="endTime" id="endTime" class="layui-input"  lay-verify="required"  placeholder="失效日期">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 mb-10 pr-30">
                        <div class="layui-inline layui-col-xs6">
                            <label class="layui-form-label w-130"><i class="red">*</i>结算方式：</label>
                            <div class="layui-input-block ">
                                <select name="type"  lay-verify="required">
                                    <option value="">请选择</option>
                                    <option value="1" >按组件单瓦</option>
                                    <option value="2" >按组件单块</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline layui-col-xs6">
                            <label class="layui-form-label w-130"><i class="red">*</i>结算价：</label>
                            <div class="layui-input-block w-200" >
                                <input type="text" class="layui-input" name="amount" lay-verify="required" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                            </div>
                        </div>
                    </div>

                </div>

            </div>
            </c:if>
<c:forEach var="item" items="${items}" varStatus="vs">
                <div class="layui-row border-s" data-type="projectIds">
                    <div class="layui-col-xs12">
                        <div class="layui-col-xs12 mb-10 pr-30">
                            <div class="layui-inline layui-col-xs6">
                                <label class="layui-form-label w-130"><i class="red">*</i>方案名称：</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input"  name="name" lay-verify="required" value="${item.columns.name}">
                                </div>
                            </div>
                            <div class="layui-inline layui-col-xs6">
                                <label class="layui-form-label w-130"><i class="red">*</i>生效时间：</label>
                                <div class="layui-input-block">
                                    <div class="layui-col-xs5">
                                        <input type="text" name="createTime" id="createTime" class="layui-input"  lay-verify="required"  placeholder="生效日期" value="<fmt:formatDate value="${item.columns.create_time}" pattern="yyyy-MM-dd"/>">
                                    </div>
                                    <div class="layui-col-xs2 text-c lh-30">
                                        —
                                    </div>
                                    <div class="layui-col-xs5">
                                        <input type="text" name="endTime" id="endTime" class="layui-input"  lay-verify="required"  placeholder="失效日期" value="<fmt:formatDate value="${item.columns.end_time}" pattern="yyyy-MM-dd"/>">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs12 mb-10 pr-30">
                            <div class="layui-inline layui-col-xs6">
                                <label class="layui-form-label w-130"><i class="red">*</i>结算方式：</label>
                                <div class="layui-input-block ">
                                    <select name="type"  lay-verify="required">
                                        <option value="">请选择</option>
                                        <option value="1" <c:if test="${item.columns.type eq 1}"> selected</c:if>>按组件单瓦</option>
                                        <option value="2" <c:if test="${item.columns.type eq 2}"> selected</c:if>>按组件单块</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline layui-col-xs6">
                                <label class="layui-form-label w-130"><i class="red">*</i>结算价：</label>
                                <div class="layui-input-block w-200" >
                                    <input type="text" class="layui-input" name="amount" lay-verify="required" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" value="${item.columns.amount}">
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
</c:forEach>
        </div>


        <div class="layui-col-xs12 mb-15 pr-30 mt-10">
            <div class="layui-tab">
                <div class="tab-box">
                    <ul class="layui-tab-title">
                        <li class="layui-this">
                            适用产品
                        </li>
                        <li>适用代理商</li>
                    </ul>
                    <button class="addProject ">添加产品</button>
                    <button class="addTrader hide">添加代理商</button>
                </div>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <table class="layui-table">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>产品编号</th>
                                <th>产品名称</th>
                                <th>产品线</th>
                                <th>备案类型</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="optionalProjectBody">
                            <c:forEach items="${projectsOld}" var="pro" varStatus="coe">
                                <tr  data-projectId="${pro.columns.id}">
                                    <td class="idx">${coe.count}</td>
                                    <td class="">${pro.columns.code}</td>
                                    <td class="">${pro.columns.name}</td>
                                    <td class="">${pro.columns.productLineName}</td>
                                    <td class="">${pro.columns.filing_type eq '1' ?'农户备案':'项目公司备案'}</td>
                                    <td class=""> <a class="layui-table-opt-link" onclick="deleteProjectOrTrader(this)">删除</a></td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </div>
                    <div class="layui-tab-item">
                        <table class="layui-table">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>代理商名称</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="traderListBody">
                            <c:forEach items="${traders}" var="tra" varStatus="coe">
                                <tr  data-traderId="${tra.columns.id}">
                                    <td class="idx">${coe.count}</td>
                                    <td class="">${tra.columns.name}</td>
                                    <td class=""><a class="layui-table-opt-link" onclick="deleteProjectOrTrader(this)">删除</a> </td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>


          <%--      <div class="layui-input-block">
                    <select name="projectIds" xm-select="projectIds" xm-select-search xm-select-type="1" xm-select-height="25px" xm-select-show-count="6" lay-verify="required">
                        <option value="">请选择</option>
                        <c:forEach items="${projects}" var="project">
                            <option value="${project.columns.id}" <c:if test="${fn:contains(item.columns.projectIds,project.columns.id)}">selected</c:if>>${project.columns.name}</option>
                        </c:forEach>
                    </select>
                </div>--%>

        </div>

    </div>
    <div class="operate-footer">
        <c:if test="${empty apply.columns.id}">
            <input type="button" lay-submit lay-filter="confirm" id="confirm" class="layui-btn " value="提交">
        </c:if>
        <c:if test="${not empty apply.columns.id}">
            <input type="button" lay-submit lay-filter="confirm" id="confirm" class="layui-btn " value="重新提交">
        </c:if>
        <input type="button"   value="取消" class="layui-btn layui-btn-primary " onclick="closeDiv();" >
    </div>
</div>




<script type="text/javascript" src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script type="text/javascript" src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/lib/formSelects-v4.js"></script>
<script type="text/javascript">
    //初始数据
    var form;
    var $;
    var formSelects;
    var cou=${itemCount};
    var laydate;
    var myreg=/^\d+(\.\d{1,2})?$/;
    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;
        laydate = layui.laydate;

        //开始日期
        var createTimeMin = laydate.render({
            elem: '#createTime'
            , type: 'date'
            , done: function (value, date) {
                //更新结束日期的最小日期
                createTimeMax.config.min = lay.extend({}, date, {
                    month: date.month - 1
                });
                //自动弹出结束日期的选择器
                createTimeMax.config.elem[0].focus();
            }
        });
        //结束日期
        var createTimeMax = laydate.render({
            elem: '#endTime'
            , type: 'date'
            , done: function (value, date) {
                //更新开始日期的最大日期
                createTimeMin.config.max = lay.extend({}, date, {
                    month: date.month - 1
                });
            }
        });

        $(".layui-tab-title li").click(function (data){
            console.log($(this).index())
            if($(this).index() ==1 ){
                $(".addProject").addClass("hide");
                $(".addTrader").removeClass("hide");
            }else{
                $(".addTrader").addClass("hide");
                $(".addProject").removeClass("hide");
            }

        })

        $("body").on("click",".addProject",function (){
            var ids = "";
            $("#optionalProjectBody tr").each(function(index) {
                var id = $(this).attr("data-projectId");
                if(isBlank(ids)){
                    ids = id;
                }else{
                    ids =id+","+ ids
                }
            })

            layer.open({
                type: 2,
                title: "添加产品",
                resize: false,
                area: ['90%', '80%'],
                content: '${ctx}/apply/standardPrice/projectOrTraderPage?type=1&ids='+ids
            });
        })

        $("body").on("click",".addTrader",function (){

            var ids = "";
            $("#traderListBody tr").each(function(index) {
                var id = $(this).attr("data-traderId");
                if(isBlank(ids)){
                    ids = id;
                }else{
                    ids =id+","+ ids
                }
            })
            layer.open({
                type: 2,
                title: "添加代理商",
                resize: false,
                area: ['90%', '80%'],
                content: '${ctx}/apply/standardPrice/projectOrTraderPage?type=2&ids='+ids
            });
        })


        form.on('submit(confirm)', function(data){
            console.log(JSON.stringify(data.field));
            $("#confirm").attr("disabled","true");
           // var remarks=$("#remarks").val();
            var item=[];
            var checkFlag = false;

                var name=$("input[name='name']").val();
                var type=$("select[name='type'] option:selected").val();
                var amount=$("input[name='amount']").val();

                var createTime=$("input[name='createTime']").val();
                var endTime=$("input[name='endTime']").val();

                if (!myreg.test(amount)) {
                    layer.msg("分包标准价格式不正确", {icon:2});
                    checkFlag = true;
                    return;
                }

                var projects;
                $("#optionalProjectBody tr").each(function(index) {
                    var id = $(this).attr("data-projectId");
                    if(isBlank(projects)){
                        projects = id;
                    }else{
                        projects =id+","+ projects
                    }
                })
                if(isBlank(projects)){
                    layer.msg("请选择适用产品", {icon:2});
                    checkFlag = true;
                    return;
                }
                var traderIds;
            $("#traderListBody tr").each(function(index) {
                var id = $(this).attr("data-traderId");
                if(isBlank(traderIds)){
                    traderIds = id;
                }else{
                    traderIds =id+","+ traderIds
                }
            })
                var obj={
                    name:name,
                    type:type,
                    amount:amount,
                    createTime:createTime,
                    endTime:endTime,
                    projectIds:projects,
                    traderIds:traderIds
                }
                item.push(obj)

            if(checkFlag){
                console.log("ddxd")
                return;
            }
            var id=$("input[name='id']").val();
            var data1={
                items:item,
                id:id
            };
            $.ajax({
                url:'${ctx}/apply/standardPrice/saveStandardPriceApply',
                method:'post',
                contentType : "application/json;charsetset=UTF-8",
                data:JSON.stringify(data1),
                success:function(res){
                    if(res.code=="200"){
                        parent.layer.msg("保存成功",{time:2000});
                        closeDiv();
                        parent.table.reload('test');
                    } else{
                        layer.msg(res.errMsg,{time:2000});
                        $("#confirm").removeAttr("disabled");
                    }
                },
                error:function (data) {
                }
            }) ;
        });


    })

    function getMerchProject(obj){
        var deatil ="";

        for(var i =0;i<obj.length;i++) {
            var materialObj = obj[i];

            var typename = "农户备案";
            deatil += ' <tr data-projectId="' + materialObj.id + '" >';
            deatil += '<td class="idx"></td>';
            deatil += '<td class="code">' + materialObj.code + '</td>';
            deatil += '<td class="name">' + materialObj.name + '</td>';
            deatil += '<td class="productLineName">' + materialObj.productLineName + '</td>';
            if (materialObj.filingType == '1') {
                typename = '农户备案';
            } else {
                typename = '项目公司备案';
            }
            deatil += ' <td class="filingType">' + typename + '</td>';

             deatil += ' <td> ';
            deatil += ' <a class="layui-table-opt-link" onclick="deleteProjectOrTrader(this)">删除</a> ';
            deatil += ' </td> ';
        }
        $("#optionalProjectBody").append(deatil);
        getIndex();

        form.render();
    }

    function getIndex() {
        $("#optionalProjectBody tr").each(function (index) {
            $(this).find(".idx").text(index + 1);
        })
    }

    function getMerchTrader(obj){
        var deatil ="";

        for(var i =0;i<obj.length;i++) {
            var materialObj = obj[i];
            deatil += ' <tr data-traderId="' + materialObj.id + '" >';
            deatil += '<td class="idx"></td>';
            deatil += '<td class="name">' + materialObj.name + '</td>';
            deatil += ' <td> ';
            deatil += ' <a class="layui-table-opt-link" onclick="deleteProjectOrTrader(this)">删除</a> ';
            deatil += ' </td> ';
        }
        $("#traderListBody").append(deatil);
        getTraderIndex();

    }

    function getTraderIndex() {
        $("#traderListBody tr").each(function (index) {
            $(this).find(".idx").text(index + 1);
        })
    }



    //删除
    function deleteProjectOrTrader(that){
        $(that).parents("tr").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;
    }

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



