<template>
  <Card title="保修类型统计">
    <template #extra>
      <condition :selectTimeType="0"  :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, reactive, onMounted } from 'vue';
import { workType } from '/@/api/home/index';
import { useECharts } from '/@/hooks/web/useECharts';
import { exportElsxFile, } from '/@/utils/file/download';
import dayjs from 'dayjs';
const chartPieRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartPieRef as Ref<HTMLDivElement>);
const colorList = ['#38a0ff', '#4cca73', '#FDD56A', '#d58b55', '#c8ffff'];
let pieData = ref([]);
let legenData = ref([]);
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,
  },
};
function handlesetOptions() {
  setOptions({
    tooltip: {
      trigger: 'item',
      formatter: '{b}<br/>数量 : {c} ({d}%)',
    },
    legend: {
      orient: 'horizontal',
      bottom: 0,
      data: legenData.value,
    },
    series: [
      {
        name: '库存情况',
        type: 'pie',
        radius: '68%',
        center: ['50%', '50%'],
        clockwise: false,
        data: pieData.value,
        label: {
          normal: {
            position: 'inner',
            formatter: (params) => {
              return '{percent|' + params.percent.toFixed(0) + '%}';
            },
            rich: rich,
          },
        },
        labelLine: {
          normal: {
            position: 'inner',
            formatter: (params) => {
              return '{percent|' + params.percent.toFixed(0) + '%}';
            },
            rich: rich,
          },
        },
        itemStyle: {
          borderWidth: 5,
          borderColor: '#fff',
        },
      },
    ],
    color: colorList,
    backgroundColor: '#fff',
  });
}
async function getList() {
  const res = await workType(SearchData);
  let pieDatas = [],legenDatas = [];
  res.map(ele => {
    legenDatas.push(ele.groupKey2)
    pieDatas.push({
      name: ele.groupKey2,
      value: ele.count,
    })
  })
  pieData.value = pieDatas
  legenData.value = legenDatas
  handlesetOptions();
}
function Search(val) {
    SearchData = val
    getList();
  }
  function handleExport(){
  let fields  = {
    'time':'保修类型',
    'num':'数量',
  }
    let data = pieData.value.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>
