<script setup lang="ts">
  import { ref, Ref, onMounted, computed, watch } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { useAppStore } from '/@/store/modules/app';
  import { useI18n } from '/@/hooks/web/useI18n';

  const props = defineProps({
    seriesData: {
      type: Array,
      default: () => [],
    },
  });

  const { t } = useI18n();

  const appStore = useAppStore();

  const skinName = computed(() => {
    return appStore.getDarkMode === 'light' ? '#ffffff' : '#151515';
  });
  const chartRef = ref<HTMLDivElement | null>(null);

  const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>);

  const getOptions: any = () => {
    return {
      backgroundColor: skinName.value,
      grid: {
        left: '10%',
        right: '20%',
        bottom: '10%',
        top: '0%',
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}%',
      },
      legend: {
        top: 'bottom',
        type: 'scroll',
      },
      title: [
        {
          text: t('application.record.text.pieShowTitle'),
          textStyle: {
            color: '#333',
            fontWeight: 'bold',
            fontSize: 14,
          },
          left: '49.5%',
          top: '45%',
          textAlign: 'center',
        },
      ],
      series: [
        {
          type: 'pie',
          radius: ['40%', '70%'],
          data: props.seriesData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
          label: {
            normal: {
              show: true,
              textStyle: {
                fontSize: 13,
              },
              formatter: (params) => {
                return params.value + '%';
              },
            },
          },
        },
      ],
    };
  };

  watch(
    () => appStore.getDarkMode,
    (target) => {
      const backgroundColor = target === 'light' ? '#ffffff' : '#151515';
      setOptions &&
        setOptions({
          ...getOptions(),
          backgroundColor,
        });
    }
  );

  onMounted(() => {
    setOptions(getOptions());
    //自适应
    window.addEventListener('resize', () => resize());
  });
</script>
<template>
  <div class="h-70">
    <div ref="chartRef" class="w-full h-full"></div>
  </div>
</template>

<style scoped></style>