<%@ 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" />--%>
    <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;
        }
        .img>ul{
            float: left;
            list-style: none;
        }
        .img li{
            width: 60px;
            height: 60px;
            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">家庭光伏用电站验收报告</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="测试" readonly/></td>
            <td width="10%">产品名称</td>
            <td width="40%"><input type="text" class="form-input" readonly value="测试"/></td>
        </tr>
        <tr>
            <td>代理商名称</td>
            <td><input type="text" class="form-input" readonly value="测试IDS"/></td>
            <td>代理商电话</td>
            <td><input type="text" class="form-input" readonly value="测试卡机的"/></td>
        </tr>
        <tr>
            <td>业主姓名</td>
            <td><input type="text" class="form-input" readonly value="车科幻的可"/></td>
            <td>身份证号码</td>
            <td><input type="text" class="form-input" readonly value="卡萨丁就看"/></td>
        </tr>
        <tr>
            <td width="10%">联系电话</td>
            <td width="40%"><input type="text" class="form-input" readonly value="15855696652"/></td>
            <td width="10%">安装方式</td>
            <td width="40%"><input type="text" class="form-input" readonly value="送到公司是"/></td>
        </tr>
        <tr>
            <td width="10%">屋顶类型</td>
            <td width="40%"><input type="text" class="form-input" readonly value="胜多负少"/></td>
            <td width="10%">朝向角度</td>
            <td width="40%"><input type="text" class="form-input" readonly value="是否是"/></td>
        </tr>
        <tr>
            <td width="10%"><span class="red">*</span>安装组件规格</td>
            <td width="40%" class="pos-r"><input type="text" value="534" id="componentSpec"
                                                 class="form-input changeInput"/><span class="unit">W</span></td>
            <td width="10%"><span class="red">*</span>安装组件块数</td>
            <td width="40%" class="pos-r"><input type="text" value="534" id="componentNum"
                                                 class="form-input changeInput"/><span class="unit">块</span></td>
        </tr>
        <tr>
            <td width="10%"><span class="red">*</span>实际安装容量</td>
            <td width="90%" colspan="3" class="pos-r"><input type="text" id="capacity" value="34534534"
                                                             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="刚发的发广告和和方法和规范"/></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">

                            <ul>
                                <li class="imgsLi">
                                    <img src="${paimg}" alt="">
                                    <input type="hidden" class="imgValues" value="${report.nbqPlateImg}">
                                </li>
                            </ul>
                    </div>
                    <span>逆变器铭牌照片</span>
                </div>
            </td>
            <td colspan="2">
                <div>
                    <div class="img" id="txPlateImg">
                            <ul>
                                <li class="imgsLi">
                                    <img src="${commonStaticImgPaths}/png/20210615/9ab3c8f530434cff975166ba28b900ca/erwem.png" alt="">
                                </li>
                            </ul>
                    </div>
                    <span>通讯通模块铭牌照片</span>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div>
                    <div class="img" id="zjPlateImg">
                            <ul>
                                <li class="imgsLi">
                                    <img src="${commonStaticImgPaths}/png/20210615/9ab3c8f530434cff975166ba28b900ca/erwem.png" alt="">
                                </li>
                            </ul>
                    </div>
                    <span>组件铭牌照片</span>
                </div>
            </td>
            <td colspan="2">
                <div>
                    <div class="img" id="cxImg">
                            <ul>
                                <li class="imgsLi">
                                    <img src="${commonStaticImgPaths}/png/20210615/9ab3c8f530434cff975166ba28b900ca/erwem.png" alt="">
                                </li>
                            </ul>
                    </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">
                                <ul>
                                    <li class="imgsLi">
                                        <img src="${commonStaticImgPaths}/png/20210615/9ab3c8f530434cff975166ba28b900ca/erwem.png" alt="">
                                    </li>
                                </ul>
                    </div>
                    <span style="color: #000;">配重块照片/背拉照片/立柱固定方式照片/框架固定照片（最多4张）</span>
                </div>
            </td>
        </tr>
        <tr class="title">
            <td colspan="4">3、支架整体照片</td>
        </tr>
        <tr>
            <td colspan="4">
                <div>
                    <div class="img" id="zjImgs">
                                <ul>
                                    <li class="imgsLi">
                                        <img src="${commonStaticImgPaths}/png/20210615/9ab3c8f530434cff975166ba28b900ca/erwem.png" alt="">
                                        <input type="hidden" class="imgValues" value="${img}">
                                    </li>
                                </ul>
                    </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">
                                <ul>
                                    <li class="imgsLi">
                                        <img src="${commonStaticImgPaths}/png/20210615/9ab3c8f530434cff975166ba28b900ca/erwem.png" alt="">
                                    </li>
                                </ul>
                    </div>
                    <span>逆变器、并网箱整体安装照片/并网箱打开照片（共两张）</span>
                </div>
            </td>
            <td colspan="2">
                <div>
                    <div class="img" id="testImgs">
                                <ul>
                                    <li class="imgsLi">
                                        <img src="${paimg}/png/20210615/9ab3c8f530434cff975166ba28b900ca/erwem.png" alt="" >
                                    </li>
                                </ul>
                    </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>的认为UR有几个撒发大水撒</textarea></td>
        </tr>
        <tr class="form-textarea">
            <td>验收结论</td>
            <td colspan="3"><textarea id="conclusion"  class="form-input no-resize">是的发送到发放人热问问任人唯亲热味儿</textarea>
            </td>
        </tr>

    </table>

</div>

<script src="https://cdn.bootcss.com/jspdf/1.5.3/jspdf.debug.js"></script>
<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>
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'tableExt', 'jquery', 'layer','laypage','laydate','form'], function(){
        //layui.use(['table','layer','laypage','laydate','form'], function(){
        $ = layui.$;
        tableExt = layui.tableExt;
        layer = layui.layer;
        laypage = layui.laypage;
        laydate = layui.laydate;
        form = layui.form;
        table = tableExt.getLayTable();


        setTimeout("downPdfCreate(\"${project.name}\")", 2000)


        function getImgs(selector){
            var arr = [];
            $(selector).find('input.imgValues').each(function(){
                arr.push($(this).val());
            });
            return arr;
        }

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

        $('.uploadFile').change(function(){
            var $this = $(this);
            var file = $(this)[0].files[0];
            if(isBlank(file)){
                return;
            }
            var formData = new FormData();
            formData.append("file", file);
            $.ajax({
                url: "${ctx}/common/uploadFile",
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    var html = '<ul>' +
                        '         <li>' +
                        '            <img src="${commonStaticImgPath}' + data.path + '" alt="">' +
                        '            <input type="hidden" class="imgValues" value="' + data.path + '">'+
                        '          </li>' +
                        '        </ul>';
                    $this.closest('.add').before(html);
                    var length = $this.closest('.img').find('ul').length;
                    var maxNum = $this.attr('max-num');
                    if(!isBlank(maxNum) && length >= maxNum){
                        $this.closest('.add').hide();
                    }
                }
            });
        });

        var submitFlag = true;
        $('.submitBtn').click(function(){
            if(!submitFlag){
                return;
            }
            var ret = getFormData();
            if(!ret.success){
                return;
            }
            ret.entryId = '${entry.id}';
            submitFlag = false;
            $.ajax({
                type: 'post',
                url: '${ctx}/customerEntry/mergeAccept',
                dataType: 'json',
                data: ret,
                success: function(data){
                    afterSuccess(data);
                },
                complete: function(){
                    submitFlag = true;
                }
            });
        });

        var acceptFlag = true;
        $('.acceptBtn').click(function(){
            if(!acceptFlag){
                return;
            }
            var conclusion = $('#conclusion').val();
            if(isBlank(conclusion)){
                layer.msg('请输入验收结论', {icon: 2});
                return;
            }
            acceptFlag = false;
            $.ajax({
                type: 'post',
                url: '${ctx}/customerEntry/sureAccept',
                dataType: 'json',
                data: {
                    id: '${entry.id}',
                    conclusion: conclusion
                },
                success: function(data){
                    afterSuccess(data);
                },
                complete: function(){
                    acceptFlag = true;
                }
            });
        });

        var refuseAcceptFlag = true;
        $('.refuseAcceptBtn').click(function(){
            layer.open({
                type:1,
                title:'整改意见',
                area:['450px','250px'],
                content:$("#ideaDiv"),
                btn: ['确认', '取消'],
                btnAlign: 'c',
                yes: function(){
                    var idea = $('#idea').val();
                    if(isBlank(idea)){
                        layer.msg('请输入整改意见', {icon: 2});
                        return;
                    }
                    $.ajax({
                        type: 'post',
                        url: '${ctx}/customerEntry/notAccept',
                        dataType: 'json',
                        data: {
                            id: '${entry.id}',
                            idea: idea
                        },
                        success: function(data){
                            afterSuccess(data);
                        },
                        complete: function(){
                            refuseAcceptFlag = true;
                        }
                    });
                }
            })
        });

        function afterSuccess(data) {
            if (data.code == '200') {
                parent.layer.msg('操作成功', {icon: 1});
                closeSelf();
                parent.searchOrder();
            } else if (data.code == '501') {
                layer.msg(data.errMsg, {icon: 2});
            } else {
                layer.msg('操作失败', {icon: 2});
            }
        }
    })

    window.closeSelf = function() {
        var index = parent.layer.getFrameIndex(window.name);
        // window.parent.location.reload();//刷新父级页面
        parent.layer.close(index);//关闭当前页
    }

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

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

