<script lang="ts" setup>
import { ref, watch } from 'vue';
import { type ECOption, useEcharts } from '@/composables';
import { hexToRgba } from '@/utils/common';

type ChartData = {
  seriesData: string[];
  xaxis: string[];
};

type Props = {
  chartData: ChartData;
  lineStyleColor?: string;
};

const props = defineProps<Props>();

function lineOptionsCreator() {
  const optoins = {
    grid: {
      x: 55,
      y: 30,
      x2: 30,
      y2: 30
    },
    tooltip: {
      showContent: true,
      trigger: 'axis',
      backgroundColor: 'rgba(8,36,68,.9)',
      borderColor: 'rgba(8,36,68,.9)',
      textStyle: {
        color: '#fff'
      }
    },
    xAxis: [
      {
        type: 'category',
        data: props.chartData?.xaxis,
        axisLine: {
          lineStyle: {
            color: '#ddd'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 5,
          color: '#2b3d4f',
          margin: 15
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          color: '#2b3d4f'
        },
        nameTextStyle: {
          color: '#2b3d4f',
          fontSize: 12,
          lineHeight: 40
        },
        // 分割线
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#E9E9E9'
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '金额',
        type: 'line',
        data: props.chartData?.seriesData,
        symbol: 'circle',
        showSymbol: false,
        smooth: true,
        symbolSize: 8, // 设定实心点的大小
        lineStyle: {
          width: 4,
          color: props.lineStyleColor || '#E6000A',
          opacity: 0.7,
          shadowColor: hexToRgba(props.lineStyleColor || '#E6000A', 0.4), // 设置折线阴影
          shadowBlur: 5,
          shadowOffsetY: 5
        },
        itemStyle: {
          color: props.lineStyleColor || '#E6000A',
          borderColor: '#fff',
          borderWidth: 2,
          shadowColor: hexToRgba(props.lineStyleColor || '#E6000A', 0.4),
          shadowBlur: 10
        }
      }
    ]
  } as ECOption;
  return optoins;
}

const barOptions = ref<ECOption>(lineOptionsCreator());
const { domRef: lineRef } = useEcharts(barOptions);

watch(
  () => props.chartData,
  val => {
    if (val) {
      barOptions.value = lineOptionsCreator();
    }
  },
  {
    deep: true,
    immediate: true
  }
);
</script>
<template>
  <div ref="lineRef" class="w-full h-315px"></div>
</template>
