<script setup lang="ts">
/**
 * @Name: WordCloud.vue
 * @Description: 搜索词-分析页-词云图
 * @Author: Cheney
 */
import { inject, onBeforeUnmount, reactive, Ref, ref } from 'vue';
import * as api from '/@/views/searchTerm/analysisPage/api';
import * as echarts from 'echarts';
import 'echarts-wordcloud';
import emitter from '/@/utils/emitter';

const filter = inject<Ref>('filter');
const loading = ref(false);

const wordCloudFilter = reactive({
  typeSelect: 'positive',
  metricSelect: 'Impressions_Total_Count',
});

let responseData = null;
const chartRef = ref<HTMLElement | null>(null);
let chart: echarts.ECharts | null = null;
let resizeObserver: ResizeObserver | null = null;
const hasData = ref(true);

onBeforeUnmount(() => {
  emitter.all.clear();
  // 清理 ResizeObserver
  if (resizeObserver) {
    resizeObserver.disconnect();
  }
  if (chart) {
    chart.dispose();
    chart = null;
  }
});

emitter.on('QueryCondition-sendRequest', () => {
  fetchWordCloudData();
});

async function fetchWordCloudData() {
  loading.value = true;
  const query = {
    layer_type: filter.value.layerType,
    report_range: filter.value.reportType,
    searchTerm_type: wordCloudFilter.typeSelect,
  };
  try {
    responseData = await api.getWordCloudData(query);
    if (!responseData.data || responseData.data.length === 0) {
      // 处理空数据的情况
      hasData.value = false;
      if (chart) {
        chart.clear();
      }
      return;
    }
    hasData.value = true;
    setOption();
    // initChart(option);
  } catch (error) {
    console.error('==Error==', error);
  } finally {
    loading.value = false;
  }
}

function setOption() {
  // 生成词云数据
  const selectedMetric = wordCloudFilter.metricSelect;
  const wordCloudData = responseData.data.map((item) => ({
    name: item.root_search_term,
    value: item[selectedMetric],
  }));

  const option = {
    title: {
      text: '搜索词词云图',
    },
    tooltip: {
      show: true,
    },
    series: [
      {
        type: 'wordCloud',
        // 词云图的形状
        shape: 'circle', // 可以是 'circle', 'cardioid', 'diamond', 'triangle-forward', 'triangle', 'pentagon', 'star'
        // 控制字体大小
        sizeRange: [12, 45],
        // 文本旋转角度
        rotationRange: [-90, 90],
        data: wordCloudData,
        emphasis: {
          focus: 'self', // 聚焦悬浮项
          textStyle: {
            fontSize: 50, // 放大效果的字体大小
          },
        },
      },
    ],
    backgroundColor: '#fff',
  };

  if (!chart) {
    chart = echarts.init(chartRef.value);
  }
  chart.setOption(option);

  // 添加 ResizeObserver 以处理图表大小变化
  if (!resizeObserver) {
    resizeObserver = new ResizeObserver(() => {
      chart?.resize();
    });
    resizeObserver.observe(chartRef.value);
  }
}

function handleSelectChange() {
  fetchWordCloudData();
}

function changeMetric() {
  setOption();
}
</script>

<template>
  <el-card shadow="never" v-loading="loading" class="mt-5">
    <div class="flex gap-5 mb-4 justify-center">
      <div>
        <span class="font-medium mr-0.5">类型 </span>
        <el-select v-model="wordCloudFilter.typeSelect" @change="handleSelectChange" style="width: 130px">
          <el-option label="positive" value="positive" />
          <el-option label="negative" value="negative" />
        </el-select>
      </div>
      <div>
        <span class="font-medium mr-0.5">指标 </span>
        <el-select v-model="wordCloudFilter.metricSelect" @change="changeMetric" style="width: 130px">
          <el-option label="曝光次数" value="Impressions_Total_Count" />
          <el-option label="点击次数" value="Clicks_Total_Count" />
          <el-option label="加购次数" value="Cart_Adds_Total_Count" />
          <el-option label="购买次数" value="Purchases_Total_Count" />
        </el-select>
      </div>
    </div>
    <!-- 空状态 和 词云图 -->
    <div class="w-full" style="min-height: 500px">
      <div v-show="!loading && !hasData" style="min-height: 500px">
        <el-empty :image-size="300" />
      </div>
      <div v-show="hasData" ref="chartRef" style="width: 100%; height: 500px"></div>
    </div>
  </el-card>
</template>

<style scoped></style>
