<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>验收报告</title>
    <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" type="text/css" href="${ctxPlugin}/static/css/reset.css" />--%>
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/dist/viewer.css" media="all">
    <style>
        {
            padding: 0;
            margin: 0;
        }
        table{
            text-align: center;
        }
        .tableHeader{
            line-height: 40px;
            background: #dddddd;
        }
        .title{
            font-weight: bold;
            font-size: 14px;
            line-height: 30px;
            text-align: left;
        }
        td{
            padding: 0 5px;
        }
        .add{
            width: 60px;
            height: 60px;
            bordeR:1px solid #dddddd;
            position: relative;
            float: left;
        }
        .add span{
            position: absolute;
            left: 0;top: 0;
            z-index: 0;
            width: 100%;
            height: 100%;
            font-size: 20px;
            text-align: center;
            line-height: 60px;
            font-weight: normal;
        }
        .add input{
            width: 100%;
            height: 100%;
            opacity: 0;
            position: absolute;
            z-index:10;
            left: 0;
            top: 0;
        }
        .img{
            overflow: hidden;
            padding: 5px 0;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }
        .img>ul{
            float: left;
            list-style: none;
        }
        .img li{
            width: 210px;
            height: 230px;
            bordeR:1px solid #dddddd;
            position: relative;
            float: left;
            margin-right: 10px;
        }
        .img li img{
            object-fit: scale-down;
            width: 100%;
            height: 100%;
        }
        .img+span{
            line-height: 30px;
            font-size: 12px;
            color: red;
        }
        .pd-20{
            padding: 20px;
        }
        .form-title{
            line-height: 40px;
            font-weight: bold;
        }
        .form-input{
            width: 100%;
            padding: 5px 0;
            border: none;
            outline: none;
        }
        .red{
            color: red;
        }
        .unit{
            position: absolute;
            right: 30px;
            top: 2px;
            font-weight: bold;
        }
        .pos-r{
            position: relative;
        }
        .form-textarea{
            line-height: 80px;
        }
        .no-resize{
            resize: none;
        }
        .flex{
            display: flex;
        }
        .text-r{
            text-align: right;
        }
        .m-10{
            margin: 10px;
        }
        .operate-footer {
            width: 100%;
            position: fixed;
            bottom: 0;
            z-index: 30000;
            background: #F8F8F8;
            padding: 10px 0;
            text-align: center;
        }
        .footer-btn {
            height: 27px;
            line-height: 27px;
            padding: 0 18px;
            border-radius: 2px;
            font-size: 14px;
            cursor: pointer;
            border: 1px solid #C9C9C9;
            background-color: #fff;
            outline: none;
        }
        .pb-50{
            padding-bottom: 50px;
        }
        .pd-10{
            padding: 10px;
        }
        .normal-btn{
            border: 1px solid #144856;
            background-color: #144856 !important;
            color: #fff;
        }
        .layui-layer-btn0{
            border-color: #144856 !important;
            background-color: #144856 !important;
        }
        .idea-text{
            width: 320px; height: 100px;outline: none; padding: 3px
        }
        .hide{
            display: none;
        }
        .f-l{
            float: left;
        }
    </style>
</head>
<body>

