<template>
  <div class="comp-csv">
    <EchartCard ref="csvChartRef" :bar-type="'lineChart'" :title="''" :charts-id="'chart-csv'" />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import EchartCard from '@/components/common/echartCard/index.vue';
import { getCSVDataApi } from '@/api/data/dataAnalysis';

const props = defineProps({
  fileId: {
    type: Number,
    default: 0,
  },
  row: {
    type: Object,
    default: () => {
      return {
        xquantityType: '',
        xunits: '',
        yquantityType: '',
        yunits: '',
      };
    },
  },
});

const csvChartRef = ref();

const initCsvChartFun = async (id: any) => {
  const res: any = await getCSVDataApi({
    fileId: id,
  });

  if (res && res.code === 200) {
    const seriesData: any = [];
    const titleList: any = [];
    if (res?.data?.xData?.length) {
      const data = res.data.xData[0].map((item: any, index: any) => {
        return [item, res.data.yData[0][index]];
      });
      const XData: any = res.data.xData[0].map((item: any) => {
        return item;
      });
      seriesData.push({
        name: props.row.yquantityType,
        type: 'line',
        data,
        showSymbol: false, // 默认不显示数据点
        symbolSize: 6, // 悬停时数据点的大小
        itemStyle: {
          opacity: 0, // 默认数据点透明度
          color: '#409EFF', // 数据点颜色
          borderWidth: 2,
        },
        emphasis: {
          scale: true, // 悬停时放大
          focus: 'series', // 悬停时高亮整个系列
          itemStyle: {
            opacity: 1, // 悬停时显示数据点
          },
        },
      });
      csvChartRef.value.commonChartRef.disposeEchartsByKey('chart-csv');
      csvChartRef.value.commonChartRef.option = {
        title: {
          show: false,
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          top: '0%',
          left: 'center',
          data: titleList,
        },
        grid: {
          top: '10%',
          bottom: '10%',
          left: '5%',
          right: '5%',
        },
        xAxis: {
          type: 'value',
          // type: 'category',
          name: props.row.xquantityType
            ? props.row.xquantityType + '（ 单位：' + props.row.xunits + ' ）'
            : '',
          nameGap: 40, // 与轴线的距离
          nameTextStyle: {
            align: 'right', // 文字右对齐
            padding: [0, 0, -40, 0], // 清除默认padding
            verticalAlign: 'bottom', // 垂直对齐到底部
          },
          data: XData,
          axisLabel: {
            show: true,
            // interval: 9,
            interval: XData.length > 10 ? Math.floor(XData.length / 10) : 1,
          },
          splitLine: {
            show: true,
          },
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
        },
        yAxis: {
          name: props.row.yquantityType
            ? props.row.yquantityType + '（单位：' + props.row.yunits + '）'
            : '',
          type: 'value',
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
          minorTick: {
            show: true,
            splitNumber: 5, // 大刻度之间分割成5份
            length: 3, // 小刻度长度
          },
          minorSplitLine: {
            show: true,
            lineStyle: {
              type: 'dotted',
            },
          },
        },
        series: seriesData,
      };
      csvChartRef.value.commonChartRef.initChart();
    }
  }
};

watch(
  () => props.fileId,
  async (newVal) => {
    if (newVal) {
      const id = newVal;
      await initCsvChartFun(id);
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>

<style lang="scss" scoped>
.comp-csv {
  width: 100%;
  height: 500px;
}
</style>
