<template>
   <div class="container">
    <div class="mainHome">
      <div class="item">
        <div class="top">
          <van-icon class="icon" name="warn-o" color="#f7980a" />
          <span>风险管理</span>
        </div>
        <ul>
          <li class="li1" v-for="(item, index) in riskList" :key="index">
            <p>{{ riskNum[item.value] || '-' }}</p>
            <p style="color: #969799;">{{ item.label }}</p>
          </li>
        </ul>
      </div>
      <div class="item">
        <div class="top">
          <van-icon class="icon" name="cluster-o" color="#3496da" />
          <span>巡检完成率</span>
        </div>
        <ul>
          <li class="lis" v-for="(item, index) in routingList" :key="index">
            <p>未完成：{{ item.data.unCheckCount  }}</p>
            <van-circle size="60" layer-color="#ebedf0" stroke-width="150" v-model="item.value" :rate="rate(item.data.unCheckCount, item.data.checkCount)" :speed="100" :text="text(item.data.unCheckCount, item.data.checkCount)" />
            <p>{{ item.num }}天 ({{ item.data.checkCount  }})</p>
          </li>
          <li>

          </li>
        </ul>
      </div>
      <div class="item">
        <div class="top">
          <van-icon class="icon" name="fire-o" color="#f7980a" />
          <span>隐患排查</span>
        </div>
        <ul>
          <li class="li" style="border-color: aqua;">
            <p>{{ dangerObj.dangerTotal || '-' }}</p>
            <p style="color: #969799;">隐患总数</p>
          </li>
          <li class="li" style="border-color: orangered;">
            <p>{{ dangerObj.checkPendingCount || '-' }}</p>
            <p style="color: #969799;">待审核</p>
          </li>
          <li class="li" style="border-color: #2794e9;">
            <p>{{ dangerObj.unclaimedCount || '-' }}</p>
            <p style="color: #969799;">认领中</p>
          </li>
          <li class="li" style="border-color: greenyellow;">
            <p>{{ dangerObj.rectificationCount || '-' }}</p>
            <p style="color: #969799;">整改中</p>
          </li>
          <li class="li" style="border-color: gray;">
            <p>{{ dangerObj.waitForAcceptanceCount || '-' }}</p>
            <p style="color: #969799;">待验收</p>
          </li>
          <li class="li" style="border-color: #1c4990;">
            <p>{{ dangerObj.completedCount || '-' }}</p>
            <p style="color: #969799;">已验收</p>
          </li>
          <li class="li" style="border-color: grey;">
            <p>{{ dangerObj.canceledCount || '-' }}</p>
            <p style="color: #969799;">已取消</p>
          </li>
          <li class="li">
            <p>{{ dangerObj. completeRatio || '-' }}%</p>
            <p style="color: #969799;">整改率</p>
          </li>
        </ul>
      </div>
      <div class="item">
        <div class="top">
          <van-icon class="icon" name="medal-o" color="#1c4990" />
          <span>培训计划</span>
        </div>
        <ul>
          <li class="li" v-for="(item, index) in trainList" :key="index">
            <p>{{ trainObj[item] || '-' }}</p>
            <p style="color: #969799;">{{ item }}</p>
          </li>
        </ul>
      </div>
  </div>
   </div>
</template>

<script>
import { userMessageList } from '@/api/new'
import { riskStatistics, checkTaskInventoryStatistics, dangerStatistics, trainStatistics } from '@/api/homePage'
export default {
  name: 'VueSkIndex',
  computed: {
    text () {
      return (value, value2) => {
        if (!value && !value2) {
          return '0%'
        }
        return Math.floor((value2 / (value2 + value) * 100)).toFixed(0) + '%'
      }
    },
    rate () {
      return (value, value2) => {
        if (!value && !value2) {
          return 0
        }
        return Math.floor((value2 / (value2 + value) * 100))
      }
    }
  },
  data () {
    return {
      timeIn: null,
      // 风险数据
      riskList: [
        { value: 'checkTask', label: '排查要求' },
        { value: 'hazardCount', label: '管控对象' },
        { value: 'riskEventCount', label: '风险事件' },
        { value: 'riskMeasureCount', label: '管控措施' },
        { value: 'riskUnitCount', label: '分析单元' }
      ],
      trainObj: {},
      trainList: [],
      dangerObj: {},
      riskNum: {},
      currentRate: 0,
      // 巡检数据
      routingList: [
        {
          num: 1,
          value: 10,
          data: {}
        },
        {
          num: 7,
          value: 100,
          data: {}
        },
        {
          num: 30,
          value: 23,
          data: {}
        },
        {
          num: 365,
          value: 10,
          data: {}
        }
      ]
    }
  },
  beforeDestroy () {
    console.log(111)
    clearInterval(this.timeIn)
  },
  mounted () {
    this.userMessageList()
    this.timeIn = setInterval(() => {
      this.userMessageList()
    }, 10000)
    trainStatistics().then(({ data }) => {
      if (data.code === 200) {
        this.trainList = Object.keys(data.data)
        this.trainObj = data.data
      }
    })
    riskStatistics().then(({ data }) => {
      if (data.code === 200) {
        console.log(data.data)
        this.riskNum = data.data
      }
    })
    this.routingList.forEach(item => {
      checkTaskInventoryStatistics({ lastDays: item.num }).then(({ data }) => {
        if (data.code === 200) {
          item.data = data.data
        }
      })
    })
    dangerStatistics().then(({ data }) => {
      if (data.code === 200) {
        this.dangerObj = data.data
      }
    })
  },

  methods: {
    userMessageList () {
      userMessageList().then(({ data }) => {
        this.$store.dispatch('num/getNum', {
          num: data.noReadTotal
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.mainHome{
  text-align: left;
  width: 100%;
  height: calc(100vh - 60px);
  overflow-y: auto;
  background: #8f9fb2;
  .item{
    width: 94%;
    min-height: 100px;
    margin: 10px 3%;
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    ul{
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      padding: 10px 0;
      .li{
        width: 23%;
        margin: 10px 0 10px 5px;
        padding: 0 0 0 15px;
        border-left: 3px solid #f7980b;
      }
      .li1{
        width: 30%;
        margin: 10px 0 10px 3%;
        padding: 0 15px;
        border-left: 3px solid #f7980b;
      }
      .lis{
        width: 25%;
        margin: 10px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        p{
          margin: 15px 0;
          text-align: center;
          color: #8f9fb2;
        }
      }
    }
  }
}
.top{
  .icon{
    font-size: 18px;
    margin-right: 5px;
  }
  span{
    font-weight: 600;
  }
}
</style>
