<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 * as echarts from 'echarts';

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

  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,
      // 柱状图的颜色
      color: ['#ffdb5c', '#9fe6b8', '#67e0e3', '#32c5e9', '#37a2da'],
      tooltip: {
        show: true,
      },
      grid: {
        left: 50,
        right: 50,
        top: 10, //拉伸距离顶部高度
        bottom: 0, //拉伸距离底部高度
        containLabel: true,
      },
      //X轴
      xAxis: {
        type: 'value',
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        //不显示X轴刻度线和数字
        splitLine: { show: false },
        axisLabel: { show: false },
      },
      yAxis: {
        type: 'category',
        data: props.seriesData.map((item: any) => item.label),
        //升序
        inverse: true,
        splitLine: { show: false },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        //key和图间距
        offset: 10,
        //动画部分
        animationDuration: 300,
        animationDurationUpdate: 300,
        //key文字大小
        nameTextStyle: {
          fontSize: 5,
        },
      },
      series: [
        {
          //柱状图自动排序，排序自动让Y轴名字跟着数据动
          realtimeSort: true,
          type: 'bar',
          data: props.seriesData.map((item: any) => item.value),
          barWidth: 15,
          barGap: 10,
          smooth: true,
          valueAnimation: true,
          //Y轴数字显示部分
          label: {
            normal: {
              show: true,
              position: 'right',
              valueAnimation: true,
              offset: [5, -2],
              textStyle: {
                color: '#333',
                fontSize: 13,
              },
            },
          },
          itemStyle: {
            emphasis: {
              barBorderRadius: 7,
            },
            //颜色样式部分
            normal: {
              barBorderRadius: 7,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#3977E6' },
                { offset: 1, color: '#37BBF8' },
              ]),
            },
          },
        },
      ],
    };
  };

  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="w-180 h-70">
    <div ref="chartRef" class="w-full h-full"></div>
  </div>
</template>

<style scoped></style>