<%@ 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>
        html {
            background-color: #fff;
            padding-bottom: 50px;
        }
        .layui-tab-title{
            margin: 0 0 0 20px;
            border-color: #fff;
        }
        .layui-tab-content{
            margin: 0 0 0 20px;
        }
        .bj-img {
            margin-right: 0;
        }
        .array {
            margin-right: 5px;
        }
        .blank-img {
            background: url('${ctxPlugin}/static/imgs/blankImg.png') center center no-repeat;
            width: 80px;
            height: 80px;
            display: inline-block;
        }

        .materialTable td, th {
            text-align: center !important;
        }

        .download-link {
            display: inline-block;
            padding: 8px 16px;
            color: #007bff;
            text-decoration: none;
            border-radius: 4px;
        }
        .sl-img{
            width: 80px;
            height: 80px;
            border: 1px solid #ddd;
            float: left;
            margin-right: 10px;
            margin-bottom: 10px;
            position: relative;
        }
        .sl-img > img {
            width: 100%;
            height: 100%;
        }
        .sl-img > span {
            position: absolute;
            right: 0;
            bottom: 0;
            background-color: #adacac;
            width: 100%;
            height: 20px;
            line-height: 20px;
            text-align: center;
            color: #fff;
            cursor: pointer;
            display: block;
        }

        .file-container {
            display: flex;
            align-items: center;
        }

        .img-wrapper {
            margin-right: 10px; /* 调整图片和文件名之间的间距 */
        }

        .bj-img > span{
            z-index: 1;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="order-win layui-form" id="LAY_app">
        <div class="clear-both">
            <p class="layui-elem-quote" style="margin: 0px 0px 0px 10px">电站信息</p>
            <div style="width: 90%;">
                <table class="layui-table materialTable" style="margin: 10px 10px 10px 10px;">
                    <thead>
                    <tr>
                        <th>电站编号</th>
                        <th>产品名称</th>
                        <th>业务员</th>
                        <th>代理商</th>
                        <th>项目公司</th>
                        <th>电站状态</th>
                        <th>备案类型</th>
                    </tr>
                    </thead>
                    <tbody>
                        <c:forEach items="${list}" varStatus="vs" var="entry">
                        <tr>
                            <td>${entry.columns.power_station_code}</td>
                            <td>${entry.columns.project_name}</td>
                            <td>${entry.columns.creator}</td>
                            <td>${entry.columns.create_trader_name}</td>
                            <td>${entry.columns.project_company_name}</td>
                            <c:if test="${entry.columns.status eq 'a'}">
                                <td>已完成</td>
                            </c:if>
                            <c:if test="${entry.columns.filing_type eq '1'}">
                                <td>农户备案</td>
                            </c:if>
                            <c:if test="${entry.columns.filing_type eq '2'}">
                                <td>项目公司备案</td>
                            </c:if>
                        </tr>
                        </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="clear-both">
            <p class="layui-elem-quote" style="margin: 0px 0px 0px 10px">竣工信息</p>
            <div style="width: 90%;">
                <c:set var="indexNum" value="1"/>
                <table class="layui-table" style="margin: 10px 10px 10px 10px;">
                    <tr style="height: 100px">
                        <td width="15%"><i class="mark">*</i>质保承诺文件(1-15张)</td>
                        <td width="80%">
                            <div class="layui-input-block img-box" style="margin-left: 20px;">
                                <div style="display: flex;">
                                    <div id="imgsDiv2">
                                        <c:set var="otherImgs1Count" value="0"/>
                                        <c:if test="${not empty report.otherImgs1}">
                                            <c:forEach var="img" items="${report.otherImgs1.split(',')}" varStatus="vs">
                                                <div class="bj-img imgSpan">
                                                    <span class="layui-icon-close layui-icon" onclick="delImg(this,'uploader2')"></span>
                                                    <img src="${commonStaticImgPath}${img}" height="700" width="1200">
                                                    <input type="hidden" name="warrantyCommitmentFile" class="warrantyCommitmentFile" value="${img}">
                                                </div>
                                                <c:set var="otherImgs1Count" value="${vs.count}"/>
                                            </c:forEach>
                                        </c:if>
                                    </div>
                                    <div class="upload-container <c:if test="${otherImgs1Count >=15}">hide</c:if>" id="uploader2">
                                        <img src="" alt="img placeholder" id="warrantyCommitmentFile">
                                    </div>
                                </div>
                            </div>
                        </td>
                        <c:set var="indexNum" value="${indexNum+1}"/>
                    </tr>
                    <tr style="height: 100px">
                        <td width="15%"><i class="mark">*</i>竣工验收报告(1-15张)</td>
                        <td width="80%">
                            <div class="layui-input-block img-box" style="margin-left: 20px;">
                                <div style="display: flex;">
                                    <div id="imgsDiv3">
                                        <c:set var="otherImgs1Count" value="0"/>
                                        <c:if test="${not empty report.otherImgs1}">
                                            <c:forEach var="img" items="${report.otherImgs1.split(',')}" varStatus="vs">
                                                <div class="bj-img imgSpan">
                                                    <span class="layui-icon-close layui-icon" onclick="delImg(this,'uploader3')"></span>
                                                    <img src="${commonStaticImgPath}${img}" height="700" width="1200">
                                                    <input type="hidden" name="completionReport" class="completionReport" value="${img}">
                                                </div>
                                                <c:set var="otherImgs1Count" value="${vs.count}"/>
                                            </c:forEach>
                                        </c:if>
                                    </div>
                                    <div class="upload-container <c:if test="${completionReport >=15}">hide</c:if>" id="uploader3">
                                        <img src="" alt="img placeholder" id="completionReport">
                                    </div>
                                </div>
                            </div>
                        </td>
                        <c:set var="indexNum" value="${indexNum+1}"/>
                    </tr>
                    <tr style="height: 100px">
                        <td width="15%"><i class="mark">*</i>EL系统性能检测报告(1-15张)</td>
                        <td width="80%">
                            <div class="layui-input-block img-box" style="margin-left: 20px;">
                                <div style="display: flex;">
                                    <div id="imgsDiv4">
                                        <c:set var="otherImgs1Count" value="0"/>
                                        <c:if test="${not empty report.otherImgs1}">
                                            <c:forEach var="img" items="${report.otherImgs1.split(',')}" varStatus="vs">
                                                <div class="bj-img imgSpan">
                                                    <span class="layui-icon-close layui-icon" onclick="delImg(this,'uploader4')"></span>
                                                    <img src="${commonStaticImgPath}${img}" height="700" width="1200">
                                                    <input type="hidden" name="elReport" class="elReport" value="${img}">
                                                </div>
                                                <c:set var="otherImgs1Count" value="${vs.count}"/>
                                            </c:forEach>
                                        </c:if>
                                    </div>
                                    <div class="upload-container <c:if test="${elReport >=15}">hide</c:if>" id="uploader4">
                                        <img src="" alt="img placeholder" id="elReport">
                                    </div>
                                </div>
                            </div>
                        </td>
                        <c:set var="indexNum" value="${indexNum+1}"/>
                    </tr>
                    <tr style="height: 100px">
                        <td width="15%">现场抽查整改通知单(1-15张)</td>
                        <td width="80%">
                            <div class="layui-input-block img-box" style="margin-left: 20px;">
                                <div style="display: flex;">
                                    <div id="imgsDiv5">
                                        <c:set var="otherImgs1Count" value="0"/>
                                        <c:if test="${not empty report.otherImgs1}">
                                            <c:forEach var="img" items="${report.otherImgs1.split(',')}" varStatus="vs">
                                                <div class="bj-img imgSpan">
                                                    <span class="layui-icon-close layui-icon" onclick="delImg(this,'uploader5')"></span>
                                                    <img src="${commonStaticImgPath}${img}" height="700" width="1200">
                                                    <input type="hidden" name="noticeReport" class="noticeReport" value="${img}">
                                                </div>
                                                <c:set var="otherImgs1Count" value="${vs.count}"/>
                                            </c:forEach>
                                        </c:if>
                                    </div>
                                    <div class="upload-container <c:if test="${noticeReport >=15}">hide</c:if>" id="uploader5">
                                        <img src="" alt="img placeholder" id="noticeReport">
                                    </div>
                                </div>
                            </div>
                        </td>
                        <c:set var="indexNum" value="${indexNum+1}"/>
                    </tr>
                    <tr style="height: 100px">
                        <td width="15%">现场抽查整改回复单(1-15张)</td>
                        <td width="80%">
                            <div class="layui-input-block img-box" style="margin-left: 20px;">
                                <div style="display: flex;">
                                    <div id="imgsDiv6">
                                        <c:set var="otherImgs1Count" value="0"/>
                                        <c:if test="${not empty report.otherImgs1}">
                                            <c:forEach var="img" items="${report.otherImgs1.split(',')}" varStatus="vs">
                                                <div class="bj-img imgSpan">
                                                    <span class="layui-icon-close layui-icon" onclick="delImg(this,'uploader6')"></span>
                                                    <img src="${commonStaticImgPath}${img}" height="700" width="1200">
                                                    <input type="hidden" name="replyReport" class="replyReport" value="${img}">
                                                </div>
                                                <c:set var="otherImgs1Count" value="${vs.count}"/>
                                            </c:forEach>
                                        </c:if>
                                    </div>
                                    <div class="upload-container <c:if test="${otherImgs1Count >=15}">hide</c:if>" id="uploader6">
                                        <img src="" alt="img placeholder" id="replyReport">
                                    </div>
                                </div>
                            </div>
                        </td>
                        <c:set var="indexNum" value="${indexNum+1}"/>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="layui-form-item text-c operate-footer">
    <button type="button" class="layui-btn" id="save">提交</button>
    <button class="layui-btn layui-btn-primary" onclick="closeSelf()">取消</button>
</div>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.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', 'element', 'tableExt', 'jquery', 'layer', 'laypage', 'laydate', 'form','upload'], function () {
        $ = layui.$;
        tableExt = layui.tableExt;
        layer = layui.layer;
        laypage = layui.laypage;
        laydate = layui.laydate;
        form = layui.form;
        upload = layui.upload;
        table = tableExt.getLayTable();
        var element = layui.element;

        upload.render({
            elem: '#uploader2' //绑定元素   整体照片
            , multiple:true
            , url: '${ctx}/common/uploadFile' //上传接口
            , before: function (obj) {

            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader2", "imgsDiv2", "warrantyCommitmentFile",15);
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '#uploader3' //绑定元素   整体照片
            , multiple:true
            , url: '${ctx}/common/uploadFile' //上传接口
            , before: function (obj) {

            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader3", "imgsDiv3", "completionReport",15);
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '#uploader4' //绑定元素   整体照片
            , multiple:true
            , url: '${ctx}/common/uploadFile' //上传接口
            , before: function (obj) {

            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader4", "imgsDiv4", "elReport",15);
            }
            , error: function () {
                //请求异常回调
            }
        });

        upload.render({
            elem: '#uploader5' //绑定元素   整体照片
            , multiple:true
            , url: '${ctx}/common/uploadFile' //上传接口
            , before: function (obj) {

            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader5", "imgsDiv5", "noticeReport",15);
            }
            , error: function () {
                //请求异常回调
            }
        });

        upload.render({
            elem: '#uploader6' //绑定元素   整体照片
            , multiple:true
            , url: '${ctx}/common/uploadFile' //上传接口
            , before: function (obj) {

            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader6", "imgsDiv6", "replyReport",15);
            }
            , error: function () {
                //请求异常回调
            }
        });

        $("#save").click(function(){
            save();
        })

    })



    var saveFlag = false;
    function save() {
        if(saveFlag){
            return;
        }
        var warrantyCommitmentFile = [];
        $("input[name='warrantyCommitmentFile']").each(function(){
            warrantyCommitmentFile.push($(this).val());
        })
        if (warrantyCommitmentFile.length==0) {
            layer.msg("质保承诺文件不能为空");
            return;
        }
        var completionReport = [];
        $("input[name='completionReport']").each(function(){
            completionReport.push($(this).val());
        })
        if (completionReport.length==0) {
            layer.msg("竣工验收报告");
            return;
        }
        var elReport = [];
        $("input[name='elReport']").each(function(){
            elReport.push($(this).val());
        })
        if(elReport.length==0){
            layer.msg("EL系统性能检测报告不能为空");
            return;
        }
        var noticeReport = [];
        $("input[name='noticeReport']").each(function(){
            noticeReport.push($(this).val());
        })
        var replyReport = [];
        $("input[name='replyReport']").each(function(){
            replyReport.push($(this).val());
        })


        var checkRe = true;
        var checkKg = true;

        if(!checkRe){
            return;
        }
        if(!checkKg){
            return;
        }
        saveFlag = true;

        $.ajax({
            type: 'post',
            url: '${ctx}/completion/saveCompletionData',
            dataType: 'json',
            data: {
                entryId: '${entryId}',
                warrantyCommitmentFile: warrantyCommitmentFile.join(","),
                completionReport: completionReport.join(","),
                elReport: elReport.join(","),
                noticeReport: noticeReport.join(","),
                replyReport: replyReport.join(","),
            },
            success: function(data){
                if (data.code == "200") {
                    top.layer.msg("操作成功");
                    closeSelf();
                    parent.location.reload();
                } else {
                    layer.msg(data.errMsg);
                }
            },
            complete: function(){
                saveFlag = false;
            }
        });
    }

    function changeMaterialTab(type) {
        $('.materialTable').eq(type).removeClass('layui-hide').siblings('.materialTable').addClass('layui-hide');
    }

    function addImg(data, id, imgsDiv, classimg,count) {
        var imgCount=$("#" + imgsDiv).find(".imgSpan").length;
        if((imgCount+1)>=count){
            $("#" + id).hide();
        }
        var html = '<div class="bj-img imgSpan"><span class="layui-icon-close layui-icon" onclick="delImg(this,\'' + id + '\')"></span>';
        html += '<img src="${commonStaticImgPath}' + data + '" height="700" width="1200"/>';
        html += '<input type="hidden" name="' + classimg + '"  class="' + classimg + '" value="${commonStaticImgPath}' + data + '"/> </div>';
        $("#" + imgsDiv).append(html);
        //图片查看效果
        viewer.update();
    }

    function addVedio(data, id, imgsDiv, classimg,count) {
        var imgCount=$("#" + imgsDiv).find(".imgSpan").length;
        if((imgCount+1)>=count){
            $("#" + id).hide();
        }
        var html = '<div class="bj-img imgSpan"><span class="layui-icon-close layui-icon" onclick="delImg(this,\'' + id + '\')"></span>';
        html += '<video src="${commonStaticImgPath}' + data + '" width="150px" height="78px"></video>';
        html += '<input type="hidden" name="' + classimg + '"  class="' + classimg + '" value="' + data + '"/> </div>';
        $("#" + imgsDiv).append(html);
        //图片查看效果
        viewer.update();
    }

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

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

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

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

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

