<%@ 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" type="text/css" href="${ctxPlugin}/static/css/reset.css"/>
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/dist/viewer.css" media="all">
    <style>
        html {
            background-color: #fff;
        }

        .hide {
            display: none;
        }

        td .layui-form-select {
            width: 150px;
            margin-right: 15px;
            float: left;
        }

        .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;
        }

        .w-130 {
            width: 110px;
        }

        .w-130 + .layui-input-block {
            margin-left: 120px;
        }

        .form-box .layui-inline {
            margin-bottom: 5px;
        }

        .layui-form-checkbox i {
            border-left: 1px solid #d2d2d2;
        }

        .layui-table th {
            text-align: center
        }

        .layui-table td {
            text-align: center
        }

        .layui-table tr {
            height: 48px
        }

        input[type="text"]:disabled, textarea:disabled, .layui-disabled {
            background-color: #ffffff;
        }

        .blank-img {
            background: url('${ctxPlugin}/static/imgs/blankImg.png') center center no-repeat;
            width: 80px;
            height: 80px;
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="layui-form">
    <div class="layui-card" id="LAY_app">

        <div class="layui-card-body over-auto">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title" id="changeTab" lay-filter="changeTab">
                    <li class="layui-this">项目信息</li>
                </ul>
                <input hidden id="id" value="${changeRecord.columns.id}">
                <div class="layui-tab-content">
                    <div class="layui-inline layui-col-xs4">
                        <label class="layui-form-label w-130">电站编码：</label>
                        <div class="layui-input-block ">
                            <input type="text" id="powerStationCode" class="layui-input layui-bg-gray" disabled
                                   value="${contract.columns.powerStationCode}">
                        </div>
                    </div>
                    <div class="layui-inline layui-col-xs4">
                        <label class="layui-form-label w-130">客户姓名：</label>
                        <div class="layui-input-block ">
                            <input type="text" id="tenantName" class="layui-input layui-bg-gray" disabled
                                   value="${contract.columns.tenantName}">
                        </div>
                    </div>
                    <div class="layui-inline layui-col-xs4">
                        <label class="layui-form-label w-130">项目公司：</label>
                        <div class="layui-input-block ">
                            <input type="text" id="companyName" class="layui-input layui-bg-gray" disabled
                                   value="${contract.columns.companyName}">
                        </div>
                    </div>
                    <div class="layui-inline layui-col-xs6">
                        <label class="layui-form-label w-130">安装地址：</label>
                        <div class="layui-input-block ">
                            <input type="text" id="detailAddress" class="layui-input layui-bg-gray" disabled
                                   value="${contract.columns.detailAddress}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card-body over-auto">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title" id="changeTabId" lay-filter="changeTab">
                    <li class="layui-this">屋顶租凭合同信息</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-inline layui-col-xs5">
                        <label class="layui-form-label"><i class="mark">*</i>合同编号：</label>
                        <div class="layui-input-block ">
                            <input type="text" id="contractNumber" class="layui-input "
                                   value="${contract.columns.contractNumber}">
                        </div>
                    </div>
                    <div class="layui-inline layui-col-xs5">
                        <label class="layui-form-label"><i class="mark">*</i>签署日期：</label>
                        <div class="layui-input-block ">
                            <input type="text" id="tenantSignTime" class="layui-input "
                                   value="<fmt:formatDate value="${contract.columns.tenantSignTime}" pattern="yyyy-MM-dd"/>">
                        </div>
                    </div>
                    <div class="layui-inline layui-col-xs5">
                        <label class="layui-form-label"><i class="mark">*</i>合同附件：</label>

                        <div class="layui-input-block img-box ml-120">
                            <div style="display: flex">
                                <div id="contractFilesDiv">
                                    <div id="contractFilesUploader"
                                         <c:if test="${contractFilesCount >= 1}">style="display: none"</c:if>>
                                        <span style="color:blue;cursor: pointer" id="uploader1">上传</span>
                                    </div>
                                    <c:set var="contractFilesCount" value="${contractFilesCount}"/>
                                    <c:if test="${not empty contract.columns.contractUrl}">
                                        <c:forEach items="${contract.columns.contractUrl}" var="file" varStatus="vs">
                                            <div style="margin-top: 5px">
                                                <span style="color: red" class="layui-icon-close layui-icon"
                                                      onclick="delImg(this,'contractFilesUploader')"></span>
                                                <a style="color:#2890ac;" target="_blank"
                                                   onclick="previewUrl('${commonStaticImgPath}${file}')"
                                                   class="download-link">${fns:substringAfterLast(file, '/')}</a>
                                                <input type="hidden" class="contractFiles"
                                                       value="${file}">
                                            </div>
                                        </c:forEach>
                                    </c:if>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
    <div class="operate-footer">
        <button type="button" class="layui-btn" id="submitContract">提交</button>
        <button type="button" class="layui-btn layui-btn-primary " onclick="closeDiv();">取消</button>
    </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 src="${ctxPlugin}/lib/xm-select.js"></script>
<script src="${ctxPlugin}/lib/base64.js"></script>
<script type="text/javascript">
    var viewer = new Viewer(document.getElementById('LAY_app'));
    //初始数据
    var $form;
    var form;
    var $;
    var table;
    var indexyy;
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'jquery', 'layer', 'laydate', 'upload', 'form'], function () {

        $ = layui.jquery;
        form = layui.form;
        upload = layui.upload;
        laydate = layui.laydate;
        $form = $('form');
        // tableExt = layui.tableExt;
        // table = tableExt.getLayTable();



        upload.render({
            elem: '#uploader1',
            url: '${ctx}/common/uploadFile3',
            accept: 'file',
            exts: 'pdf|jpg|png',
            before: function (obj) {
                //预读本地文件示例，不支持ie8
                console.info(obj)
                obj.preview(function (index, file, result) {
                });
            },
            done: function (res) {
                //上传完毕回调
                let path = res.path;
                let index = path.lastIndexOf('/');
                let name = path.substring(index + 1);
                let imgCount = $("#contractFilesDiv").find(".contractFiles").length;
                if ((imgCount + 1) >= 1) {
                    $("#contractFilesUploader").hide();
                }
                let html = '<div style="margin-top: 5px"><span style="color:red;" class="layui-icon-close layui-icon" onclick="delImg(this,\'contractFilesUploader\')"></span>';
                html += '<a style="color:#2890ac;" target="_blank"  onclick="previewUrl(' + "\'" + '${commonStaticImgPath}' + path + "\'" + ')"    class="download-link">' + name + '</a>';
                html += '<input type="hidden" class="contractFiles" value="' + path + '"/> </div>';
                $("#contractFilesDiv").append(html);
            },
            error: function () {
                //请求异常回调
            }
        });


        //通过
        $("#submitContract").click(function () {
            // 合同附件
            let contractFiles = "";
            $(".contractFiles").each(function () {
                if (isBlank(contractFiles)) {
                    contractFiles = $(this).val();
                } else {
                    contractFiles = contractFiles + "," + $(this).val();
                }
            });
            var contractUrl = contractFiles;
            if (isBlank(contractUrl)) {
                layer.msg('请上传合同附件', {icon: 2});
                return;
            }
            // var id = $("#id").val();
            var contractNumber = $("#contractNumber").val();
            var tenantSignTime = $("#tenantSignTime").val();
            $("#submitContract").attr("disabled", "true");
            if (isBlank(contractNumber)) {
                layer.msg("请输入合同编号！", {icon: "2"});
                return;
            }
            if (isBlank(tenantSignTime)) {
                layer.msg("请输入签署日期！", {icon: "2"});
                return;
            }
            let submitContractReq = {
                id: '${contract.columns.entryId}',
                <%--id: '${contract.columns.id}',--%>
                contractNumber: contractNumber,
                tenantSignTime: tenantSignTime,
                contractUrl: contractUrl,
            };

            $.ajax({
                type: 'post',
                url: '${ctx}/main/HuaRongContract/submitContract',
                contentType: "application/json;charsetset=UTF-8",
                data: JSON.stringify(submitContractReq),
                success: function (res) {
                    if (res.code == "200") {
                        parent.layer.msg("提交成功", {time: 2000});
                        closeDiv();
                        // parent.table.reload('test');
                        // layer.close(indexyy);
                        $("#submitContract").removeAttr("disabled");
                        parent.searchOrder();
                    } else {
                        layer.msg(res.errMsg, {time: 2000});
                        layer.close(indexyy);
                        $("#submitContract").removeAttr("disabled");
                    }
                }
            })

            // var indexla=layer.confirm('修改的内容会引起合同重签，是否确认通过变更？', {
            // icon: 3,
            // btn: ['确定', '取消'] //按钮
            // }, function () {
            // indexyy= layer.load(2, {shade: [0.5,'#fff'], content:''});
            // }, function(){
            //     layer.close(indexla);
            // });
        })

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

    });



    window.closeSelf = function () {
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);//关闭当前页
    }

    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 isPhoneNo(phone) {
        var tel = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
        return tel.test($.trim(phone));
    }

    // let initBankData = [];
    // if (!isBlank(tssBankNumName) && !isBlank(tssBankNum)) {
    //  initBankData = [{name: tssBankNumName, value: tssBankNum, selected: true}];
    //}

    function delImg(that, id) {
        $("#" + id).show();
        $(that).parent().remove();
    }

    function previewUrl(_url) {
        if (!checkUrl(_url)) {
            return false;
        }
        var base = new Base64();
        var b64Encoded = base.encode(_url);
        if(_url.endsWith('pdf')){
            window.open('http://47.98.203.224:8012/onlinePreview?url=' + encodeURIComponent(b64Encoded)+'&officePreviewType=pdf');
        }else{
            window.open('http://47.98.203.224:8012/onlinePreview?url=' + encodeURIComponent(b64Encoded));
        }
    }

    function checkUrl(url) {
        //url= 协议://(ftp的登录信息)[IP|域名](:端口号)(/或?请求参数)
        var strRegex = '^((https|http|ftp)://)'//(https或http或ftp)
            + '(([\\w_!~*\'()\\.&=+$%-]+: )?[\\w_!~*\'()\\.&=+$%-]+@)?' //ftp的user@  可有可无
            + '(([0-9]{1,3}\\.){3}[0-9]{1,3}' // IP形式的URL- 3位数字.3位数字.3位数字.3位数字
            + '|' // 允许IP和DOMAIN（域名）
            + '(localhost)|'	//匹配localhost
            + '([\\w_!~*\'()-]+\\.)*' // 域名- 至少一个[英文或数字_!~*\'()-]加上.
            + '\\w+\\.' // 一级域名 -英文或数字  加上.
            + '[a-zA-Z]{1,6})' // 顶级域名- 1-6位英文
            + '(:[0-9]{1,5})?' // 端口- :80 ,1-5位数字
            + '((/?)|' // url无参数结尾 - 斜杆或这没有
            + '(/[\\w_!~*\'()\\.;?:@&=+$,%#-]+)+/?)$';//请求参数结尾- 英文或数字和[]内的各种字符
        var re = new RegExp(strRegex, 'i');//i不区分大小写
        //将url做uri转码后再匹配，解除请求参数中的中文和空字符影响
        if (re.test(encodeURI(url))) {
            return (true);
        } else {
            return (false);
        }
    }


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



