<template>
  <div>
    <LHeader :text="text"></LHeader>
    <!-- 内容列表 -->
    <div class="con-list">
      <div class="cell-wrap">
        <p>风险上报</p>
        <van-cell-group inset v-for="(item, index) in reportList" :key="index">
          <van-row gutter="">
            <van-col span="7"
              ><span class="field-title">所属工程名称:</span></van-col
            >
            <van-col span="17">{{ item.project }}</van-col>
          </van-row>
          <van-row gutter="">
            <van-col span="7"
              ><span class="field-title">风险因素:</span></van-col
            >
            <van-col span="17">{{ item.subject }}</van-col>
          </van-row>
          <van-row gutter="">
            <van-col span="7"><span class="field-title">风险源:</span></van-col>
            <van-col span="17">{{ item.findTime }}</van-col>
          </van-row>
          <van-row gutter="">
            <van-col span="7"
              ><span class="field-title">事故类型:</span></van-col
            >
            <van-col span="17">{{ item.level }}</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">{{ item.range }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">风险部位:</span></van-col
              >
              <van-col span="17">{{ item.type }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">管控层级:</span></van-col
              >
              <van-col span="17">{{ item.dangerNum }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">主责部门:</span></van-col
              >
              <van-col span="17">{{ item.source }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">主责人员:</span></van-col
              >
              <van-col span="17">{{ item.source1 }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">定级方式:</span></van-col
              >
              <van-col span="17">{{ item.location }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">技术措施:</span></van-col
              >
              <van-col span="17">{{ item.dangerNum }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">技术措施(附件):</span></van-col
              >
              <van-col span="17">{{ item.describe }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">管理措施:</span></van-col
              >
              <van-col span="17">{{ item.uploaderImg }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">管理措施(附件):</span></van-col
              >
              <van-col span="17">{{ item.uploaderVideo }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">应急措施:</span></van-col
              >
              <van-col span="17">{{ item.expireTime }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">应急措施(附件):</span></van-col
              >
              <van-col span="17">{{ item.recPeople }}</van-col>
            </van-row>
          </div>
        </van-cell-group>
        <!-- 展开 -->
        <div class="more" @click="reportReverse">
          {{ reportOpenText }}
        </div>
      </div>


      <div class="journal-wrap">
        <p>日志信息</p>
        <van-cell-group inset v-for="(item, index) in reportList" :key="index">
          <van-steps direction="vertical" :active="999">
            <van-step>
              <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">首华建设项目</van-col>
                </van-row>
                <van-row>
                  <van-col span="5"
                    ><span class="field-title">节点</span></van-col
                  >
                  <van-col span="19">隐患上报</van-col>
                </van-row>
                <van-row>
                  <van-col span="5"
                    ><span class="field-title">结果：</span></van-col
                  >
                  <van-col span="19">通过</van-col>
                </van-row>
                <van-row>
                  <van-col span="5"
                    ><span class="field-title">部门：</span></van-col
                  >
                  <van-col span="19">首华建设项目部</van-col>
                </van-row>
                <van-row>
                  <van-col span="5"
                    ><span class="field-title">时间：</span></van-col
                  >
                  <van-col span="19">2021-10-26 16:30:00</van-col>
                </van-row>
              </div>
            </van-step>
          </van-steps>
        </van-cell-group>
        <!-- 展开 -->
        <div class="more" @click="journalReverse">
          {{ journalOpenText }}
        </div>
      </div>

      <div class="supervise-wrap">
        <p>督办信息</p>
        <van-cell-group inset v-for="(item, index) in reportList" :key="index">
          <div style="text-align: center;">暂无数据</div>
        </van-cell-group>
        <!-- 展开 -->
        <div class="more" @click="superviseReverse" v-show="false">
          {{ superviseOpenText }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LHeader from "@/components/header.vue";
export default {
  components: {
    LHeader
  },
  data() {
    return {
      text: "风险确认详情",
      reportOpen: false,
      reportOpenText: "展开 ▼",
      journalOpen: false,
      journalOpenText: "展开 ▼",
      superviseOpen: false,
      superviseOpenText: "展开 ▼",

      reportList: [
        {
          project: "朝阳区和平街14区简易住宅楼改造项目",
          subject: "临时用电施工组织设计未对盾构施工用电进行专项说明。",
          findTime: "2021-10-26 16:30:00",
          level: "一般隐患A",
          range: "城市轨道交通工程",
          type: "临时用电",
          dangerNum: "0-03-06-0003",
          source: "违规活动",
          source1: "人的因素",
          location: "临时用电",
          describe: "没按规定放置插排",
          uploaderImg: [],
          uploaderVideo: [],
          expireTime: "2021-10-26 16:30:00",
          recPeople: "张三"
        }
      ],

      journalList: []
    };
  },
  mounted() {},
  methods: {
    // 上报信息显示或隐藏
    reportReverse() {
      this.reportOpen = !this.reportOpen;
      if (this.reportOpen) {
        this.reportOpenText = "收起 ▲";
      } else {
        this.reportOpenText = "展开 ▼";
      }
    },
    // 日志信息显示或隐藏
    journalReverse() {
      this.journalOpen = !this.journalOpen;
      if (this.journalOpen) {
        //   显示所有数据
        this.journalOpenText = "收起 ▲";
      } else {
        //   只渲染一条数据
        this.journalOpenText = "展开 ▼";
      }
    },
    // 督办信息显示或隐藏
    superviseReverse() {
      this.superviseOpen = !this.superviseOpen;
      if (this.superviseOpen) {
        //   显示所有数据
        this.superviseOpenText = "收起 ▲";
      } else {
        //   只渲染一条数据
        this.superviseOpenText = "展开 ▼";
      }
    }
  }
};
</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;
    }
  }
  .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;
  }
}
</style>
