<script setup lang="ts">
import { Ref, defineProps, withDefaults, watchEffect, ref, onMounted } from 'vue';
import type { EChartsOption } from 'echarts';
import { getDashboardStyle } from './style';
import { useECharts } from '../../../hooks/web/useECharts';
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions, getInstance, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);

/**
 * @description: 仪表盘组件
 * @props: score number 分数
 * @props: styleType number 样式类型
 * @author: changjun
 */

// 仪表盘组件 props
interface DashboardProps {
  score: number | string; // 分数
  styleType?: 0 | 1; // 样式类型
}
const props = withDefaults(defineProps<DashboardProps>(), { styleType: 0 });
const score = ref<number | string>(0);
// 获取仪表盘样式
const dashboardConfig = getDashboardStyle(props.styleType);
const options: EChartsOption = {
  grid: {
    left: 0,
    top: 0,
    right: 0,
    bottom: 0
  },
  tooltip: {
    show: false
  },
  series: [
    {
      type: 'gauge',
      radius: '100%',
      center: ['40%', '50%'],

      // startAngle: 215,
      // endAngle: -35,
      detail: {
        show: false,
        color: dashboardConfig.color,
        offsetCenter: [0, '60%'],
        fontSize: dashboardConfig.detail.fontSize
        // formatter: function (value) {
        //   return value
        // }
      },
      pointer: {
        show: true,
        width: dashboardConfig.pointer.width,
        length: '80%',
        itemStyle: {
          color: dashboardConfig.colorSet
        }
      },
      data: [],
      title: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: [[1, dashboardConfig.colorSet]] as any,
          width: dashboardConfig.axisLineWidth,
          opacity: 1
        }
      },
      axisTick: {
        show: true,
        distance: dashboardConfig.axisTickDistance,
        lineStyle: {
          color: dashboardConfig.color,
          width: 1
        },
        length: '5%',
        splitNumber: 5
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      }
    },
    // 刻度背景圆
    {
      type: 'pie',
      radius: '65%',
      center: ['40%', '50%'],
      z: 1,
      itemStyle: {
        color: '#2E5995'
      },
      label: {
        show: false
      },
      tooltip: {
        show: false
      },
      data: [100],
      animation: false,
      emphasis: {
        disabled: true
      }
    }
    // 表盘内部圆环
    // {
    //   type: 'pie',
    //   radius: '40%',
    //   center: ['50%', '50%'],
    //   z: 1,
    //   itemStyle: {
    //     color: dashboardConfig.insideCircleColor
    //   },
    //   label: {
    //     show: false
    //   },
    //   tooltip: {
    //     show: false
    //   },
    //   data: [100],
    //   emphasis: {
    //     disabled: true
    //   },
    //   animation: false
    // }
  ]
};

async function initChart() {
  options.series![0].data = [{ name: '分数', value: score.value }];
  setOptions(options);
}

watchEffect(() => {
  score.value = props.score;
  initChart();
});

onMounted(() => {
  initChart();
});
</script>

<template>
  <div class="chart" ref="chartRef" :style="{ width: '150px', height: '120px' }"></div>
</template>