<div class="layui-fluid pd-20 pb-50"  id="LAY_app">
    <table border cellpadding="0" cellspacing="0" width="100%">
        <tr class="form-title">
            <td colspan="4">户用电站验收报告
                <c:choose>
                    <c:when test="${not empty entry.checkAcceptImgs}">
                        <a class="layui-btn " href="${commonStaticImgPath}${entry.checkAcceptImgs}" target ="_blank" style="color: #0e8ee7;float: right;cursor:pointer;" >下载报告</a>
                    </c:when>
                    <c:otherwise>
                        <a class="layui-btn downloadPro" style="color: #0e8ee7;float: right;cursor:pointer;" >下载报告</a>
                    </c:otherwise>
                </c:choose>

                  <%--  <a class="layui-btn downloadPro" style="color: #0e8ee7;float: right;cursor:pointer;" >下载报告</a>--%>


            </td>

        </tr>
        <tr class="tableHeader">
            <td colspan="4">一、电站基本信息</td>
        </tr>
        <tr>
            <td width="10%">项目编号</td>
            <td width="40%"><input type="text" class="form-input" value="${project.code}" readonly/></td>
            <td width="10%">产品名称</td>
            <td width="40%"><input type="text" class="form-input" readonly value="${project.name}"/></td>
        </tr>
        <tr>
            <td>代理商名称</td>
            <td><input type="text" class="form-input" readonly value="${trader.name}"/></td>
            <td>代理商电话</td>
            <td><input type="text" class="form-input" readonly value="${trader.telephone}"/></td>
        </tr>
        <tr>
            <td>业主姓名</td>
            <td><input type="text" class="form-input" readonly value="${entry.tenantName}"/></td>
            <td>身份证号码</td>
            <td><input type="text" class="form-input" readonly value="${entry.idCode}"/></td>
        </tr>
        <tr>
            <td width="10%">联系电话</td>
            <td width="40%"><input type="text" class="form-input" readonly value="${entry.mobile}"/></td>
            <td width="10%">方案类型</td>
            <td width="40%"><input type="text" class="form-input" readonly value="${entry.schemeTypeName}"/></td>
        </tr>
        <tr>
            <td width="10%">屋顶类型</td>
            <td width="40%"><input type="text" class="form-input" readonly value="${entry.roofType}"/></td>
            <td width="10%">朝向角度</td>
            <td width="40%"><input type="text" class="form-input" readonly value="${entry.angle}"/></td>
        </tr>
        <tr>
            <td width="10%">电站编码</td>
            <td><input type="text" class="form-input" readonly value="${entry.powerStationCode}"/></td>
            <td width="10%"><span class="red">*</span>安装组件规格</td>
            <td width="40%" class="pos-r"><input type="text" value="${report.componentSpec}" readonly id="componentSpec" class="form-input changeInput"/><span class="unit">W</span></td>
        </tr>
        <tr>
            <td width="10%"><span class="red">*</span>安装组件块数</td>
            <td width="40%" class="pos-r"><input type="text" value="${report.componentNum}" readonly id="componentNum" class="form-input changeInput"/><span class="unit">块</span></td>
            <td width="10%"><span class="red">*</span>实际安装容量</td>
            <td width="40%" colspan="3" class="pos-r"><input type="text" id="capacity" value="${report.capacity}"
                                                             class="form-input" readonly/><span class="unit">W</span>
            </td>
        </tr>
        <tr>
            <td width="10%">安装地址</td>
            <td width="90%" colspan="3"><input type="text" class="form-input" readonly value="${entry.province}${entry.city}${entry.area}${entry.address}"/></td>
        </tr>
        <tr class="tableHeader">
            <td colspan="4">二、验收标准及相关照片</td>
        </tr>
        <tr class="title">
            <td colspan="4">1、逆变器、GPRS模块、组件条码、实际组件串线图</td>
        </tr>
        <tr>
            <td colspan="2">
                <div>
                    <div class="img" id="nbqPlateImg">
                        <c:if test="${not empty report.nbqPlateImg}">
                            <ul>
                                <li class="imgsLi">
                                    <img src="${commonStaticImgPaths}${report.nbqPlateImg}" alt="">
                                    <input type="hidden" class="imgValues" value="${report.nbqPlateImg}">
                                </li>
                            </ul>
                        </c:if>

                    </div>
                    <span>逆变器铭牌照片</span>
                </div>
            </td>
            <td colspan="2">
                <div>
                    <div class="img" id="txPlateImg">
                        <c:if test="${not empty report.txPlateImg}">
                            <ul>
                                <li class="imgsLi">
                                    <img src="${commonStaticImgPaths}${report.txPlateImg}" alt="">
                                    <input type="hidden" class="imgValues" value="${report.txPlateImg}">
                                </li>
                            </ul>
                        </c:if>

                    </div>
                    <span>通讯通模块铭牌照片</span>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div>
                    <div class="img" id="zjPlateImg">
                        <c:if test="${not empty report.zjPlateImg}">
                            <ul>
                                <li class="imgsLi">
                                    <img src="${commonStaticImgPaths}${report.zjPlateImg}" alt="">
                                    <input type="hidden" class="imgValues" value="${report.zjPlateImg}">
                                </li>
                            </ul>
                        </c:if>

                    </div>
                    <span>组件铭牌照片</span>
                </div>
            </td>
            <td colspan="2">
                <div>
                    <div class="img" id="cxImg">
                        <c:if test="${not empty report.cxImg}">
                            <ul>
                                <li class="imgsLi">
                                    <img src="${commonStaticImgPaths}${report.cxImg}" alt="">
                                    <input type="hidden" class="imgValues" value="${report.cxImg}">
                                </li>
                            </ul>
                        </c:if>

                    </div>
                    <span>组件串线图（可手工绘图或CAD截图）</span>
                </div>
            </td>
        </tr>
        <tr class="title">
            <td colspan="4">2、符合各应用场景支架安装标准</td>
        </tr>
        <tr>
            <td colspan="4">
                <div>
                    <div class="img" id="pzImgs">
                        <c:if test="${not empty report.pzImgs}">
                            <c:forEach items="${fn:split(report.pzImgs, ',')}" var="img">
                                <ul>
                                    <li class="imgsLi">
                                        <img src="${commonStaticImgPaths}${img}" alt="">
                                        <input type="hidden" class="imgValues" value="${img}">
                                    </li>
                                </ul>
                            </c:forEach>
                        </c:if>

                    </div>
                    <span style="color: #000;">配重块照片/背拉照片/立柱固定方式照片/框架固定照片</span>
                </div>
            </td>
        </tr>
        <tr class="title">
            <td colspan="4">3、支架整体照片</td>
        </tr>
        <tr>
            <td colspan="4">
                <div>
                    <div class="img" id="zjImgs">
                        <c:if test="${not empty report.zjImgs}">
                            <c:forEach items="${fn:split(report.zjImgs, ',')}" var="img">
                                <ul>
                                    <li class="imgsLi">
                                        <img src="${commonStaticImgPaths}${img}" alt="">
                                        <input type="hidden" class="imgValues" value="${img}">
                                    </li>
                                </ul>
                            </c:forEach>
                        </c:if>

                    </div>
                    <span style="color: #000;">支架安装完毕整体照片</span>
                </div>
            </td>
        </tr>
        <tr class="title">
            <td colspan="4">4、符合逆变器及并网箱箱设备接线、系统接地要求</td>
        </tr>
        <tr>
            <td colspan="2">
                <div>
                    <div class="img" id="installImgs">
                        <c:if test="${not empty report.installImgs}">
                            <c:forEach items="${fn:split(report.installImgs, ',')}" var="img">
                                <ul>
                                    <li class="imgsLi">
                                        <img src="${commonStaticImgPaths}${img}" alt="">
                                        <input type="hidden" class="imgValues" value="${img}">
                                    </li>
                                </ul>
                            </c:forEach>
                        </c:if>

                    </div>
                    <span>逆变器、并网箱整体安装照片/并网箱打开照片</span>
                </div>
            </td>
            <td colspan="2">
                <div>
                    <div class="img" id="testImgs">
                        <c:if test="${not empty report.testImgs}">
                            <c:forEach items="${fn:split(report.testImgs, ',')}" var="img">
                                <ul>
                                    <li class="imgsLi">
                                        <img src="${commonStaticImgPaths}${img}" alt="" >
                                        <input type="hidden" class="imgValues" value="${img}">
                                    </li>
                                </ul>
                            </c:forEach>
                        </c:if>

                    </div>
                    <span>接地电阻测试照片（共两张）</span>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="4">
                <div>
                    <div class="img" id="jdImgs">
                        <c:if test="${not empty report.jdImgs}">
                            <c:forEach items="${fn:split(report.jdImgs, ',')}" var="img">
                                <ul>
                                    <li class="imgsLi">
                                        <img src="${commonStaticImgPaths}${img}" alt="">
                                        <input type="hidden" class="imgValues" value="${img}">
                                    </li>
                                </ul>
                            </c:forEach>
                        </c:if>

                    </div>
                    <span>接地极照片、组件接地、支架接地</span>
                </div>
            </td>
        </tr>
        <tr class="title">
            <td colspan="4">5、周边无树木、高大建筑及附属物遮挡（能清晰数出组件数量）</td>
        </tr>
        <tr>
            <td colspan="4">
                <div>
                    <div class="img" id="totalImgs">
                        <c:if test="${not empty report.totalImgs}">
                            <c:forEach items="${fn:split(report.totalImgs, ',')}" var="img">
                                <ul>
                                    <li class="imgsLi">
                                        <img src="${commonStaticImgPaths}${img}" alt="">
                                        <input type="hidden" class="imgValues" value="${img}">
                                    </li>
                                </ul>
                            </c:forEach>
                        </c:if>

                    </div>
                    <span>电站安装完毕整体照片（</span>
                </div>
            </td>
        </tr>
        <tr class="title">
            <td colspan="4">6、购售电合同照片</td>
        </tr>
        <tr>
            <td colspan="4">
                <div>
                    <div class="img" id="saleImgs">
                        <c:if test="${not empty report.purchaseSaleImg}">
                            <c:forEach items="${fn:split(report.purchaseSaleImg, ',')}" var="img">
                                <ul>
                                    <li class="imgsLi">
                                        <img src="${commonStaticImgPaths}${img}" alt="">
                                        <input type="hidden" class="imgValues" value="${img}">
                                    </li>
                                </ul>
                            </c:forEach>
                        </c:if>

                    </div>
                    <span>已签署购售电合同照片</span>
                </div>
            </td>
        </tr>
        <tr class="title">
            <td colspan="4">7、其他补充图片</td>
        </tr>
        <tr>
            <td colspan="4">
                <div>
                    <div class="img" id="otherImgs">
                        <c:if test="${not empty report.otherImgs}">
                            <c:forEach items="${fn:split(report.otherImgs, ',')}" var="img">
                                <ul>
                                    <li class="imgsLi">
                                        <img src="${commonStaticImgPaths}${img}" alt="">
                                        <input type="hidden" class="imgValues" value="${img}">
                                    </li>
                                </ul>
                            </c:forEach>
                        </c:if>
                        <c:if test="${fn:length(fn:split(report.otherImgs, ',')) < 4}">
                            <div class="add">
                                <span>+</span>
                                <input type="file" class="uploadFile" max-num = "4">
                            </div>
                        </c:if>
                    </div>
                    <span>其他补充图片</span>
                </div>
            </td>
        </tr>
        <tr class="tableHeader">
            <td colspan="4">三、验收结论</td>
        </tr>
        <tr class="form-textarea">
            <td>整改意见</td>
            <td colspan="3"><textarea class="form-input no-resize" readonly>${report.correctiveIdea}</textarea></td>
            <input type="hidden" id="correctiveIdea" value="${report.correctiveIdea}"/>
        </tr>
        <tr class="form-textarea">
            <td>验收结论</td>
            <td colspan="3"><textarea id="conclusion" readonly class="form-input no-resize">${report.conclusion}</textarea>
            </td>
        </tr>

    </table>
    <div class="flex m-10">
        <div class="text-r" style="width: 70%">验收人：${report.acceptName}</div>
        <div class="text-r" style="width: 30%">验收时间：<fmt:formatDate value="${report.acceptTime}" pattern="yyyy-MM-dd HH:mm"/> </div>
    </div>
