<%@ 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;
    }

    th {
      background-color: #f2f2f2;
    }
  </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 class="layui-col-xs12 form-box pt-10 pb-10">
        <div class="layui-inline layui-col-xs3">
          <label class="layui-form-label w-130">竣工单号：</label>
          <div class="layui-input-block ">
            <input type="text" autocomplete="off" disabled  class="layui-input" value="${info.columns.completion_no}">
          </div>
        </div>
        <div class="layui-inline layui-col-xs3">
          <label class="layui-form-label w-130">电站户数：</label>
          <div class="layui-input-block ">
            <input type="text" autocomplete="off" disabled  class="layui-input" value="${list.size()}">
          </div>
        </div>
<%--        <div class="layui-inline layui-col-xs3">--%>
<%--          <label class="layui-form-label w-130">已整改数量：</label>--%>
<%--          <div class="layui-input-block ">--%>
<%--            <input type="text" autocomplete="off" disabled  class="layui-input" value="">--%>
<%--          </div>--%>
<%--        </div>--%>
        <div class="layui-inline layui-col-xs3">
          <label class="layui-form-label w-130">整改完成时间：</label>
          <div class="layui-input-block ">
            <input type="text" autocomplete="off" disabled  class="layui-input" value="${info.columns.completion_time}">
          </div>
        </div>

        <div class="layui-inline layui-col-xs3">
          <label class="layui-form-label w-130">整改单号：</label>
          <div class="layui-input-block ">
            <input type="text" autocomplete="off" disabled  class="layui-input" value="${info.columns.rectification_no}">
          </div>
        </div>
        <div class="layui-inline layui-col-xs3">
          <label class="layui-form-label w-130">整改项数量：</label>
          <div class="layui-input-block ">
            <input type="text" autocomplete="off" disabled  class="layui-input" value="${info.columns.recount}">
          </div>
        </div>
        <div class="layui-inline layui-col-xs3">
          <label class="layui-form-label w-130">创建时间：</label>
          <div class="layui-input-block ">
            <input type="text" autocomplete="off" disabled  class="layui-input" value="${info.columns.create_time}">
          </div>
        </div>

      </div>
    </div>
    <div class="clear-both">
      <p class="layui-elem-quote" style="margin: 0px 0px 0px 10px">整改信息</p>
      <div style="width: 100%;">
        <c:forEach items="${list}" varStatus="vs" var="entry">
        <table class="layui-table materialTable" style="margin: 10px 10px 10px 10px;">
            <tr>
              <th width="10%">电站编号</th>
              <th width="90%" colspan="3">${entry.columns.power_station_code}</th>
            </tr>
            <tbody>
            <tr>
              <td width="10%">整改项</td>
              <td width="40%">整改前照片</td>
              <td width="10%">整改执行反馈</td>
              <td width="40%">整改后照片</td>
            </tr>
            <c:forEach items="${entry.columns.detail}" varStatus="vs" var="re">
              <tr>
                <td width="10%">${re.columns.rectification_term}</td>
                <td width="40%">
                  <div class="layui-input-block img-box" style="margin-left: 20px;">
                    <div style="display: flex;">
                      <div id="imgsDiv">
                        <c:if test="${not empty re.columns.rectification_before_img}">
                          <c:forEach var="img" items="${re.columns.rectification_before_img.split(',')}" varStatus="vs">
                            <div class="bj-img imgSpan">
                              <span class="layui-icon-close layui-icon" onclick="delImg(this,'uploader13')"></span>
                              <img src="${img}" height="700" width="1200">
                              <input type="hidden" name="rectificationBeforeImg" class="rectificationBeforeImg" value="${img}">
                            </div>
                            <c:set var="otherImgs1Count" value="${vs.count}"/>
                          </c:forEach>
                        </c:if>
                      </div>
                    </div>
                  </div>
                </td>
                <td width="10%">${re.columns.rectification_feedback}</td>
                <td width="40%">
                  <div class="layui-input-block img-box" style="margin-left: 20px;">
                    <div style="display: flex;">
                      <div id="imgsDiv22">
                        <c:if test="${not empty re.columns.rectification_after_img}">
                          <c:forEach var="img" items="${re.columns.rectification_after_img.split(',')}" varStatus="vs">
                            <div class="bj-img imgSpan">
                              <span class="layui-icon-close layui-icon" onclick="delImg(this,'uploader66')"></span>
                              <img src="${img}" height="700" width="1200">
                              <input type="hidden" name="rectificationAfterImg" class="rectificationAfterImg" value="${img}">
                            </div>
                            <c:set var="otherImgs1Count" value="${vs.count}"/>
                          </c:forEach>
                        </c:if>
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
            </c:forEach>
            </tbody>
          </c:forEach>
        </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;
  })





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

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

