<script lang="ts" setup>
/**
 * @Name: NegativeClassification.vue
 * @Description: 负面标签分类
 * @Author: Cheney
 */
import * as echarts from 'echarts';
import { useResponse } from '/@/utils/useResponse';
import * as api from '/@/views/product-manage/comment-detail/api';


const props = defineProps({
  asin: String
});
const { asin } = props;

let chartRef: any = useTemplateRef('chartRef');
let chart: echarts.ECharts | null = null;
let chartData: any = ref([]);

let resizeObserver: ResizeObserver | null = null;

let lineChartRef: any = useTemplateRef('lineChartRef');
let lineChart: echarts.ECharts | null = null;
let lineChartData: any = ref([]);

onBeforeMount(() => {
  fetchChartData();
  fetchLineChartData();
});

onMounted(() => {
  initChart();
  initLineChart();
});

onUnmounted(() => {
  resizeObserver?.disconnect();
  chart?.dispose();
});

function updateChart() {
  if (!chart || chartData.value.length === 0) return;

  // 排序 chartData
  chartData.value.sort((a: any, b: any) => a.value - b.value);

  const chartOptions = {
    title: {
      text: '负面标签分类'
    },
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: '15%',
      left: '20%',
      right: '5%',
      bottom: '10%'
    },
    dataset: {
      dimensions: [ 'name', 'value' ],
      source: chartData.value
    },
    xAxis: {
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#3480CE',
          width: 1
        }
      }
    },
    yAxis: {
      type: 'category',
      name: '名称',
      nameGap: 16,
      axisLabel: {
        interval: 0, // 确保所有标签都显示
        rotate: 30,  // 标签倾斜 30 度
        textStyle: {
          fontSize: 12, // 设置字体大小，可根据需要调整
          color: '#333' // 设置字体颜色
        }
      }
    },
    series: [
      {
        type: 'bar',
        name: ' ',
        color: '#3480CE',
        barWidth: '18px'
      }
    ]
  };

  chart.setOption(chartOptions);
}

function updateLineChart() {
  if (!lineChart || lineChartData.value.length === 0) return;

  const lineChartOptions = {

    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: '12%',
      left: '10%',
      right: '10%',
      bottom: '10%'
    },
    dataset: {
      dimensions: [ 'name', 'value' ],
      source: lineChartData.value
    },
    xAxis: {
      type: 'category',
      name: '日期'
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#FF5733',
          width: 1
        }
      }
    },
    series: [
      {
        name: 'all',
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#FF5733'
        }
      }
    ]
  };

  lineChart.setOption(lineChartOptions);
}

function initChart() {
  if (!chartRef.value) return;

  chart = echarts.init(chartRef.value);
  updateChart();

  resizeObserver = new ResizeObserver(() => {
    chart?.resize();
  });
  if (chartRef.value) {
    resizeObserver.observe(chartRef.value);
  }
}

function initLineChart() {
  if (!lineChartRef.value) return;

  lineChart = echarts.init(lineChartRef.value);
  updateLineChart();

  resizeObserver = new ResizeObserver(() => {
    lineChart?.resize();
  });
  if (lineChartRef.value) {
    resizeObserver.observe(lineChartRef.value);
  }
}

async function fetchChartData() {
  const res = await useResponse(api.getBarChartData, { asin, agg_field: 'kind' });
  if (res.code === 2000 && res.data) {
    chartData.value = res.data;
    updateChart();
  }
}

async function fetchLineChartData() {
  const res = await useResponse(api.getLineChartData, { asin, agg_field: 'review_date' });
  if (res.code === 2000 && res.data) {
    lineChartData.value = res.data;
    updateLineChart();
  }
}
</script>

<template>
  <el-card class="border-none" shadow="hover">
    <el-row :gutter="10">
      <el-col :span="12">
        <div v-show="chartData.length > 0" ref="chartRef" class="chart"></div>
        <el-empty v-if="chartData.length == 0" class="chart" description="暂无数据" />
      </el-col>
      <el-col :span="12">
        <div v-show="lineChartData.length > 0" ref="lineChartRef" class="chart"></div>
        <el-empty v-if="lineChartData.length == 0" class="chart" description="暂无数据" />
      </el-col>
    </el-row>
  </el-card>
</template>

<style scoped>
.chart {
  width: 100%;
  height: 400px;
}
</style>
