<%@ 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%">质保承诺文件(1-15张)</td>
            <td width="80%">
              <div class="layui-input-block img-box" style="margin-left: 20px;">
                <div style="display: flex;">
                  <div id="warrantyCommitmentFileDiv">
                    <c:if test="${not empty compInfo.columns.warranty_commitment_file}">
                      <c:forEach var="quaim" items="${compInfo.columns.warranty_commitment_file.split(',')}"
                                 varStatus="vs">
                        <div class="bj-img imgSpan">
                          <img src="${quaim}" height="700"
                               width="1200">
                          <input type="hidden" class="warrantyCommitmentFile" value="${quaim}">
                        </div>
                      </c:forEach>
                    </c:if>
                    <c:if test="${empty compInfo.columns.warranty_commitment_file}">
                      <i class="blank-img"></i>
                    </c:if>
                  </div>
                </div>
              </div>
            </td>
          </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="completionReportDiv">
                    <c:if test="${not empty compInfo.columns.completion_report}">
                      <c:forEach var="quaim"
                                 items="${compInfo.columns.completion_report.split(',')}"
                                 varStatus="vs">
                        <div class="bj-img imgSpan">
                          <img src="${quaim}" height="700"
                               width="1200">
                          <input type="hidden" class="completionReport" value="${quaim}">
                        </div>
                      </c:forEach>
                    </c:if>
                    <c:if test="${empty compInfo.columns.completion_report}">
                      <i class="blank-img"></i>
                    </c:if>
                  </div>
                </div>
              </div>
            </td>
          </tr>
          <tr style="height: 100px">
            <td width="15%">EL系统性能检测报告(1-15张)</td>
            <td width="80%">
              <div class="layui-input-block img-box" style="margin-left: 20px;">
                <div style="display: flex;">
                  <div id="elReportDiv">
                    <c:if test="${not empty compInfo.columns.el_report}">
                      <c:forEach var="quaim"
                                 items="${compInfo.columns.el_report.split(',')}"
                                 varStatus="vs">
                        <div class="bj-img imgSpan">
                          <img src="${quaim}" height="700"
                               width="1200">
                          <input type="hidden" class="elReport" value="${quaim}">
                        </div>
                      </c:forEach>
                    </c:if>
                    <c:if test="${empty compInfo.columns.el_report}">
                      <i class="blank-img"></i>
                    </c:if>
                  </div>
                </div>
              </div>
            </td>
          </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="noticeReportDiv">
                    <c:if test="${not empty compInfo.columns.notice_report}">
                      <c:forEach var="quaim"
                                 items="${compInfo.columns.notice_report.split(',')}"
                                 varStatus="vs">
                        <div class="bj-img imgSpan">
                          <img src="${quaim}" height="700"
                               width="1200">
                          <input type="hidden" class="noticeReport" value="${quaim}">
                        </div>
                      </c:forEach>
                    </c:if>
                    <c:if test="${empty compInfo.columns.notice_report}">
                      <i class="blank-img"></i>
                    </c:if>
                  </div>
                </div>
              </div>
            </td>
          </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="replyReportDiv">
                    <c:if test="${not empty compInfo.columns.reply_report}">
                      <c:forEach var="quaim"
                                 items="${compInfo.columns.reply_report.split(',')}"
                                 varStatus="vs">
                        <div class="bj-img imgSpan">
                          <img src="${quaim}" height="700"
                               width="1200">
                          <input type="hidden" class="replyReport"
                                 value="${quaim}">
                        </div>
                      </c:forEach>
                    </c:if>
                    <c:if test="${empty compInfo.columns.reply_report}">
                      <i class="blank-img"></i>
                    </c:if>
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>
<div class="layui-form-item text-c operate-footer">
  <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 () {
        //请求异常回调
      }
    });

  })





  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>

