<script lang="ts" setup>
import type { EchartsUIType } from '@vben/plugins/echarts'

import { onMounted, ref, watch } from 'vue'

import { EchartsUI, useEcharts } from '@vben/plugins/echarts'

const props = defineProps<{
  total: number
  submitted: number
  unsubmitted: number
}>()

const chartRef = ref<EchartsUIType>()
const { renderEcharts } = useEcharts(chartRef)

function render() {
  const total =
    props.total || Number(props.submitted) + Number(props.unsubmitted)
  renderEcharts({
    tooltip: { trigger: 'item', formatter: '{b}: {c}份 ({d}%)' },
    legend: {
      orient: 'vertical',
      right: '4%',
      top: 'center',
      textStyle: { color: '#475569', fontSize: 13 },
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 18,
    },
    series: [
      {
        type: 'pie',
        radius: ['50%', '76%'],
        center: ['36%', '50%'],
        avoidLabelOverlap: false,
        padAngle: 3,
        itemStyle: { borderRadius: 8 },
        label: {
          show: true,
          position: 'center',
          formatter: () => `{t|${total.toLocaleString()}}\n{s|作业总份数}`,
          rich: {
            t: {
              fontSize: 32,
              fontWeight: 700,
              color: '#0F172A',
              lineHeight: 42,
            },
            s: { fontSize: 13, color: '#94A3B8', lineHeight: 22 },
          },
        },
        data: [
          {
            value: Number(props.submitted),
            name: '已提交',
            itemStyle: { color: '#3B82F6' },
          },
          {
            value: Number(props.unsubmitted),
            name: '未提交',
            itemStyle: { color: '#F59E0B' },
          },
        ],
        animationType: 'scale',
        animationEasing: 'cubicOut',
        animationDuration: 800,
      },
    ],
  })
}

onMounted(render)
watch(() => [props.total, props.submitted, props.unsubmitted], render)
</script>

<template>
  <EchartsUI ref="chartRef" class="h-[280px] w-full" />
</template>
