<!--suppress ALL -->
<template>
  <div id="floor-pie" class="container">
    <el-image :src="require('@/assets/popup/round1.png')" class="round" mode="fill" />
    <ve-ring
      :style='{"height": height,"width": width}'
      :width='width'
      :height='height'
      :judge-width="true"
      :data="chartData"
      :extend="extend"
      :settings="chartSettings"
    />
  </div>
</template>

<script>
import {deviceStatus, statisticsBuilding} from '@/api/pop'
import { getDoorAreaTree } from '@/api/system/area'
import {white} from "chalk";
export default {
  name: 'FloorPie',
  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','#4AFFF7','#BAE7FF'],
        legend: {
          top: '0%',
          left: 'center',
          textStyle:{
            color: white,
            fontWeight: 'bold'
          },
          itemStyle: {
            borderRadius: 10,
            borderColor: '#B3F3F6',
            borderWidth: 1,
            borderType: 'dotted'
          },
        },
        series: {
          type: 'pie',
          radius: ['45%', '60%'],
          center: ['50%', '60%'],
          avoidLabelOverlap: false,
          // label: {
          //   show: true,
          //   color: '#0270b2',
          //   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('floor-pie').clientHeight - 10 + 'px'
    this.width = document.getElementById('floor-pie').clientWidth - 10 + 'px'
  },
  methods: {
    initData(params){
      deviceStatus(params).then(response => {
        if (response.code === 200) {
          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>