<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<{ rate: number }>()

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

function render() {
  renderEcharts({
    series: [
      {
        type: 'gauge',
        startAngle: 200,
        endAngle: -20,
        radius: '88%',
        min: 0,
        max: 100,
        splitNumber: 5,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              { offset: 0, color: '#F59E0B' },
              { offset: 0.5, color: '#3B82F6' },
              { offset: 1, color: '#1E40AF' },
            ],
          },
        },
        progress: { show: true, width: 18, roundCap: true },
        pointer: {
          show: true,
          length: '50%',
          width: 5,
          itemStyle: { color: '#1E40AF' },
        },
        axisLine: {
          lineStyle: { width: 18, color: [[1, '#F1F5F9']], round: true },
        },
        axisTick: { show: false },
        splitLine: { show: false },
        axisLabel: { distance: 24, color: '#94A3B8', fontSize: 12 },
        title: { show: false },
        detail: {
          valueAnimation: true,
          formatter: '{value}%',
          fontSize: 32,
          fontWeight: 700,
          color: '#0F172A',
          offsetCenter: [0, '70%'],
        },
        data: [{ value: +(Number(props.rate) * 100).toFixed(2) }],
        animationDuration: 1200,
        animationEasing: 'cubicOut',
      },
    ],
  } as any)
}

onMounted(render)
watch(() => props.rate, render)
</script>

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