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

<script>

import {white} from "chalk";
// import {getMonthCaseType} from "../../../../../api/ywts/cszl/gd";
import { getMaintainAnaylse } from '@/api/ywts/zyhj/yl'
export default {
  name: 'CasePie',
  data() {
    return {
      height: '0',
      width: '0',
      total: '',
      chartData: {
        columns: ['name', 'value'],
        rows: [
          // {name: '未戴安全帽事件',value: 70 },
          // {name: '道路积水检测事件',value: 20 },
          // {name: '人工巡检事件',value: 20 }
        ]
      },
      extend: {
        grid: {
          right: '30%'
        },
        color: ['#6BCCFF','#ffa54a','#4ab228','#4AFFF7','#BAE7FF'],
        legend: {
          top: '0%',
          left: 'center',
          textStyle:{
            color: white,
            fontWeight: 'bold',
            fontSize: 14
          },
          itemStyle: {
            borderRadius: 10,
            borderColor: '#B3F3F6',
            borderWidth: 1,
            borderType: 'dotted'
          },
          type: 'scroll'
        },
        series: {
          type: 'pie',
          radius: ['30%', '60%'],
          center: ['50%', '60%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            // color: '#0270b2',
            // fontSize: 14,
            // color: '#0270b2',
            // fontSize: 14,
            fontSize: 14,
            fontWeight: 'bold',
            position: 'outside',
            formatter: '{name|{b}}:{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}`
          }
        }
        // labelMap: {
        //   'name': '单位',
        //   'value': '用量'
        // },
        // dimension: 'name',
        // metrics: 'value'
      }
    }
  },
  // watch: {
  //   query: {
  //     handler: function() {
  //       this.listQuery.buildingType = this.query.value
  //       this.fetchData()
  //     },
  //     deep: true
  //   }
  // },
  mounted() {
    this.height = document.getElementById('case-pie').clientHeight - 10 + 'px'
    this.width = document.getElementById('case-pie').clientWidth - 10 + 'px'
  },
  methods: {
    fetchData(id){
      getMaintainAnaylse({id}).then(response => {
        if (response.code === 200) {
          console.log(response.data.value, '养护分析')
          this.chartData.rows = (response.data.value || []).map(item => {
            return {
              name: item.name,
              value: item.num || item.total
            }
          })

          // this.chartData.rows[0].value = response.data.filter(item => item.status === '1')[0] ? response.data.filter(item => item.status === '1')[0].quantity : 0
          // this.chartData.rows[1].value = response.data.filter(item => item.status === '2')[0] ? response.data.filter(item => item.status === '2')[0].quantity : 0
          // this.chartData.rows[2].value = response.data.filter(item => item.status === '3')[0] ? response.data.filter(item => item.status === '3')[0].quantity : 0
        }
      })
    }
  }
}
</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>