<template>
  <div class="wrap">
    <van-sticky offset-top="0">
      <LHeader :text="text"></LHeader>
    </van-sticky>
    <div class="section">
      <van-tabs v-model="activeName" color="#2980f7" animated @click="onClick">
        <van-tab title="固有风险信息" name="a">
          <TabDetail :InherentRisk="InherentRisk"/>
        </van-tab>
        <van-tab title="现状风险" name="b">
          <div class="quolist">
            <van-cell-group style="padding: 10px;box-sizing: border-box;background-color: #fff;margin: 8px;border-radius: 10px;" v-for="(item, index) in quoRiskList" :key="index" @click="goDetail(item)">
              <div style="font-size: 0.45rem;padding: 5px 0;">
                {{ item.name }}
              </div>
              <van-row gutter="4">
                <van-col span="17">
                  <van-row gutter="">
                    <van-col span="9">风险等级：</van-col>
                    <van-col span="15">{{ item.level }}</van-col>
                  </van-row>
                  <van-row gutter="">
                    <van-col span="9">创建时间：</van-col>
                    <van-col span="15">{{
                      timestampToTimes(item.createTime)
                    }}</van-col>
                  </van-row>
                  <van-row gutter="">
                    <van-col span="9">风险因素：</van-col>
                    <van-col span="15">{{
                      item.factor
                    }}</van-col>
                  </van-row>
                </van-col>
                <van-col span="7">
                  <van-row>
                    {{ item.state }}
                  </van-row>
                  <van-row type="flex" style="flex-direction: column;align-items: center;">
                    <van-col>
                      <van-image round width="34" height="34" src="http://rongtongpc.censoft.com.cn/dev-api/profile/upload/2023/07/08/xianyou.png" />
                    </van-col>
                    <van-col>
                      {{ item.userName }}
                    </van-col>
                  </van-row>
                </van-col>
              </van-row>
            </van-cell-group>
          </div>
        </van-tab>
        <van-tab title="四色图" name="c">
          <drawCanvas :isView="true"/>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import LHeader from "@/components/header.vue";
import drawCanvas from '@/views/drawCanvas/riskView.vue'
import TabDetail from "./tabDetail.vue"
import { getFun, postFun } from "@/service/table.js";
import { timestampToTime } from "@/utils/format";
export default {
  name: 'taskDetail',
  data() {
    return {
      text: "固有风险列表",
      activeName: 'a',
      quoRiskList: [],//现状风险列表
      InherentRisk: {},//固有风险
      inherentId: ''
    }
  },
  components: {
    LHeader,
    drawCanvas,
    TabDetail
  },
  created() {
    this.inherentId = this.$route.params.id
  },
  mounted() {
    this.getInherentRiskList(this.$route.params.id)
    this.getQuoRiskList(this.$route.params.id)
  },
  methods: {
    getInherentRiskList(inherentId){
      getFun(`/risk/plan/inherent/details/${inherentId}`).then(res=>{
          this.InherentRisk= res.data
      })
    },
    getQuoRiskList(inherentId) {
      getFun(`/risk/plan/existing/list/${inherentId}`).then(res => {
        this.quoRiskList = res.data
      })
    },
    timestampToTimes(time) {
      return timestampToTime(new Date(time), "DT1", true);
    },
    goDetail(item){
      console.log(item,'???')
      this.$router.push({
        name:'taskDetail',
        params:{
          isView:false,
          // buildingId:,
          // planId:,
          // floorId:,
          // roomId:,
          // inherentId:,
          // roomName:,
        }
      })
    },
    onClick(name){
      if(name==='a'){
        this.getQuoRiskList(this.$route.params.id)
      }else if(name==='b'){
        this.getInherentRiskList(this.$route.params.id)
      }
    }
  },
}
</script>

<style scoped>
.wrap {
  height: 100vh;
  width: 100vw;
}

.section {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.quolist{
  padding: 10px;
  box-sizing: border-box;
}
</style>
