<template>
  <Card title="故障类型统计">
    <template #extra>
      <condition type="2" :typeShow="true" @change="Search" @expor="handleExport" />
    </template>
    <div class="piechart" ref="chartPieRef" :style="{ height: '280px', width: '100%' }"></div>
  </Card>
</template>
<script lang="ts" setup>
import condition from './condition.vue';
import { Card } from 'ant-design-vue';
import { ref, Ref, onMounted, reactive } from 'vue';
import { exportElsxFile } from '/@/utils/file/download';
import dayjs from 'dayjs';
import { workTrend } from '/@/api/home/index';
import { useECharts } from '/@/hooks/web/useECharts';
const chartPieRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartPieRef as Ref<HTMLDivElement>);
const colorList = ['#38a0ff', '#4cca73', '#FDD56A', '#d58b55', '#c8ffff'];
let SearchData = reactive({
  startTime: dayjs().subtract(6, 'month').format('YYYY-MM-DD'),
  endTime: dayjs().format('YYYY-MM-DD'),
  cameraType: '0',
});
var rich = {
  name: {
    color: '#666666',
    fontSize: 14,
    padding: [8, 30, 0, 30],
    fontWeight: '400',
    align: 'left',
  },
  value: {
    color: '#333',
    fontSize: 15,
    padding: [0, 30, 8, 30],
    fontWeight: '500',
    align: 'left',
  },
  percent: {
    color: '#FFF',
    align: 'right',
    fontSize: 15,
    fontWeight: '500',
    //padding: [0, 5]
  },
  hr: {
    borderColor: '#DFDFDF',
    width: '100%',
    borderWidth: 1,
    height: 0,
  },
  cir: {
    fontSize: 26,
  },
};
let echartData = reactive({
  ydata: [],
  xdata: [],
});
var ydata = [
  {
    name: '财务管理决策实训',
    value: 18,
  },
];
var color = [
  '#8d7fec',
  '#5085f2',
  '#e75fc3',
  '#f87be2',
  '#f2719a',
  '#fca4bb',
  '#f59a8f',
  '#fdb301',
  '#57e7ec',
  '#cf9ef1',
];
var xdata = ['财务管理决策实训'];
function handlesetOptions() {
  setOptions({
    tooltip: {
      trigger: 'item',
      formatter: '{b}<br/>数量 : {c} ({d}%)',
    },
    legend: {
      // orient: 'vartical',
      // x: 'left',
      orient: 'vertical',
      type: 'scroll',
      top: 'center',
      left: '60%',
      bottom: '0%',
      data: echartData.xdata,
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 16,
      formatter: function (name) {
        return '' + name;
      },
    },
    series: [
      {
        type: 'pie',
        clockwise: false, //饼图的扇区是否是顺时针排布
        minAngle: 2, //最小的扇区角度（0 ~ 360）
        center: ['30%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          //图形样式
          normal: {
            borderColor: '#ffffff',
            borderWidth: 4,
          },
        },
        label: {
          normal: {
            show: false,
            position: 'center',
            formatter: '',
            rich: {
              text: {
                color: '#666',
                fontSize: 14,
                align: 'center',
                verticalAlign: 'middle',
                padding: 8,
              },
              value: {
                color: '#8693F3',
                fontSize: 24,
                align: 'center',
                verticalAlign: 'middle',
              },
            },
          },
          emphasis: {
            show: true,
            textStyle: {
              fontSize: 24,
            },
          },
        },
        data: echartData.ydata,
      },
    ],
    color: colorList,
    backgroundColor: '#fff',
  });
}
async function getList() {
  const res = await workTrend(SearchData);
  let exdata = [],
    eydata = [];
  res.map((ele) => {
    exdata.push(ele.groupKey2);
    eydata.push({
      name: ele.groupKey2,
      value: ele.count,
    });
  });
  echartData.xdata = exdata;
  echartData.ydata = eydata;
  handlesetOptions();
}
function Search(val) {
  SearchData = val;
  getList();
}
function handleExport() {
  let fields = {
    time: '保修类型',
    num: '数量',
  };
  let data = echartData.ydata.map((ele) => {
    return {
      time: ele.name,
      num: ele.value || 0,
    };
  });
  exportElsxFile(data, fields, '故障类型统计');
}

onMounted(() => {
  getList();
});
</script>
<style lang="less" scoped>
.piechart {
  width: 100%;
  height: 100%;
}
</style>
