<!--suppress ALL -->
<template>
  <div id="case-pie" class="container">
    <ve-ring
      :style='{"height": height,"width": width}'
      style="margin-top: 10px"
      :width='width'
      :height='height'
      :judge-width="true"
      :data="chartData"
      :extend="extend"
      :settings="chartSettings"
    />
  </div>
</template>

<script>
import {casePieStatistics, deviceStatus, statisticsBuilding} from '@/api/pop'
import { getDoorAreaTree } from '@/api/system/area'
import {white} from "chalk";
export default {
  name: 'CasePie',
  data() {
    return {
      height: '0',
      width: '0',
      total: '',
      chartData: {
        columns: ['name', 'value'],
        rows: [
          {name: '离岗',value: 0 },
          {name: '黑名单',value: 2 },
          {name: '监控点离线',value: 20 }
        ]
      },
      extend: {
        grid: {
          right: '30%'
        },
        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
        legend: {
          orient: "vertical",
          top: 'center',
          right: 0,
          textStyle:{
            color: white,
            fontWeight: 'bold'
          },
          itemStyle: {
            borderRadius: 10,
            borderColor: '#B3F3F6',
            borderWidth: 1,
            borderType: 'dotted'
          },
        },
        series: {
          type: 'pie',
          radius: ['0%', '70%'],
          center: ['50%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: true,
            color: '#ff9933',
            fontSize: 14,
            fontWeight: 'bold',
            position: 'outside',
            formatter: '{name|{b}}\n{value|{c}}',
            distanceToLabelLine: 2,
            rich: {}
          },
          itemStyle: {
            borderRadius: 5,
            borderColor: '#B3F3F6',
            borderWidth: 2,
            borderType: 'dotted'
          }
        },
        tooltip: { trigger: 'item', formatter: '{b}<br/>事件数量：{c}<br/>占比：{d}%' }
      },
      title: {
        text: ''
      },
      chartSettings: {
        label: {
          formatter: params => {
            return `${params.data.name}:${params.data.value}`
          }
        }
      }
    }
  },
  mounted() {
    this.height = document.getElementById('case-pie').clientHeight - 10 + 'px'
    this.width = document.getElementById('case-pie').clientWidth - 10 + 'px'
    this.search()
  },
  methods: {
    search(){
      const today = new Date();
      const day = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`
      casePieStatistics({
        startTime: day + ' 00:00:00',
        endTime: day + ' 23:59:59',
      }).then(response => {
        if (response.code === 200) {
          this.chartData.rows = response.data.map(item => {
            item.name.replace('事件', '')
            return item
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.container{
  position:relative;
  width: 100%;
  height:100%;
  .round{
    position: absolute;
    //z-index: 999999;
    left: 39%;
    top: 37.5%;
    width: 20%;
    height: 39.5%;
  }
}
.circle {
  position: absolute;
  top:76px;
  left:107px;
  width: 87px;
  height: 87px;
  border-radius: 50%;
  background-image: radial-gradient(#48617c99, #619bd499);
  //background: linear-gradient(to top left, #48617c99, #619bd499);
  text-align: center;
  margin: 0 auto;

  h2 {
    position: absolute;
    top: 30%;
    left: 50%;
    z-index: 999;
    transform: translateX(-50%);
  }
}

.circle::after {  //小的圆
  content: '';
  width: 87px;
  height: 87px;
  background-image: radial-gradient(#48617c99, #619bd499);
  //background: linear-gradient(to top left, #48617c99, #619bd499);
  position: absolute;  //通过定位来实现两个圆心在同一位置
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
</style>