<template>
  <div>
    <LHeader :text="text"></LHeader>
    <!-- 内容列表 -->
    <div class="con-list">
      <div class="cell-wrap">
        <p>隐患上报</p>
        <van-cell-group inset>
          <van-row gutter="">
            <van-col span="7"
              ><span class="field-title">所属工程名称:</span></van-col
            >
            <van-col span="17">{{ hdReport.proId }}</van-col>
          </van-row>
          <van-row gutter="">
            <van-col span="7"
              ><span class="field-title">隐患项目名称:</span></van-col
            >
            <van-col span="17">{{ hdReport.hdProjectName }}</van-col>
          </van-row>
          <van-row gutter="">
            <van-col span="7"
              ><span class="field-title">隐患发现时间:</span></van-col
            >
            <van-col span="17">{{ hdReport.hdDiscoveryTime }}</van-col>
          </van-row>
          <van-row gutter="">
            <van-col span="7"
              ><span class="field-title">隐患级别:</span></van-col
            >
            <van-col span="17">{{ hdReport.hdLev }}</van-col>
          </van-row>

          <!-- 隐藏的字段 -->
          <div v-show="reportOpen">
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">试用范围:</span></van-col
              >
              <van-col span="17">{{ hdReport.hdRange }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">隐患类型:</span></van-col
              >
              <van-col span="17">{{ hdReport.hdType }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">隐患项目编号</span>:</van-col
              >
              <van-col span="17">{{ hdReport.hdProjectId }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">风险源:</span></van-col
              >
              <van-col span="17">{{ hdReport.dangerSource }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">风险源因素:</span></van-col
              >
              <van-col span="17">{{ hdReport.dangerId }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">检查部位:</span></van-col
              >
              <van-col span="17">{{ hdReport.hdPosition }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">隐患描述:</span></van-col
              >
              <van-col span="17">{{ hdReport.hdDescribe }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">隐患照片:</span></van-col
              >
              <van-col span="17">
                <div
                  class="detail_pic"
                  v-for="(item, index) in hdReport.hdPictureList"
                  :key="index"
                >
                  <van-image width="100" height="100" :src="item.filePath" />
                </div>
              </van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">隐患视频:</span></van-col
              >
              <van-col span="17">
                <div
                  class="detail_video"
                  v-for="(item, index) in hdReport.hdVideoList"
                  :key="index"
                >
                  <video :src="item.filePath"></video>
                </div>
              </van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">隐患到期时间:</span></van-col
              >
              <van-col span="17">{{ hdReport.hdExpirationTime }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">隐患整改人:</span></van-col
              >
              <van-col span="17">{{ hdReport.rectificationUser }}</van-col>
            </van-row>
          </div>
        </van-cell-group>
        <!-- 展开 -->
        <div class="more" @click="reportReverse">
          {{ reportOpenText }}
        </div>
      </div>

      <div class="confirm-wrap" v-if="hdConfirm">
        <p>隐患认定</p>
        <van-cell-group inset>
          <van-row gutter="">
            <van-col span="7"
              ><span class="field-title">隐患整改人:</span></van-col
            >
            <van-col span="17">{{ hdConfirm.rectificationUser }}</van-col>
          </van-row>
          <van-row gutter="">
            <van-col span="7"
              ><span class="field-title">隐患复查人:</span></van-col
            >
            <van-col span="17">{{ hdConfirm.rectificationReview }}</van-col>
          </van-row>
          <van-row gutter="">
            <van-col span="7"
              ><span class="field-title">整改截止时间:</span></van-col
            >
            <van-col span="17">{{ hdConfirm.endTime }}</van-col>
          </van-row>
          <van-row gutter="">
            <van-col span="7"><span class="field-title">意见:</span></van-col>
            <van-col span="17">{{ hdConfirm.confirmOpinion }}</van-col>
          </van-row>

          <!-- <div v-show="confirmOpen">hdMajorApproveList
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">隐患确认信息:</span></van-col
              >
              <van-col span="17">{{ hdConfirm.confirmOpinion }}</van-col>
            </van-row>
          </div> -->
        </van-cell-group>
        <!-- <div class="more" @click="confirmReverse">
          {{ confirmOpenText }}
        </div> -->
      </div>

      <div class="journal-wrap" v-if="hdMajorApproveList.length > 0">
        <p>审批信息</p>
        <van-cell-group inset>
          <van-steps
            direction="vertical"
            :active="99999"
          >
            <van-step v-for="(item, index) in hdMajorApproveList" :key="index">
              <div class="step-wrap">
                <van-row>
                  <van-col span="24"
                    ><div class="info-title">审批信息</div></van-col
                  >
                </van-row>
                <van-row>
                  <van-col span="5"
                    ><span class="field-title">审批人：</span></van-col
                  >
                  <van-col span="19">{{ item.userName }}</van-col>
                </van-row>
                <van-row>
                  <van-col span="5"
                    ><span class="field-title">结果：</span></van-col
                  >
                  <van-col span="19">{{ item.isResult }}</van-col>
                </van-row>
                <van-row>
                  <van-col span="5"
                    ><span class="field-title">部门：</span></van-col
                  >
                  <van-col span="19">{{ item.deptName }}</van-col>
                </van-row>
                <van-row>
                  <van-col span="5"
                    ><span class="field-title">时间：</span></van-col
                  >
                  <van-col span="19">{{ item.createTime }}</van-col>
                </van-row>
                <van-row>
                  <van-col span="9"
                    ><span class="field-title">认为隐患级别：</span></van-col
                  >
                  <van-col span="10
                  ">{{ item.thinkHdLev }}</van-col>
                </van-row>
                <van-row v-if="item.details">
                  <van-col span="8"
                    ><span class="field-title">审批意见：</span></van-col
                  >
                  <van-col span="16
                  ">{{ item.details }}</van-col>
                </van-row>
              </div>
            </van-step>
          </van-steps>
        </van-cell-group>
        <!-- 展开 -->
        <div class="more" @click="majorReverse" v-show="hdMajorApproveList.length > 0">
          {{ majorOpenText }}
        </div>
      </div>

      <div class="change-wrap" v-if="hdRectificationList.length > 0">
        <p>隐患整改</p>
        <van-cell-group
          inset
          v-for="(item, index) in hdRectificationList"
          :key="index"
        >
          <van-row gutter="">
            <van-col span="7"
              ><span class="field-title">整改详情描述:</span></van-col
            >
            <van-col span="17">{{ item.details }}</van-col>
          </van-row>
          <van-row gutter="">
            <van-col span="7"
              ><span class="field-title">隐患照片:</span></van-col
            >
            <van-col span="17">
              <div
                class="detail_pic"
                v-for="(itemTwo, index) in item.hdPictureList"
                :key="index"
              >
                <van-image width="100" height="100" :src="itemTwo.filePath" />
              </div>
            </van-col>
          </van-row>
          <van-row gutter="">
            <van-col span="7"
              ><span class="field-title">隐患视频:</span></van-col
            >
            <van-col span="17">
              <div
                class="detail_video"
                v-for="(itemTwo, index) in item.hdVideoList"
                :key="index"
              >
                <video :src="itemTwo.filePath"></video>
              </div>
            </van-col>
          </van-row>
          <van-row gutter="">
            <van-col span="7"
              ><span class="field-title">创建时间:</span></van-col
            >
            <van-col span="17">{{ item.creatTime }}</van-col>
          </van-row>
        </van-cell-group>
      </div>

      <div class="review-wrap" v-if="hdReviewList.length > 0">
        <p>整改复查</p>
        <van-cell-group
          inset
          v-for="(item, index) in hdReviewList"
          :key="index"
        >
          <van-row gutter="">
            <van-col span="7"
              ><span class="field-title">隐患照片:</span></van-col
            >
            <van-col span="17">
              <div
                class="detail_pic"
                v-for="(itemTwo, index) in item.hdPictureList"
                :key="index"
              >
                <van-image width="100" height="100" :src="itemTwo.filePath" />
              </div>
            </van-col>
          </van-row>

          <van-row gutter="">
            <van-col span="7"
              ><span class="field-title">详情描述:</span></van-col
            >
            <van-col span="17">{{ item.reviewDetails }}</van-col>
          </van-row>

          <van-row gutter="">
            <van-col span="7"
              ><span class="field-title">复查结果:</span></van-col
            >
            <van-col span="17">{{
              item.reviewResult == 1 ? "合格" : "不合格"
            }}</van-col>
          </van-row>
        </van-cell-group>
      </div>

      <div class="journal-wrap">
        <p>日志信息</p>
        <van-cell-group inset>
          <van-steps
            direction="vertical"
            :active="99999"
            v-if="hdLogList.length > 0"
          >
            <van-step v-for="(item, index) in hdLogList" :key="index">
              <div class="step-wrap">
                <van-row>
                  <van-col span="24"
                    ><div class="info-title">日志信息</div></van-col
                  >
                </van-row>
                <van-row>
                  <van-col span="5"
                    ><span class="field-title">审批人：</span></van-col
                  >
                  <van-col span="19">{{ item.userName }}</van-col>
                </van-row>
                <van-row>
                  <van-col span="5"
                    ><span class="field-title">节点：</span></van-col
                  >
                  <van-col span="19">{{ item.logNode }}</van-col>
                </van-row>
                <van-row>
                  <van-col span="5"
                    ><span class="field-title">结果：</span></van-col
                  >
                  <van-col span="19">{{ item.logResult }}</van-col>
                </van-row>
                <van-row>
                  <van-col span="5"
                    ><span class="field-title">部门：</span></van-col
                  >
                  <van-col span="19">{{ item.deptName }}</van-col>
                </van-row>
                <van-row>
                  <van-col span="5"
                    ><span class="field-title">时间：</span></van-col
                  >
                  <van-col span="19">{{ item.createTime }}</van-col>
                </van-row>
              </div>
            </van-step>
          </van-steps>
          <div style="text-align: center;" v-if="hdLogList.length == 0">
            暂无数据
          </div>
        </van-cell-group>
        <!-- 展开 -->
        <div class="more" @click="journalReverse" v-show="hdLogList.length > 0">
          {{ journalOpenText }}
        </div>
      </div>

      <div class="supervise-wrap">
        <p>督办信息</p>
        <van-cell-group inset>
          <van-steps
            direction="vertical"
            :active="99999"
            v-if="instructionsList.length > 0"
          >
            <van-step v-for="(item, index) in instructionsList" :key="index">
              <div class="step-wrap">
                <van-row>
                  <van-col span="24"
                    ><div class="info-title">督办信息</div></van-col
                  >
                </van-row>
                <van-row>
                  <van-col span="5"
                    ><span class="field-title">审批人：</span></van-col
                  >
                  <van-col span="19">{{ item.userName }}</van-col>
                </van-row>
                <van-row>
                  <van-col span="5"
                    ><span class="field-title">时间：</span></van-col
                  >
                  <van-col span="19">{{ item.createTime }}</van-col>
                </van-row>
                <van-row>
                  <van-col span="5"
                    ><span class="field-title">部门：</span></van-col
                  >
                  <van-col span="19">{{ item.deptName }}</van-col>
                </van-row>
                <van-row>
                  <van-col span="5"
                    ><span class="field-title">结果：</span></van-col
                  >
                  <van-col span="19">{{ item.instructionsContent }}</van-col>
                </van-row>
              </div>
            </van-step>
          </van-steps>

          <div style="text-align: center;" v-if="instructionsList.length == 0">
            暂无数据
          </div>
        </van-cell-group>
        <!-- 展开 -->
        <div
          class="more"
          @click="superviseReverse"
          v-show="instructionsList.length > 0"
        >
          {{ superviseOpenText }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LHeader from "@/components/header.vue";
import { standBookDetail } from "@/service/danger";
export default {
  components: {
    LHeader
  },
  data() {
    return {
      id: "",
      text: "隐患历史台账详情",
      reportOpen: false,
      reportOpenText: "展开 ▼",
      journalOpen: false,
      journalOpenText: "展开 ▼",
      superviseOpen: false,
      superviseOpenText: "展开 ▼",
      confirmOpen: false,
      confirmOpenText: "展开 ▼",
      majorOpen: false,
      majorOpenText: "展开 ▼",

      hdReport: "",
      hdConfirm: "",
      hdMajorApproveList: [], // 重大隐患审批
      beifenhdMajorList: [],
      hdRectificationList: [],
      hdReviewList: [],
      hdLogList: [],
      beifenhdLogList: [],
      instructionsList: [],
      beifeninstructionsList: []
    };
  },
  created() {
    this.id = this.$route.params.id;
    if (this.id) {
      this.postDetail();
    }
  },
  methods: {
    // 请求台账信息
    postDetail() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 0
      });
      standBookDetail(`/hdreport/hdDetailsApp/${this.id}`)
        .then(res => {
          this.$toast.clear();
          this.hdReport = res.data.hdReport;
          this.hdConfirm = res.data.hdConfirm;
          this.hdRectificationList = res.data.hdRectificationList;
          this.hdReviewList = res.data.hdReviewList;
          this.beifenhdMajorList = res.data.hdMajorApproveList;
          this.hdMajorApproveList = this.beifenhdMajorList.slice(-1);
          this.beifenhdLogList = res.data.hdLogList;
          this.hdLogList = this.beifenhdLogList.slice(-1);
          this.beifeninstructionsList = res.data.instructionsList;
          this.instructionsList = this.beifeninstructionsList.slice(-1);
        })
        .catch(() => {
          this.$toast.clear();
          this.$toast.fail("加载失败,请稍后再试");
        });
    },

    // 上报信息显示或隐藏
    reportReverse() {
      this.reportOpen = !this.reportOpen;
      if (this.reportOpen) {
        this.reportOpenText = "收起 ▲";
      } else {
        this.reportOpenText = "展开 ▼";
      }
    },
    // 隐患认定显示或隐藏
    confirmReverse() {
      this.confirmOpen = !this.confirmOpen;
      if (this.confirmOpen) {
        this.confirmOpenText = "收起 ▲";
      } else {
        this.confirmOpenText = "展开 ▼";
      }
    },

    // 重大隐患信息显示或隐藏
    majorReverse() {
      this. majorOpen = !this. majorOpen;
      if (this. majorOpen) {
        //   显示所有数据
        this. majorOpenText = "收起 ▲";
        // 显示所有数据
        this.hdMajorApproveList = this.beifenhdMajorList;
      } else {
        this. majorOpenText = "展开 ▼";
        // 只显示第一个数据
        this.hdMajorApproveList = this.beifenhdMajorList.slice(-1);
      }
    },

    // 日志信息显示或隐藏
    journalReverse() {
      this.journalOpen = !this.journalOpen;
      if (this.journalOpen) {
        //   显示所有数据
        this.journalOpenText = "收起 ▲";
        // 显示所有数据
        this.hdLogList = this.beifenhdLogList;
      } else {
        this.journalOpenText = "展开 ▼";
        // 只显示第一个数据
        this.hdLogList = this.beifenhdLogList.slice(-1);
      }
    },
    // 督办信息显示或隐藏
    superviseReverse() {
      this.superviseOpen = !this.superviseOpen;
      if (this.superviseOpen) {
        //   显示所有数据
        this.superviseOpenText = "收起 ▲";
        this.instructionsList = this.beifeninstructionsList;
      } else {
        //   只渲染一条数据
        this.superviseOpenText = "展开 ▼";
        this.instructionsList = this.beifeninstructionsList.slice(-1);
      }
    }
  }
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
.con-list {
  padding: 10px 10px 0.533333rem;
  background-color: #f0f1f5;
  .cell-wrap {
    position: relative;
  }
  p {
    font-size: 0.4rem;
    font-weight: 600;
    padding-left: 0.16rem;
    margin: 0.186667rem 0;
    color: #7f7f7f;
  }
  .van-cell-group--inset {
    margin: 0;
    margin-bottom: 10px;
    padding: 10px;
    font-size: 13px;
    position: relative;
    .van-row {
      margin-bottom: 0.133333rem;
      line-height: 0.64rem;
    }
  }
  .confirm-wrap {
    position: relative;
  }
  .journal-wrap {
    position: relative;
  }
  .supervise-wrap {
    position: relative;
  }
  .info-title {
    color: #2980f7;
    font-weight: bolder;
  }
  .field-title {
    color: black;
    font-weight: bolder;
  }
  .more {
    position: absolute;
    bottom: 0.32rem;
    right: 15px;
    color: #2a80f7;
    font-weight: bolder;
    z-index: 99;
  }
  .detail_pic {
    margin-right: 0.266667rem;
    float: left;
  }
  .detail_video {
    width: 2.666667rem;
    height: 2.666667rem;
    margin-right: 0.266667rem;
    float: left;
    video {
      width: 2.666667rem;
      height: 2.666667rem;
    }
  }
}
</style>