</div>

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script src="${ctxPlugin}/lib/factory.js"></script>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/dist/viewer.js"></script>
<script>
    //图片查看效果
    var viewer = new Viewer(document.getElementById('LAY_app'));
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'tableExt', 'jquery', 'layer','laypage','laydate','form'], function(){
        $ = layui.$;
        layer = layui.layer;
        form = layui.form;
        $('.downloadPro').click(function(){

            var check_accept_imgs ="${entry.checkAcceptImgs}";
            if(!isBlank(check_accept_imgs)){
               // url="technical/imgDownload";
               // window.open('http://192.168.2.24/sfimggroup/'+check_accept_imgs)
              //  var name ="${entry.traderName}-${entry.powerStationCode}-户用电站验收报告.";
                 location.href = '${commonStaticImgPath}' + check_accept_imgs;
                return
            }else{
                let hideSubmitForm = document.createElement("form");
                hideSubmitForm.id = "tempForm1";
                hideSubmitForm.method = "post";
                hideSubmitForm.action = "${ctx}/customerEntry/downLoadPDF";
                hideSubmitForm.target = "_blank";
                hideSubmitForm.appendChild(createHideInput("id", "${entry.id}"));
                hideSubmitForm.addEventListener('onsubmit', function(){
                    // this.openDownloadWindow(name);
                });
                document.body.appendChild(hideSubmitForm);
                hideSubmitForm.submit();
                document.body.removeChild(hideSubmitForm);

            }
        })

        function  createHideInput(name, value){
            let hideInput = document.createElement("input");
            hideInput.type = "hidden";
            hideInput.name = name;
            hideInput.value = value;
            return hideInput;
        };

       /* $('.imgsLi img').on('click', function () {
            layer.photos({
                photos: '.imgsLi',
                shadeClose: false,
                closeBtn: 2,
                anim: 0
            });
        });*/

    })



    function isBlank(val) {
        if (val == null || val == '' || val == undefined) {
            return true;
        }
        return false;
    }

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

