<%@ 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">
    <style>
        html{background-color: #fff;padding-bottom: 50px;}
        .layui-form-select dl{
            max-height:200px;
            width: 80%;
        }
    </style>
</head>
<body>

<div class="layui-form">
    <div class="layui-card mt-10">

        <c:if test="${not empty apply.columns.id}">
            <div class="ideaOpe">
                备注：${apply.columns.content}
            </div>
        </c:if>

        <div class="layui-col-xs12 mb-15 pr-30">
            <input name="id" value="${apply.columns.id}" hidden>
            <label class="layui-form-label w-130"><i class="red">*</i>代理商名称：</label>
            <div class="layui-input-block">
                <select name="traderId" id="traderName" lay-filter="traderName" lay-verify="required" lay-search>
                    <option value="">请选择</option>
                    <c:forEach var="trader" items="${traders}">
                        <option value="${trader.columns.id}" data-value="${trader.columns.contacts}" data-anim="${trader.columns.mobile}"
                                data-type="${trader.columns.traderAddress}" <c:if test="${apply.columns.trader_id eq trader.columns.id}"> selected</c:if>>${trader.columns.name}</option>
                    </c:forEach>
                </select>
            </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">联系人：</label>
                <div class="layui-input-block ">
                    <input type="text" class="layui-input layui-bg-gray" value="${apply.columns.contacts}" id="contacts" disabled>
                </div>
            </div>
            <div class="layui-inline layui-col-xs6">
                <label class="layui-form-label w-130">联系电话：</label>
                <div class="layui-input-block w-200" >
                    <input type="text" class="layui-input layui-bg-gray" value="${apply.columns.mobile}" id="mobile" disabled>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 mb-10 pr-30">
            <label class="layui-form-label w-130">代理商地址：</label>
            <div class="layui-input-block">
                <input type="text"  class="layui-input layui-bg-gray" value="${apply.columns.traderAddress}" disabled id="traderAddress" >
            </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="adjustType" id="adjustType" lay-verify="required" lay-filter="adjustType">
                        <option value="">请选择</option>
                        <option value="1" <c:if test="${apply.columns.adjustType eq 1}"> selected</c:if>>增额</option>
                        <option value="2" <c:if test="${apply.columns.adjustType 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" value="${apply.columns.amount}" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 mb-15 pr-30 <c:if test="${1 eq apply.columns.adjustType || empty apply.columns.adjustType}">hide</c:if> entryList">
            <label class="layui-form-label w-130">关联电站：</label>
            <div class="layui-input-block">
                <select name="entryId" id="entryId" lay-search>
                    <option value="">请选择</option>
                    <c:forEach var="trader" items="${entryList}">
                        <option value="${trader.columns.id}"  <c:if test="${trader.columns.id eq apply.columns.entry_id}"> selected</c:if>>${trader.columns.power_station_code}</option>
                    </c:forEach>
                </select>
            </div>
        </div>

        <div class="layui-col-xs12 layui-form-item">
            <label class="layui-form-label">相关资质：</label>
            <div class="layui-input-block">
                <div id="imgsDiv">
                    <c:forEach items="${imglist}" var="img">
                        <div class="bj-img imgSpan"><span class="layui-icon-close layui-icon" onclick="delImg(this)"></span>
                            <img src="${commonStaticImgPath.concat(img)}" data-img="${commonStaticImgPath.concat(img)}"  height="700" width="1200"/>
                            <input type="hidden" class="imgPicker" value="${img}"/>
                        </div>
                    </c:forEach>
                </div>
                <div class="upload-container" id="uploader">
                    <img src="" alt="img placeholder" id="imgsAdd">
                </div>
            </div>
        </div>
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;(最多上传3张图片)
        <div class="layui-col-xs12 mb-15 pr-30 mt-10">
            <label class="layui-form-label w-130">备注：</label>
            <div class="layui-input-block">
                <input type="text" name="remarks" autocomplete="off" placeholder="" class="layui-input" value="${apply.columns.remarks}">
            </div>
        </div>

        <input type="hidden" name="voucher" id="imgs" value="${apply.columns.voucher}">
        <div class="layui-col-xs12 mb-20 pr-30 mt-20">
        </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>

<div id="lookImg" class="hide pos-r">
    <div style="position:relative;width:90%;height:450px;">
        <div class="w-500 h-450 lookImg">
            <img src="" width="80%" id="image">
        </div>
    </div>
</div>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script type="text/javascript">
    //初始数据
    var $form;
    var form;
    var upload;
    var $;
    var imgsCount=${imgsCount};
    var imgs='';
    var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
    layui.use(['form', 'table', 'upload', 'jquery'], function () {
        $ = layui.jquery;
        form = layui.form;
        upload = layui.upload;
        $form = $('form');

        if (imgsCount>=3) {
            $("#uploader").hide();
        }



        form.on('select(traderName)', function(data){
            var contacts=$(data.elem).find("option:selected").attr("data-value");
            var mobile=$(data.elem).find("option:selected").attr("data-anim");
            var traderAddress=$(data.elem).find("option:selected").attr("data-type");

            var traderId=$(data.elem).find("option:selected").val();

            $("#contacts").val(contacts);
            $("#mobile").val(mobile);
            $("#traderAddress").val(traderAddress);

            var adjustType = $("#adjustType").find("option:selected").val();
            if(!isBlank(adjustType) && '2'==adjustType){
                getEntryList(traderId);
            }

        });

        form.on('select(adjustType)', function(data){
            var adjustType = $(data.elem).find("option:selected").val();
            var traderId=$("#traderName").val();
            if('2'==adjustType){
                getEntryList(traderId);

            }else{
                $(".entryList").addClass("hide");
                $("#entryId").html("");

            }
        });



        form.on('submit(confirm)', function(data){
            console.log(JSON.stringify(data.field));
            $("#confirm").attr("disabled","true");
            $.ajax({
                url:'${ctx}/apply/settlementAmount/saveSettlementAmountApply',
                method:'post',
                contentType : "application/json;charsetset=UTF-8",
                data:JSON.stringify(data.field),
                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) {
                }
            }) ;
        });

        var uploadInst = upload.render({
            elem: '#uploader' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {

                });
            }
            , done: function (res) {
                /* imgs+=res.path+',';
                 $("#imgs").val(imgs);*/
                //上传完毕回调
                addImg(res.path);
            }
            , error: function () {
                //请求异常回调
            }
        });

        $(".imgSpan img").click(function(){
            var img = $(this).attr("data-img");
            console.log(img);
            $("#lookImg img").attr('src',img);
            layer.open({
                type:1,
                title:'查看图片',
                area:['500px','450px'],
                content:$("#lookImg")
            })
        })
    })

    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 addImg(data){
        imgs = '';
        imgsCount++;
        if (imgsCount >= 3) {
            $("#uploader").hide();
        }else{
            $("#uploader").show();
        }
        var html = '<div class="bj-img imgSpan"><span class="layui-icon-close layui-icon" onclick="delImg(this)"></span>';
        html += '<img src="${commonStaticImgPath}'+data+'" height="700" width="1200"/>';
        html += '<input type="hidden" class="imgPicker" value="'+data+'"/> </div>';
        $("#imgsDiv").append(html);
        var imgSelector = $(".imgPicker");
        imgSelector.each(function (index) {
            var img = $(this).val();
            if (!isBlank(img)) {
                imgs += img + ",";
            }
        });
        console.log(imgs);
        $("#imgs").val(imgs);
    }

    function delImg(that){
        imgsCount--;
        if (imgsCount < 3) {
            $("#uploader").show();
        }
        $(that).parent().remove();
        var imgSelector = $(".imgPicker");
        imgSelector.each(function (index) {
            var img = $(this).val();
            if (!isBlank(img)) {
                imgs += img + ",";
            }
        });
        $("#imgs").val(imgs);
    }

    function getEntryList(traderId){
        $.ajax({
            type: "POST",
            url: "${ctx}/apply/settlementAmount/getEntryList",
            data: {
                traderId: traderId
            },
            success: function (result) {
                if (result.code != "200") {
                    layer.msg("暂无数据!")
                    return
                }
                var data=result.data;
                var html = " <option value=''>请选择</option>";
                if(!isBlank(data)){
                    for (var i = 0; i < data.length; i++) {
                        var entry = data[i];
                        html = html + '<option value="' + entry.columns.id + '" title="' + entry.columns.id + '">' + entry.columns.power_station_code + '</option>';
                    }
                }
                $("#entryId").html(html);
                form.render('select');
                $(".entryList").removeClass("hide");
            },
        });
    }

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

