<template>
  <a-spin :loading="loading" style="width: 100%">
    <a-card
      class="general-card"
      :header-style="{ paddingBottom: '0' }"
      :body-style="{
        padding: '20px'
      }"
    >
      <template #title> 项目分类统计 </template>
      <a-empty v-if="categoryStat.name.length === 0"></a-empty>
      <Chart v-else height="347px" :option="chartOption" />
    </a-card>
  </a-spin>
</template>

<script lang="ts" setup>
import useLoading from '@/hooks/loading'
import useChartOption from '@/hooks/chart-option'
import { onMounted, ref } from 'vue'
import { getProjectCategoryStat } from '@/api/dashboard/project'

const { loading } = useLoading()
const categoryStat = ref<{
  totalCount: number
  workCount: number
  name: string[]
  count: number[]
  works: number[]
}>({
  totalCount: 0,
  workCount: 0,
  name: [],
  count: [],
  works: []
})

const { chartOption } = useChartOption(isDark => {
  if (categoryStat.value.name.length === 0) {
    return {}
  }
  return {
    legend: {
      left: 'center',
      data: categoryStat.value.name,
      bottom: 0,
      icon: 'circle',
      itemWidth: 8,
      textStyle: {
        color: isDark ? 'rgba(255, 255, 255, 0.7)' : '#4E5969'
      },
      itemStyle: {
        borderWidth: 0
      }
    },
    tooltip: {
      show: true,
      trigger: 'item'
    },
    graphic: {
      elements: [
        {
          type: 'text',
          left: '23%',
          top: '40%',
          style: {
            text: '项目数',
            textAlign: 'center',
            fill: isDark ? '#ffffffb3' : '#4E5969',
            fontSize: 14
          }
        },
        {
          type: 'text',
          left: '23%',
          top: '50%',
          style: {
            text: `${categoryStat.value.totalCount}个`,
            textAlign: 'center',
            fill: isDark ? '#ffffffb3' : '#1D2129',
            fontSize: 16,
            fontWeight: 500
          }
        },
        {
          type: 'text',
          left: '73%',
          top: '40%',
          style: {
            text: '工时',
            textAlign: 'center',
            fill: isDark ? '#ffffffb3' : '#4E5969',
            fontSize: 14
          }
        },
        {
          type: 'text',
          left: '73%',
          top: '50%',
          style: {
            text: `${categoryStat.value.workCount}天`,
            textAlign: 'center',
            fill: isDark ? '#ffffffb3' : '#1D2129',
            fontSize: 16,
            fontWeight: 500
          }
        }
      ]
    },
    series: [
      {
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['25%', '50%'],
        label: {
          formatter: '{d}%',
          fontSize: 14,
          color: isDark ? 'rgba(255, 255, 255, 0.7)' : '#4E5969'
        },
        itemStyle: {
          borderColor: isDark ? '#232324' : '#fff',
          borderWidth: 1
        },
        data: categoryStat.value.name.map((item, index) => {
          console.log(item)
          return {
            name: item,
            value: categoryStat.value.count[index]
          }
        })
      },
      {
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['75%', '50%'],
        label: {
          formatter: '{d}%',
          fontSize: 14,
          color: isDark ? 'rgba(255, 255, 255, 0.7)' : '#4E5969'
        },
        itemStyle: {
          borderColor: isDark ? '#232324' : '#fff',
          borderWidth: 1
        },
        data: categoryStat.value.name.map((item, index) => {
          return {
            name: item,
            value: categoryStat.value.works[index]
          }
        })
      }
    ]
  }
})

const getStat = async () => {
  const { list } = await getProjectCategoryStat()
  list.map(item => {
    categoryStat.value.totalCount += item.project_count
    categoryStat.value.workCount += Number(item.total_work_days)
    categoryStat.value.count.push(item.project_count)
    categoryStat.value.works.push(Number(item.total_work_days))
    categoryStat.value.name.push(item.type_name)
    return item
  })
}

onMounted(async () => {
  await getStat()
})
</script>

<style scoped lang="less"></style>
