<script setup lang="ts">
import { watch } from 'vue';
import { useAppStore } from '@/store/modules/app';
import { useEcharts } from '@/hooks/common/echarts';
import { $t } from '@/locales';
import dayjs from 'dayjs';
import { getMktLineData } from '@/service/api/statistics/statistics'; // 引入获取线图数据的API

defineOptions({
  name: 'LineChartMkt'
});

const props = defineProps<{
  dateRange: [number, number];
}>();

const appStore = useAppStore();

// 初始化ECharts实例
const { domRef, updateOptions } = useEcharts(() => ({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['同比', '环比']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [] as string[]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      color: '#8e9dff',
      name: '同比',
      type: 'line',
      smooth: true,
      stack: 'Total',
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0.25,
              color: '#8e9dff'
            },
            {
              offset: 1,
              color: '#fff'
            }
          ]
        }
      },
      emphasis: {
        focus: 'series'
      },
      data: [] as number[]
    },
    {
      color: '#26deca',
      name: '环比',
      type: 'line',
      smooth: true,
      stack: 'Total',
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0.25,
              color: '#26deca'
            },
            {
              offset: 1,
              color: '#fff'
            }
          ]
        }
      },
      emphasis: {
        focus: 'series'
      },
      data: [] as number[]
    }
  ]
}));

// 从API获取线图数据
async function fetchLineData() {
  try {
    // 格式化日期参数
    const startDate = dayjs(props.dateRange[0]).format('YYYY-MM-DD');
    const endDate = dayjs(props.dateRange[1]).format('YYYY-MM-DD');

    // 调用API获取数据
    const { error, data } = await getMktLineData(startDate, endDate);

    if (error) {
      console.error('获取线图数据失败:', error);
      return;
    }

    // 更新图表数据
    updateOptions(opts => {
      // 设置X轴日期标签
      opts.xAxis.data = data.dates.map(date =>
        dayjs(date).format('MM/DD')
      );

      // 设置同比数据
      opts.series[0].data = data.yoyData;

      // 设置环比数据
      opts.series[1].data = data.momData;

      return opts;
    });
  } catch (err) {
    console.error('获取线图数据时出错:', err);
  }
}

// 更新多语言配置
function updateLocale() {
  updateOptions((opts, factory) => {
    const originOpts = factory();

    opts.legend.data = originOpts.legend.data;
    opts.series[0].name = originOpts.series[0].name;
    opts.series[1].name = originOpts.series[1].name;

    return opts;
  });
}

// 监听日期范围变化
watch(() => props.dateRange, () => {
  fetchLineData();
}, { immediate: true });

// 监听语言变化
watch(
  () => appStore.locale,
  () => {
    updateLocale();
  }
);
</script>

<template>
  <NCard :bordered="false" class="card-wrapper">
    <div ref="domRef" class="h-360px overflow-hidden"></div>
  </NCard>
</template>

<style scoped></style>
