<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { averageDuration } from "@/api";

const chartRef = ref<HTMLElement | null>(null);
let chart: echarts.ECharts | null = null;

// 过滤选项
const filterOptions = [
  { value: 'all', label: '全部来源' },
  { value: 'web', label: '网页端' },
  { value: 'mobile', label: '移动端' }
];
const selectedFilter = ref(filterOptions[0].value);

// 图表数据
const chartData = ref({
  days: [] as string[],
  durations: [] as number[]
});

// 获取图表数据
const getChartData = () => {
  averageDuration().then(res => {
    if (res.success) {
      chartData.value = res.data;
      initChart();
    }
  });
};

const initChart = () => {
  if (!chartRef.value) return;
  
  chart = echarts.init(chartRef.value);
  
  const option = {
    grid: {
      top: '10%',
      left: '3%',
      right: '4%',
      bottom: '15%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: chartData.value.days,
      axisLine: {
        lineStyle: {
          color: '#E0E0E0'
        }
      },
      axisLabel: {
        color: '#999999'
      }
    },
    yAxis: {
      type: 'value',
      name: '分钟',
      nameTextStyle: {
        color: '#999999'
      },
      min: 0,
      max: 100,
      interval: 20,
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#E0E0E0'
        }
      },
      axisLabel: {
        color: '#999999'
      }
    },
    series: [
      {
        name: '平均时长',
        type: 'bar',
        barWidth: '40%',
        data: chartData.value.durations,
        itemStyle: {
          color: '#4B96FF'
        }
      }
    ]
  };
  
  chart.setOption(option);
};

// 监听窗口大小变化，重绘图表
const handleResize = () => {
  if (chart) {
    chart.resize();
  }
};

// 处理过滤器变化
const handleFilterChange = () => {
  // 这里可以根据选择的过滤条件重新获取数据并更新图表
  console.log('Filter changed to:', selectedFilter.value);
  getChartData(); // 简单实现，实际应该传入过滤参数
};

onMounted(() => {
  getChartData();
  window.addEventListener('resize', handleResize);
});

// 组件卸载时移除事件监听
const onUnmounted = () => {
  window.removeEventListener('resize', handleResize);
  if (chart) {
    chart.dispose();
    chart = null;
  }
};
</script>

<template>
  <div class="average-duration">
    <div class="filter-container">
      <div class="filter-label">数据来源:</div>
      <el-select v-model="selectedFilter" placeholder="选择来源" size="small" @change="handleFilterChange">
        <el-option
          v-for="item in filterOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div class="chart-container" ref="chartRef"></div>
  </div>
</template>

<style scoped lang="scss">
.average-duration {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.filter-container {
  display: flex;
  align-items: center;
  padding: 10px 0;
  
  .filter-label {
    font-size: 14px;
    color: #666;
    margin-right: 10px;
  }
  
  :deep(.el-input__wrapper) {
    background-color: #f5f7fa;
    box-shadow: none;
  }
  
  :deep(.el-select .el-input) {
    width: 120px;
  }
}

.chart-container {
  flex: 1;
  width: 100%;
}
</style> 