<!--suppress ALL -->
<template>
  <div id="sex-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 {deviceStatus, statisticsBuilding} from '@/api/pop'
// import { getDoorAreaTree } from '@/api/system/area'
import { white } from "chalk";
import { getCurrentRatio } from '@/api/ywts/shms/sq'
export default {
  name: 'CurrentPie',
  data() {
    return {
      height: '0',
      width: '0',
      total: '',
      chartData: {
        columns: ['name', 'value'],
        rows: [
          // {name: '男',value: 70 },
          // {name: '女',value: 20 }
        ]
      },
      extend: {
        grid: {
          right: '30%'
        },
        color: ['#6BCCFF', '#4AFFF7', '#BAE7FF'],
        legend: {
          show: false,
          top: '0%',
          left: 'center',
          textStyle: {
            color: white,
            fontWeight: 'bold',
            fontSize: 18
          },
          itemStyle: {
            borderRadius: 10,
            borderColor: '#B3F3F6',
            borderWidth: 1,
            borderType: 'dotted'
          },
        },
        series: {
          type: 'pie',
          radius: ['0%', '60%'],
          center: ['50%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: true,
            // color: '#0270b2',
            // fontSize: 14,
            fontSize: 18,
            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}%',
          fontSize: 20
        }
      },
      title: {
        text: ''
      },
      chartSettings: {
        label: {
          formatter: params => {
            return `${params.data.name}`
          }
        }
        // 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('sex-pie').clientHeight - 10 + 'px'
    this.width = document.getElementById('sex-pie').clientWidth - 10 + 'px'
  },
  methods: {
    fetchData(id) {
      getCurrentRatio({ id }).then(res => {
        console.log(res.data, '流动比例')
        if (res.code === 200) {
          const data = res.data.value
          this.chartData.rows = data.map(item => {
            return {
              name: item.name,
              value: item.num
            }
          })
          this.myChart.setOption(this.extend, true)
        }
      })
    }
  }
}
</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>