<template>
  <div>
    <div v-if="videoUrl">
        <custom-player :videoUrl="videoUrl" :videoImg="videoImg" @close="videoUrl=''"/>
    </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.id }}</van-col>
          </van-row>
          <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.hdLev }}</van-col>
          </van-row>
          <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>

          <!-- 隐藏的字段 -->
          <div v-show="reportOpen">
            <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.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="" v-if="hdReport.hdPictureList">
              <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"  @click="imagePreview(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"
                  style="position:relative"
                >
                  <van-icon name="play" size="1rem"  style="border:solid 3px black;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)"/> 
                  <video :src="item.filePath" @click="videoUrl=item.filePath"/>
                </div>
              </van-col>
            </van-row>
            <van-row gutter="" v-if="hdReport.hdExpirationTime">
              <van-col span="7"
                ><span class="field-title">隐患到期时间：</span></van-col
              >
              <van-col span="17">{{ hdReport.hdExpirationTime }}</van-col>
            </van-row>
            <van-row gutter="" v-if="hdReport.rectificationUser">
              <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>
      <!-- {{hdConfirm}} -->
      <div class="journal-wrap" v-if="hdConfirm.length > 0">
        <p>隐患认定</p>
        <van-cell-group inset>
          <van-steps direction="vertical" :active="99999">
            <van-step v-for="(item, index) in hdConfirm" :key="index">
              <div class="step-wrap">
                <van-row>
                  <van-col span="24"
                    ><div class="info-title">隐患认定</div></van-col
                  >
                </van-row>
                <van-row gutter="" v-if="item.rectificationUser">
                  <van-col span="7"
                    ><span class="field-title">隐患整改人：</span></van-col
                  >
                  <van-col span="17">{{ item.rectificationUser }}</van-col>
                </van-row>
                <van-row gutter="" v-if="item.rectificationReview">
                  <van-col span="7"
                    ><span class="field-title">隐患复查人：</span></van-col
                  >
                  <van-col span="17">{{ item.rectificationReview }}</van-col>
                </van-row>
                <van-row gutter="" v-if="item.endTime">
                  <van-col span="8"
                    ><span class="field-title">整改截止时间：</span></van-col
                  >
                  <van-col span="16">{{ item.endTime }}</van-col>
                </van-row>
                <van-row gutter="">
                  <van-col span="4"
                    ><span class="field-title">意见：</span></van-col
                  >
                  <van-col span="20">{{ item.confirmOpinion }}</van-col>
                </van-row>
                <van-row gutter="">
                  <van-col span="9"
                    ><span class="field-title">隐患确认信息：</span></van-col
                  >
                  <van-col span="15">{{
                    item.confirmResult == 0 ? "退回" : "通过"
                  }}</van-col>
                </van-row>
              </div>
            </van-step>
          </van-steps>
        </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="6"
                    ><span class="field-title">操作人：</span></van-col
                  >
                  <van-col span="18">{{ item.userName }}</van-col>
                </van-row>
                <van-row>
                  <van-col span="6"
                    ><span class="field-title">结果：</span></van-col
                  >
                  <van-col span="18">{{
                    item.isResult == 1 ? "通过" : "退回"
                  }}</van-col>
                </van-row>
                <van-row>
                  <van-col span="6"
                    ><span class="field-title">部门：</span></van-col
                  >
                  <van-col span="18">{{ item.deptName }}</van-col>
                </van-row>
                <van-row>
                  <van-col span="6"
                    ><span class="field-title">时间：</span></van-col
                  >
                  <van-col span="18">{{ item.createTime }}</van-col>
                </van-row>
                <van-row v-if="item.thinkHdLev">
                  <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"  @click="imagePreview(itemTwo.filePath)"/>
              </div>
            </van-col>
          </van-row>
          <van-row gutter="" v-if="item.hdVideoList">
            <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" @click="videoUrl=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="" v-if="item.hdPictureList">
            <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" @click="imagePreview(itemTwo.filePath)"/>
              </div>
            </van-col>
          </van-row>

          <van-row gutter="" v-if="item.reviewDetails">
            <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">
                      {{ item.createTime }}
                    </div></van-col
                  >
                </van-row>
                <van-row>
                  <van-col span="6"
                    ><span class="field-title">操作人：</span></van-col
                  >
                  <van-col span="18">{{ item.userName }}</van-col>
                </van-row>
                <van-row>
                  <van-col span="6"
                    ><span class="field-title">节点：</span></van-col
                  >
                  <van-col span="18">{{ item.logNode }}</van-col>
                </van-row>
                <van-row>
                  <van-col span="6"
                    ><span class="field-title">结果：</span></van-col
                  >
                  <van-col span="18">{{ item.logResult }}</van-col>
                </van-row>
                <van-row>
                  <van-col span="6"
                    ><span class="field-title">部门：</span></van-col
                  >
                  <van-col span="18">{{ item.deptName }}</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="6"
                    ><span class="field-title">操作人：</span></van-col
                  >
                  <van-col span="18">{{ item.userName }}</van-col>
                </van-row>
                <van-row>
                  <van-col span="6"
                    ><span class="field-title">时间：</span></van-col
                  >
                  <van-col span="18">{{ item.createTime }}</van-col>
                </van-row>
                <van-row>
                  <van-col span="6"
                    ><span class="field-title">部门：</span></van-col
                  >
                  <van-col span="18">{{ item.deptName }}</van-col>
                </van-row>
                <van-row>
                  <van-col span="6"
                    ><span class="field-title">结果：</span></van-col
                  >
                  <van-col span="18">{{ 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 { getFun, postFun } from "@/service/table.js";
import {ImagePreview} from 'vant';
import { standBookDetail, deal } from "@/service/danger";
import customPlayer from "@/components/video"
export default {
  components: {
    LHeader,
    customPlayer
  },
  data() {
    return {
      videoImg:'12',
      // 视屏播放
      videoUrl:'',
      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() {
    if (this.$route.params.detailTitle) {
      this.text = this.$route.params.detailTitle;
    }
    this.id = this.$route.params.id;
    if (this.id) {
      this.postDetail();
    }
  },
  methods: {
    imagePreview(item){
      ImagePreview({closeable:true,images:[item]})
    },
    // 请求台账信息
    postDetail() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 0,
      });
      (this.$route.params.method == "get" ? getFun : postFun)(
        `${
          this.$route.params.api
            ? this.$route.params.api
            : "/hdreport/hdDetailsApp/"
        }${this.id}`
      )
        .then((res) => {
          this.$toast.clear();
          this.hdReport = res.data.hdReport;
          this.hdLogListAll = res.data.hdConfirm;
          this.hdConfirm = this.hdLogListAll.slice(-1);
          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((err) => {
          console.log(err);
          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 = "收起 ▲";
        // 显示所有数据
        this.hdConfirm = this.hdLogListAll;
      } else {
        this.confirmOpenText = "展开 ▼";
        // 只显示第一个数据
        this.hdConfirm = this.hdLogListAll.slice(-1);
      }
    },
    // 重大隐患信息显示或隐藏
    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: none;
    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: none;
  }
  .field-title {
    color: black;
    font-weight: none;
  }
  .more {
    position: absolute;
    bottom: 0.32rem;
    right: 15px;
    color: #2a80f7;
    font-weight: none;
    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;
    overflow: hidden;
    // video {
    //   width: 2.666667rem;
    //   height: 2.666667rem;
    // }
  }
}

// 调整播放器样式
.video-js .vjs-icon-placeholder {
  width: 100%;
  height: 100%;
  overflow: hidden;
  //  display: block;
}
.vjs_video_1251-dimensions.vjs-fluid {
  padding-top: 4.25%;
}
</style>
