<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">{{ riskMain.pId }}</van-col>
          </van-row>
          <van-row gutter="">
            <van-col span="7"
              ><span class="field-title">风险因素：</span></van-col
            >
            <van-col span="17">{{ riskMain.riskFactor }}</van-col>
          </van-row>
          <van-row gutter="">
            <van-col span="7"><span class="field-title">风险源：</span></van-col>
            <van-col span="17">{{ riskMain.riskSource }}</van-col>
          </van-row>
          <van-row gutter="">
            <van-col span="7"
              ><span class="field-title">事故类型：</span></van-col
            >
            <van-col span="17">{{ riskMain.accidentType }}</van-col>
          </van-row>

          <!-- 隐藏的字段 -->
          <div v-show="riskOpen">
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">风险等级：</span></van-col
              >
              <van-col span="17">{{ riskMain.riskLevel }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">风险部位：</span></van-col
              >
              <van-col span="17">{{ riskMain.emergencyMeasure }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">管控层级：</span></van-col
              >
              <van-col span="17">{{ riskMain.controlLevel }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">主责部门：</span></van-col
              >
              <van-col span="17">{{ riskMain.responsibilityDept }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">主责人员：</span></van-col
              >
              <van-col span="17">{{ riskMain.responsibilityMember }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">定级方式：</span></van-col
              >
              <van-col span="17">{{ riskMain.gradingMethod }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">定级方式(附件)：</span></van-col
              >
              <van-col span="17">
                <div class="enclosure" v-for="(item, index) in riskMain.riskFileList1" :key="index">
                  <a :href="item.filePath" target="_blank">{{item.fileName}}</a>
                </div>
              </van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">技术措施：</span></van-col
              >
              <van-col span="17">{{ riskMain.technicalMeasures }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">技术措施(附件)：</span></van-col
              >
              <van-col span="17">
                <div class="enclosure" v-for="(item, index) in riskMain.riskFileList2" :key="index">
                  <a :href="item.filePath" target="_blank">{{item.fileName}}</a>
                </div>
              </van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">管理措施：</span></van-col
              >
              <van-col span="17">{{ riskMain.managementMeasures }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">管理措施(附件)：</span></van-col
              >
              <van-col span="17">
                   <div class="enclosure" v-for="(item, index) in riskMain.riskFileList3" :key="index">
                  <a :href="item.filePath" target="_blank">{{item.fileName}}</a>
                </div>
              </van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">应急措施：</span></van-col
              >
              <van-col span="17">{{ riskMain.emergencyMeasure }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="7"
                ><span class="field-title">应急措施(附件)：</span></van-col
              >
              <van-col span="17">
                  <div class="enclosure" v-for="(item, index) in riskMain.riskFileList4" :key="index">
                  <a :href="item.filePath"  target="_blank">{{item.fileName}}</a>
                </div>
              </van-col>
            </van-row>
          </div>
        </van-cell-group>
        <!-- 展开 -->
        <div class="more" @click="riskReverse">
          {{ riskOpenText }}
        </div>
      </div>

      <div class="confirme-wrap" v-if="confirmList.length>0">
        <p>风险确认</p>
        <van-cell-group inset v-for="(item, index) in confirmList" :key="index" >
          <van-row gutter="">
            <van-col span="7"><span class="field-title">意见：</span></van-col>
            <van-col span="17">{{ item.confirmOpinion }}</van-col>
          </van-row>
          <van-row gutter="">
            <van-col span="7"
              ><span class="field-title">隐患确认信息：</span></van-col
            >
            <van-col span="17">{{ item.confirmResult == 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="riskLogList.length>0">
            <van-step v-for="(item, index) in riskLogList" :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="riskLogList.length == 0">暂无数据</div>
        </van-cell-group>
        <!-- 展开 -->
        <div class="more" @click="journalReverse" v-show="riskLogList.length>0">
          {{ journalOpenText }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LHeader from "@/components/header.vue";
import {getFun,postFun} from "@/service/table.js";
import { postriskDetail } from "@/service/risk";

export default {
  components: {
    LHeader
  },
  data() {
    return {
      id: "",
      text: "风险详情",
      riskOpen: false,
      riskOpenText: "展开 ▼",
      journalOpen: false,
      journalOpenText: "展开 ▼",
      superviseOpen: false,
      superviseOpenText: "展开 ▼",

      riskList: [
        {
          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: "张三"
        }
      ],
      riskMain:"",
      confirmList:[],
      riskLogList:[],
      journalList: []
    };
  },
  created() {
    this.id = this.$route.params.id;
    if (this.id) {
      this.postDetail();
    }
  },
  methods: {
    
    // 请求台账信息
    postDetail() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 0
      });
      postriskDetail(`/riskMain/riskDetailsApp/${this.id}`)
        .then(res => {
          this.$toast.clear();
          this.riskMain = res.data.riskMain
          this.confirmList = res.data.confirmList
          this.riskLogList = res.data.riskLogList
        })
        .catch(() => {
          this.$toast.clear();
          this.$toast.fail("加载失败,请稍后再试");
        });
    },

    // 上报信息显示或隐藏
    riskReverse() {
      this.riskOpen = !this.riskOpen;
      if (this.riskOpen) {
        this.riskOpenText = "收起 ▲";
      } else {
        this.riskOpenText = "展开 ▼";
      }
    },
    // 日志信息显示或隐藏
    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: 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;
    }
  }
  .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;
  }
}
</style>
