<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({
  chartDetail: {
    type: Object,
    default: () => {},
  },
})

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

function renderChart() {
  const percent = Math.max(
    0,
    Math.min(1, Number(props.chartDetail.scoreRate) || 0),
  )
  const value = +(percent * 100).toFixed(2)
  const rest = Math.max(0, 100 - value)
  renderEcharts({
    series: [
      {
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['62%', '82%'],
        startAngle: 90,
        silent: true,
        label: { show: false },
        labelLine: { show: false },
        data: [
          { value, itemStyle: { color: '#409EFF', borderRadius: 10 } },
          { value: rest, itemStyle: { color: '#EDF2F7' } },
        ],
      },
    ],
    graphic: [
      {
        type: 'text',
        left: 'center',
        top: 'center',
        style: {
          text: `得分率：${value}%\n平均分：${props.chartDetail.avgScore ?? '-'}`,
          fill: '#666',
          fontSize: 14,
          fontWeight: 500,
          align: 'center',
        },
      },
    ],
    tooltip: { show: false },
  })
}

onMounted(renderChart)
watch(
  () => [props.chartDetail.scoreRate, props.chartDetail.avgScore],
  renderChart,
)
</script>

<template>
  <EchartsUI ref="chartRef" class="whole-score-chart" />
</template>

<style scoped>
.whole-score-chart {
  width: 100%;
  height: 240px;
}
</style>
