<%@ 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}/lib/layuiAdmin/dist/layuiadmin/dist/viewer.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%;
        }
        .load-icon{background: url('${ctxPlugin}/static/img/shili_img.png') center center no-repeat; width: 12px; height: 12px; display: inline-block; border-radius: 50%;
            vertical-align: text-bottom;transform: translate(0px, -1px);margin-right: 2px;}
    </style>
</head>
<body>

<div class="layui-form" id="LAY_app">
    <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>
            <input name="settleIds" value="${settleId}" hidden>
            <input name="adjustmentApplyIds" value="${adjustmentApplyIds}" hidden>
            <label class="layui-form-label w-130"><i class="red">*</i>代理商名称：</label>
            <div class="layui-input-block">
                <select name="traderId" id="traderId" lay-filter="traderId" lay-verify="required" lay-search readonly disabled="disableds">
                    <option value="">请选择</option>
                    <c:forEach var="trader" items="${traders}">
                        <option value="${trader.columns.id}" data-value="${trader.columns.bank_name}" data-anim="${trader.columns.bank_code}"
                           data-name="${trader.columns.name}"  <c:if test="${apply.columns.trader_id eq trader.columns.id || traderId 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">
            <label class="layui-form-label w-130">请款账户：</label>
            <div class="layui-input-block ">
                <select name="objType"  lay-verify="required"  id="objType" lay-filter="objType" disabled  readonly>
                    <option value="">请选择</option>
                    <option value="0" <c:if test="${objType eq 0}"> selected</c:if>>待结算账户</option>
                    <option value="1" <c:if test="${objType eq 1}"> selected</c:if>>质保金账户</option>
                </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="${objType eq 0 ? caseAccount.columns.settle_amount:caseAccount.columns.qa_amount_usable}" id="canOut" disabled>
                </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="outCash" lay-verify="required"  readonly value="${outAmount}">
                    <span class="pos-a h-32 lh-32 layui-span-unit">元</span>
                </div>
            </div>
        </div>
        <c:if test="${objType eq '0'}">
            <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" name="offsetBondAmount" value="${offsetBondAmount}"  disabled>
                        <span class="pos-a h-32 lh-32 layui-span-unit">元</span>
                    </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"  name="payAmount" disabled  readonly value="${payAmount}">
                        <span class="pos-a h-32 lh-32 layui-span-unit">元</span>
                    </div>
                </div>
            </div>
        </c:if>


        <div class="layui-col-xs12 mb-10 pr-30">
            <label class="layui-form-label w-130"><i class="red">*</i>公司名称：</label>
            <div class="layui-input-block">

                <input type="text" name="companyName"   class="layui-input"  lay-verify="required" value="${empty apply? trader.name :apply.columns.company_name}"  id="companyName" >
            </div>
        </div>

        <div class="layui-col-xs12 mb-10 pr-30">
            <label class="layui-form-label w-130"><i class="red">*</i>开户银行：</label>
            <div class="layui-input-block">
                <input type="text" name="bank" disabled  class="layui-input layui-bg-gray"  lay-verify="required" value="${empty apply? trader.bankName:apply.columns.bank}"  id="bank" >
            </div>
        </div>

        <div class="layui-col-xs12 mb-10 pr-30">
            <label class="layui-form-label w-130"><i class="red">*</i>银行账号：</label>
            <div class="layui-input-block">
                <input type="text" name="bankCode" disabled  class="layui-input layui-bg-gray"  lay-verify="required" value="${empty apply? trader.bankCode:apply.columns.bank_code}"  id="bankCode" >
            </div>
        </div>

        <div class="layui-col-xs12 layui-form-item">
            <input hidden id="imgs" name="voucher" value="${apply.columns.voucher}" lay-verify="required">
            <label class="layui-form-label"><i class="red">*</i>发票：
                <%--<br/><a href="${commonStaticImgPath}/prohibit_delete/示例图/工程进度款请款申请示例.png" style="font-size: 12px;color: red;margin-right: 5px;"><i class="load-icon"></i>下载示例图</a>--%>
            </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}">--%>
                    <textarea name="remarks" id="remarks" class="layui-textarea">${apply.columns.remarks}</textarea>
            </div>
        </div>
        <div class="layui-col-xs12 mb-20 pr-30 pl-30">
            <div style="max-width: 100%;overflow: auto;">
                <table class="layui-table" style="width: 2000px">
                    <thead>
                    <tr>
                        <th style="width: 50px">序号</th>
                        <th style="width: 120px">电站编码</th>
                        <th style="width: 150px">代理商名称</th>
                        <th style="width: 200px">项目名称</th>
                        <th style="width: 120px">所属省区</th>
                        <th style="width: 120px">开发经理</th>
                        <th style="width: 150px">结算类型</th>
                        <th style="width: 105px">结算金额</th>
                        <th style="width: 120px">屋顶类型</th>
                        <th style="width: 120px">设计方案</th>
                        <th style="width: 150px">方案名称</th>
                        <th style="width: 120px">业主姓名</th>
                        <th style="width: 120px">联系方式</th>
                        <th style="width: 120px">产品编码</th>
                        <th style="width: 130px">产品名称</th>
                        <th style="width: 120px">安装容量</th>
                        <th style="width: 120px">组件块数</th>
                        <th style="width: 220px">生成时间</th>
                        <th style="width: 120px">备注</th>
                    </tr>
                    </thead>
                    <tbody id="materialTable">
                    <c:forEach items="${settleDetails}" varStatus="vs" var="detail">
                        <tr data-id="${detail.columns.id}" class="entryTr" >
                            <td>${vs.count}</td>
                            <td>${detail.columns.power_station_code}</td>
                            <td>${detail.columns.trader_name}</td>
                            <td>
                                    ${detail.columns.province}${detail.columns.city}${detail.columns.entryName}<fmt:formatNumber type="number" value="${detail.columns.actual_capacity/1000}" maxFractionDigits="2"/>KW光伏电站
                            </td>
                            <td>${detail.columns.department_name}</td>
                            <td>${detail.columns.creator}</td>
                            <td>

                                <c:if test="${detail.columns.settleType eq '0'}">预结算</c:if>
                                <c:if test="${detail.columns.settleType eq '1'}">分包并网结算</c:if>
                                <c:if test="${detail.columns.settleType eq '2'}">电站整改(减)</c:if>
                                <c:if test="${detail.columns.settleType eq '3'}">质保金</c:if>

                            </td>
                            <td>${detail.columns.amount}</td>
                            <td>${detail.columns.roof_type}</td>
                            <td>${detail.columns.scheme_type eq '1' ? '标准方案' : '组合方案'}</td>
                            <td>${detail.columns.scheme_name}</td>
                            <td>${detail.columns.tenant_name}</td>
                            <td>${detail.columns.mobile}</td>
                            <td>${detail.columns.project_code}</td>
                            <td>${detail.columns.project_name}</td>
                            <td>${detail.columns.actual_capacity}</td>
                            <td>${detail.columns.component_num}</td>
                            <td>${detail.columns.createTime}</td>
                            <td><div class="remarks fl" style="width: 120px" title="${detail.columns.remarks}">${detail.columns.remarks}</div></td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
        <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>


