<%@ 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%;
        }
        .hx_l {
            position: relative;
        }

        .hx_l > span {
            position: absolute;
            right: 10px;
            top: 5px
        }
        .hx_del {
            font-size: 12px;
            color: #0e8ee7;
            position: relative;
            display: none;
            cursor: pointer;
            margin-left: 10px;
        }

        #attachFile > li {
            height: 26px
        }

        #attachFile > li:hover .hx_del {
            display: inline-block
        }

    </style>
</head>
<body>

<div class="layui-form">
    <div class="layui-card mt-10">
        <input hidden value="${traderContract.id}" name="id">
        <div class="layui-col-xs12 mb-15 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="traderId" id="traderId" lay-filter="traderId" lay-verify="required" lay-search>
                        <option value="">请选择</option>
                        <c:forEach var="trader" items="${traderList}">
                            <option value="${trader.columns.id}" <c:if test="${traderContract.traderId eq trader.columns.id}"> selected</c:if>>${trader.columns.name}</option>
                        </c:forEach>
                    </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" disabled class="layui-input" id="statusStr"
                    <c:if test="${lastStatus eq '1'}"> value="暂存"</c:if>
                    <c:if test="${lastStatus eq '2'}"> value="代理商待签约"</c:if>
                    <c:if test="${lastStatus eq '3'}"> value="能辉待签约"</c:if>
                    <c:if test="${lastStatus eq '4'}"> value="生效中"</c:if>
                    <c:if test="${lastStatus eq '5'}"> value="已过期"</c:if>
                    <c:if test="${lastStatus eq '6'}"> value="已作废"</c:if>
                    >
                </div>
            </div>
        </div>

        <div class="layui-col-xs12 mb-15 pr-30">
            <div class="layui-inline layui-col-xs6">
                <label class="layui-form-label" style="width: 115px"><i class="red">*</i>合同起始时间：</label>
                <div class="layui-input-block" style="margin-left: 115px">
                    <input type="text" name="startTime" class="layui-input" value="<fmt:formatDate value="${traderContract.startTime}" pattern="yyyy-MM-dd"/>" id="startTime" placeholder="年/月/日" lay-verify="required">
                </div>
            </div>
            <div class="layui-inline layui-col-xs6">
                <label class="layui-form-label" style="width: 115px"><i class="red">*</i>合同终止时间：</label>
                <div class="layui-input-block" style="margin-left: 115px">
                    <input type="text" name="endTime" class="layui-input" value="<fmt:formatDate value="${traderContract.endTime}" pattern="yyyy-MM-dd"/>" id="endTime" placeholder="年/月/日" lay-verify="required">
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 mb-15 pr-30">
            <div class="layui-inline layui-col-xs6">
                <label class="layui-form-label"><i class="red">*</i>合同：</label>
                <div class="layui-input-block">
                    <div style="position: relative;top: 3px;" id="addFile" <c:if test="${not empty traderContract.contractUrl}">hidden</c:if>>
                        <button class="layui-btn layui-btn-sm">上传</button>
                        <input type="file" id="uploadFile" single accept="application/pdf" style="position: absolute; z-index: 3; opacity: 0; left: 0; width: 44px;">
                    </div>

                    <ul id="attachFile" class="mt-5">
                        <c:if test="${not empty traderContract.contractUrl}">
                            <li>
                                <a style="color:#2890ac;" href="${commonStaticImgPath}${traderContract.contractUrl}" download="${traderContract.contractUrl}" class="download-link">${traderContract.contractFileName}</a>
                                <input type="hidden" name="contractUrl"  value="${traderContract.contractUrl}">
                                <input type="hidden" name="contractFileName" value="${traderContract.contractFileName}"/>
                                <span class="hx_del">删除</span>
                            </li>
                        </c:if>
                    </ul>
                </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" name="contractNumber" class="layui-input" lay-verify="required" value="${traderContract.contractNumber}">
                </div>
            </div>
        </div>
    </div>
    <div class="operate-footer">
            <input type="button" lay-submit lay-filter="confirm" id="confirm" class="layui-btn " value="提交">
            <input type="button" lay-filter="tempSave" id="tempSave" class="layui-btn layui-btn-primary" 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 type="text/javascript">
    //初始数据
    var $form;
    var form;
    var upload;
    var $;
    var isNum=/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;  //校验金额
    layui.use(['form', 'table', 'upload', 'jquery','laydate'], function () {
        $ = layui.jquery;
        form = layui.form;
        upload = layui.upload;
        $form = $('form');
        laydate = layui.laydate;

        //开始日期
        var startTime = laydate.render({
            elem: '#startTime'
            , type: 'date'
            , done: function (value, date) {
                //更新结束日期的最小日期
                endTime.config.min = lay.extend({}, date, {
                    month: date.month - 1
                });
            }
        });

        //结束日期
        var endTime = laydate.render({
            elem: '#endTime'
            , type: 'date'
            , done: function (value, date) {
                //更新开始日期的最大日期
                startTime.config.max = lay.extend({}, date, {
                    month: date.month - 1
                });
            }
        });

        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 bondAmountLimit=$(data.elem).find("option:selected").attr("data-method");

            $("#contacts").val(contacts);
            $("#mobile").val(mobile);
            $("#traderAddress").val(traderAddress);
            $("#oldAmount").val(bondAmountLimit);
        });

        form.on('select(traderId)', function (data) {
            var traderId = $(data.elem).find("option:selected").val();
            $.ajax({
                type: "POST",
                url: "${ctx}/trader/contract/getLatestContractStatus",
                data: {
                    traderId: traderId
                },
                success: function (result) {
                    if (result.code == "200") {
                       var status=result.data;
                       var statusStr='';
                       if(isBlank(status)){
                           statusStr='';
                       }else if(status=='1'){
                           statusStr='暂存';
                       }else if(status=='2'){
                           statusStr='代理商待签约';
                       }else if(status=='3'){
                           statusStr='能辉待签约';
                       }else if(status=='4'){
                           statusStr='生效中';
                       }else if(status=='5'){
                           statusStr='已过期';
                       }else if(status=='6'){
                           statusStr='已作废';
                       }
                       $("#statusStr").val(statusStr);
                    }
                }
            });
        });

        form.on('submit(confirm)', function(data){
             var contractUrl=$("input[name='contractUrl']").val();
             if(isBlank(contractUrl)){
                 layer.msg("请上传合同！");
                 return
             }
            $("#confirm").attr("disabled","true");
            var index= layer.load(2, {shade: [0.5,'#fff'], content:''});
            data.field.ifSubmit='2';
            $.ajax({
                url:'${ctx}/trader/contract/saveContract',
                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) {
                },complete: function () {
                    layer.close(index);
                }
            }) ;
        });

        $("#tempSave").click(function (){
            $("#confirm").attr("disabled","true");
            var traderId=$("#traderId").val();
            var startTime=$("#startTime").val();
            var endTime=$("#endTime").val();
            var contractUrl=$("input[name='contractUrl']").val();
            var contractFileName=$("input[name='contractFileName']").val();
            var id=$("input[name='id']").val();
            var contractNumber=$("input[name='contractNumber']").val();
            var data={
                id:id,
                traderId:traderId,
                startTime:startTime,
                endTime:endTime,
                contractUrl:contractUrl,
                contractFileName:contractFileName,
                contractNumber:contractNumber,
                ifSubmit:'1'
            };
            $.ajax({
                url:'${ctx}/trader/contract/saveContract',
                method:'post',
                contentType : "application/json;charsetset=UTF-8",
                data:JSON.stringify(data),
                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) {
                }
            }) ;
        })

        $('#uploadFile').change(function () {
            var file = $(this)[0].files[0];
            if (isBlank(file)) {
                return;
            }
            console.log(file)
            var formData = new FormData();
            formData.append("file", file);
            $.ajax({
                url: "${ctx}/common/uploadFile",
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    $('#attachFile').html('<li><a style="color:#2890ac;" href="${commonStaticImgPath}'+data.path+'" download="'+data.path+'" class="download-link">'+data.filename+data.extName+'</a>' +
                        '<input type="hidden" name="contractUrl"  value="' + data.path + '">' +
                        ' <input type="hidden" name="contractFileName" value="' + data.filename+data.extName+'"/> <span class="hx_del">删除</span>');
                    $("#addFile").hide();
                }
            });
        });

        $(document).on('click', '.hx_del', function () {
            $(this).parent('li').remove();
            $("#addFile").show();
        });
    })

    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>



