<template>
  <div shadow="never" class="homeBoxCard" v-loading="loading">
    <div class="height300" id="piechartCom" ref="piechartCom" />
  </div>
</template>
<script>
import {
  computed,
  defineComponent,
  onMounted,
  ref,
} from 'vue'
import { useStore } from 'vuex'
import * as echarts from 'echarts'

var echartData = [
  {
    value: 335,
    legendname: '待指派',
    name: '待指派',
    itemStyle: { color: '#FF3366' },
  },
  {
    value: 335,
    legendname: '待接单',
    name: '待接单',
    itemStyle: { color: '#F4A869' },
  },
  {
    value: 335,
    legendname: '已结单',
    name: '已结单',
    itemStyle: { color: '#8956BA' },
  },
  {
    value: 335,
    legendname: '待确认',
    name: '待确认',
    itemStyle: { color: '#71D1F1' },
  },
  {
    value: 335,
    legendname: '已关闭',
    name: '已关闭',
    itemStyle: { color: '#61C5A9' },
  },
]


export default defineComponent({
  name: 'PieChart',
  setup() {
    const store = useStore()

    // 总数
    const total = computed(() => store.state.Home.worksChartData.total)
    // num
    const num = computed(() => store.state.Home.worksChartData.num)

    // 读取数据 func
    const loading = ref(true)
    const getData = async () => {
      // loading.value = true;
      // await store.dispatch("Home/queryWorksChartData");
      loading.value = false
    }

    onMounted(() => {
      getData()
      let myChart = echarts.init(document.getElementById('piechartCom'))
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: function (parms) {
            var str =
              parms.seriesName +
              '</br>' +
              parms.marker +
              '' +
              parms.data.legendname +
              '</br>' +
              '数量：' +
              parms.data.value +
              '</br>' +
              '占比：' +
              parms.percent +
              '%'
            return str
          },
        },
        legend: {
          type: 'scroll',
          orient: 'horizontal',
          bottom: '0%',
          align: 'left',
          // top:'middle',
          textStyle: {
            color: '#8C8C8C',
          },
          height: 250,
        },
        series: [
          {
            name: '标题',
            type: 'pie',
            center: ['50%', '45%'],
            radius: ['35%', '55%'],

            clockwise: false, //饼图的扇区是否是顺时针排布
            avoidLabelOverlap: false,
            // label: {
            //   show: false,
            // },
            // labelLine: {
            //   show: false,
            // },
            data: echartData,
          },
        ],
      })
      window.onresize = function () {
        // 自适应大小
        myChart.resize()
      }
    })

    return {
      loading,
      total,
      num,
    }
  },
})
</script>
<style lang="scss" scoped>
.homeBoxCard {
  margin-bottom: 24px;
  ::v-deep(.el-card__header) {
    padding-left: 12px;
    padding-right: 12px;
  }
  ::v-deep(.el-card__body) {
    padding: 12px;
    font-size: 14px;
    line-height: 1.5715;
  }
  ::v-deep(.el-divider) {
    margin: 8px 0;
  }
  .num {
    font-size: 30px;
    color: #515a6e;
  }
  .height300 {
    height: 330px;
  }
}
</style>