<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/dist/viewer.js"></script>
<script type="text/javascript">
    //图片查看效果
    var viewer = new Viewer(document.getElementById('LAY_app'));
    //初始数据
    var $form;
    var form;
    var upload;
    var $;
    var imgs='';
    /*var imgsCount=${imgsCount};*/
    var isNum=/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;  //校验金额
    layui.use(['form', 'table', 'upload', 'jquery'], function () {
        $ = layui.jquery;
        form = layui.form;
        upload = layui.upload;
        $form = $('form');

        if(205==${code}){
            layer.msg('${error}',{time:3000},function (){
                closeDiv();
            });
        }

       /* if (imgsCount>=3) {
            $("#uploader").hide();
        }
*/
        form.on('select(objType)', function(data){
            var objType=$(data.elem).find("option:selected").val();
            var traderId=$("#traderId").val();
            if(!isBlank(objType) && !isBlank(traderId)){
                $.ajax({
                    type: "POST",
                    url: "${ctx}/apply/outCash/getTraderCanOutCash",
                    data: {
                        traderId: traderId
                    },
                    success:function(res){
                        if(res.code=="200"){
                            var account=res.data;
                            if('1'==objType){
                                $("#canOut").val(account.columns.qa_amount_usable);
                            }else if('0'==objType){
                                $("#canOut").val(account.columns.settle_amount);
                            }

                        } else{
                            layer.msg("获取账户可请款金额失败!",{time:2000});
                        }
                    },
                    error:function (data) {
                    }
                }) ;
            }
        });


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

            var bank=$(data.elem).find("option:selected").attr("data-value");
            var bankCode=$(data.elem).find("option:selected").attr("data-anim");
            var traderName=$(data.elem).find("option:selected").attr("data-name");
            $("#bank").val(bank);
            $("#bankCode").val(bankCode);
            $("#companyName").val(traderName);
            if(!isBlank(objType) && !isBlank(traderId)){
                $.ajax({
                    type: "POST",
                    url: "${ctx}/apply/outCash/getTraderCanOutCash",
                    data: {
                        traderId: traderId
                    },
                    success:function(res){
                        if(res.code=="200"){
                            var account=res.data;
                            if('1'==objType){
                                $("#canOut").val(account.columns.qa_amount_usable);
                            }else if('0'==objType){
                                $("#canOut").val(account.columns.settle_amount);
                            }

                        } else{
                            layer.msg("获取账户可请款金额失败!",{time:2000});
                        }
                    },
                    error:function (data) {
                    }
                }) ;
            }
        });


        form.on('submit(confirm)', function(data){
            console.log(JSON.stringify(data.field));
            $("#confirm").attr("disabled","true");
            var amount=$("input[name='outCash']").val();
            /*if(!isNum.test($.trim(amount))) {
                layer.msg("金额格式有误，请重新输入！", {time: 2000});
                $("#confirm").removeAttr("disabled");
                return false;
            }*/
            $.ajax({
                url:'${ctx}/apply/outCash/saveCashOutApply',
                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 () {
                //请求异常回调
            }
        });

    })

    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);
    }
</script>
</body>
</html>



