<template>
  <div>

          <EchartsUI ref="chartRef" class="w-full h-80" />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, nextTick } from 'vue';
import { homePage } from '#/api';
import type { EchartsUIType } from '@vben/plugins/echarts';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

const props = defineProps({
  dimension: {
    type: String,
    default: 'day'
  }
});

const loading = ref(false);
const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);
const totalChatCount = ref('0');
const totalRobotCount = ref('0');
const timeRangeStatistics = ref<any[]>([]);

onMounted(() => {
  getChatActivityStatistics();
});

watch(
  () => props.dimension,
  () => {
    getChatActivityStatistics();
  }
);

async function getChatActivityStatistics() {
  loading.value = true;
  try {
    const res = await homePage.getChatActivityStatistics({
      dimension: props.dimension,
      rangeCount: 7
    });
    if (!res.error && res.data) {
      const data = res.data;
      totalChatCount.value = data.totalChatCount?.toString() || '0';
      totalRobotCount.value = data.totalRobotCount?.toString() || '0';
      timeRangeStatistics.value = data.timeRangeStatistics || [];
      nextTick(() => {
        renderChart();
      });
    }
  } catch (error) {
    console.error('获取发言活跃度统计信息失败:', error);
  } finally {
    loading.value = false;
  }
}

function renderChart() {
  const xAxisData = timeRangeStatistics.value.map(item => item.displayName);
  const seriesData = timeRangeStatistics.value.map(item => item.chatCount || 0);
  
  renderEcharts({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function(params: any) {
        const data = params[0];
        return `${data.name}<br/>发言次数：${data.value}`;
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisLabel: {
        interval: 0,
        rotate: 30
      }
    },
    yAxis: {
      type: 'value',
      name: '发言次数'
    },
    series: [
      {
        name: '发言次数',
        type: 'bar',
        data: seriesData,
        label: {
          show: true,
          position: 'top',
          formatter: '{c}'
        },
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#83bff6'
              },
              {
                offset: 0.5,
                color: '#188df0'
              },
              {
                offset: 1,
                color: '#188df0'
              }
            ]
          }
        },
        emphasis: {
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#2378f7'
                },
                {
                  offset: 0.7,
                  color: '#2378f7'
                },
                {
                  offset: 1,
                  color: '#83bff6'
                }
              ]
            }
          }
        }
      }
    ]
  });
}
</script>
