<template>
  <Card :title="title">
    <!-- <div class="table">
      <div class="thead">
        <div class="row">
          <div class="td">预警时间</div>
          <div class="td">预警类型</div>
          <div class="td"></div>
        </div>
      </div>
      <div class="tbody">
        <div class="row" v-for="i in 5" :key="i">
          <div class="td">2022.03.05 15:23:22</div>
          <div class="td">边临防护</div>
          <div class="td">详情</div>
        </div>
      </div>
    </div> -->

    <JNestedRingChart :title="{ text: totalNum, subTitle: '问题总数', y: '35%' }" :series="series" :legend="legend" />
  </Card>
</template>

<script>
import Card from '../components/Card.vue'
import { selectSecurityManageStatisticsApi } from '@/assets/js/api/dataBoard'
import JNestedRingChart from '../jChart/pie/JNestedRingChart.vue'
export default {
  components: { Card, JNestedRingChart },
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  mounted() {
    selectSecurityManageStatisticsApi({ projectSn: this.projectSn }).then(res => {
      const totals = res.result.total
      this.series = [
        {
          color: ['#FE6C7F', '#786FF0', '#5CE2F6'],
          data: [
            { value: totals.weekInspectNum, name: '周检' },
            { value: totals.monthInspectNum, name: '月检' },
            { value: totals.otherInspectNum, name: '其他' }
          ]
        }
      ]
      this.totalNum = totals.totalNum
    })
  },
  data() {
    return {
      projectSn: this.$store.state.projectSn,
      series: [],
      total: 0
    }
  },
  computed: {
    legend() {
      const data = (this.series[0] || []).data || []
      const formatter = name => {
        const value = ((data.filter(item => item.name === name) || [])[0] || {}).value
        return `${name} ${value}`
      }
      return {
        formatter
      }
    }
  }
}
</script>

<style lang="less" scoped>
.table {
  padding: 0 6px;
  height: 100%;
  font-size: 14px;
  color: #fff;
  .thead,
  .tbody {
    &.thead {
      margin-bottom: 5px;
      padding-bottom: 5px;
      color: #6ee4f0;
      border-bottom: 1px solid #fff;
    }
    .row {
      width: 100%;
      display: flex;
      .td {
        height: 30px;
        line-height: 30px;
        &:nth-child(1) {
          width: 40%;
        }
        &:nth-child(2) {
          flex: 1;
        }
        &:nth-child(3) {
          margin-right: 10px;
          color: #6ee4f0;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
