<%@ 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 {
            padding: 6px 0;
            width: 95%;
            margin: 0 auto;
            border-radius: 10px;
            margin-bottom: 10px
        }

        .bzInp {
            width: 50px;
            border-color: #ddd;
            border-width: 1px;
            border-style: solid;
            background-color: #fff;
            border-radius: 2px;
            height: 24px;
            padding-left: 10px
        }
        .layui-table tr {
            text-align: center;
        }

        .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 }
        .layui-form-label{width: 110px}
        .layui-input-block{margin-left: 110px}
        .layui-table th{text-align: center}
    </style>
</head>
<body>

<div class="layui-form">
    <div class="layui-card mt-10">
        <div id="anyDiv">
            <div class="layui-row border-s">
                <div class="layui-col-xs12">
                    <input hidden id="id" name="id" value="${punishWay.id}">
                    <div class="layui-col-xs12 pr-30">
                        <div class="layui-inline layui-col-xs6">
                            <label class="layui-form-label"><i class="red">*</i>奖励方案名称：</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input"  name="name" lay-verify="required" value="${punishWay.name}">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-xs6">
                            <label class="layui-form-label"><i class="red">*</i>奖励方案编号：</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input layui-bg-gray" disabled name="number" lay-verify="required" value="${number}">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-xs6 mt-10">
                            <label class="layui-form-label"><i class="red">*</i>安装完成时间：</label>
                            <div class="layui-input-block">
                                <div class="layui-col-xs5">
                                    <input type="text" name="lowTime" id="createTime"
                                           value="<fmt:formatDate value="${punishWay.lowTime}" pattern="yyyy-MM-dd"/>"
                                           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="highTime" id="endTime" class="layui-input"
                                           value="<fmt:formatDate value="${punishWay.highTime}" pattern="yyyy-MM-dd"/>"
                                           lay-verify="required" placeholder="失效日期">
                                </div>
                            </div>
                        </div>
                        <div class="layui-inline layui-col-xs6 mt-10">
                            <label class="layui-form-label"><i class="mark">*</i>状态：</label>
                            <div class="layui-input-block">
                                <input type="radio" name="status" title="启用" value="1" <c:if test="${'1' eq punishWay.status || empty punishWay.status}">checked</c:if>/>
                                <input type="radio" name="status" title="禁用" value="2" <c:if test="${'2' eq punishWay.status}">checked</c:if>/>
                            </div>
                        </div>
                        <div class="layui-inline layui-col-xs12 mt-10">
                            <label class="layui-form-label"><i class="red">*</i>奖励规则：</label>
                            <div class="layui-input-block">
                                    <input type="text" class="bzInp" name="lowData" lay-verify="required"
                                           value="${punishWay.lowData}"
                                           oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">MW
                                    &lt= 当月完成安装容量 &lt <input type="text" class="bzInp" lay-verify="required"
                                                             name="highData" value="${punishWay.highData}"
                                                             oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">MW
                                    ，奖励当月安装容量 * <input type="text" class="bzInp" name="ratioData" lay-verify="required"
                                                       value="${punishWay.ratioData}"
                                                       oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">元/W
                            </div>
                        </div>
                        <div class="layui-inline layui-col-xs12">
                            <label class="layui-form-label"></label>
                            <div class="layui-input-block">
                                    当月完成安装容量 &gt= <input type="text" class="bzInp" name="maxHighData" lay-verify="required"
                                                         value="${punishWay.maxHighData}"
                                                         oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">MW
                                    ，奖励当月安装容量 * <input type="text" class="bzInp" name="maxHighDataRadio" lay-verify="required"
                                                       value="${punishWay.maxHighDataRadio}"
                                                       oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">元/W
                            </div>
                        </div>

                    </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>
                                </ul>
                                <button class="addTrader">添加代理商</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>
                                        </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>
                </div>
            </div>
        </div>

        <div class="layui-col-xs12 mb-20 pr-30 mt-20">
        </div>
    </div>
    <div class="operate-footer">
        <input type="button" lay-submit lay-filter="confirm" id="confirm" class="layui-btn " value="保存">
        <input type="button" value="取消" class="layui-btn layui-btn-primary " onclick="closeDiv();">
    </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;
        var 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
                });
            }
        });

        var checkFlag = false;
        form.on('submit(confirm)', function (data) {
            $("#confirm").attr("disabled", "true");
            if(checkFlag){
                return;
            }
            var data1=data.field;
            var traderIds;
            $("#traderListBody tr").each(function(index) {
                var id = $(this).attr("data-traderId");
                if(isBlank(traderIds)){
                    traderIds = id;
                }else{
                    traderIds =id+","+ traderIds
                }
            })
            var  status = $("input[name='status']:checked").val();
            data1.status=status;
            data1.traderIds=traderIds;
            checkFlag = true;
            console.log(JSON.stringify(data1));
            $.ajax({
                url: '${ctx}/rewardsPunishWaySet/saveRewardsWay',
                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});
                    }
                },complete: function () {
                    $("#confirm").removeAttr("disabled");
                    checkFlag = false;
                },error: function (data) {
                }
            });
        });

        $("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
            });
        })

    })

    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 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();
    }

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





