<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 chartData = ref({
  dates: ['7/1', '7/2', '7/3', '7/4', '7/5'],
  values: [80, 90, 55, 82, 62]
});

// 过滤选项
const conversationTypes = ref([
  { label: '会话类型', value: 'all' }
]);
const selectedType = ref('all');

const timeFilters = ref([
  { label: '时间筛选', value: 'week' }
]);
const selectedTimeFilter = ref('week');

// 获取数据
const getChartData = () => {
  averageDuration({
    type: selectedType.value, 
    timeFilter: selectedTimeFilter.value
  }).then(res => {
    if (res.success) {
      initChart();
    } else {
      initChart();
    }
  }).catch(() => {
    initChart();
  });
};

// 监听筛选条件变化
const handleFilterChange = () => {
  getChartData();
};

const initChart = () => {
  if (!chartRef.value) return;
  
  chart = echarts.init(chartRef.value);
  
  const option = {
    grid: {
      top: '15%',
      left: '0',
      right: '5%',
      bottom: '0',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: chartData.value.dates,
      axisLine: {
        lineStyle: {
          color: '#E0E0E0'
        }
      },
      axisLabel: {
        color: '#999999',
        fontSize: 12
      }
    },
    yAxis: {
      type: 'value',
      max: 100,
      interval: 30,
      axisLabel: {
        color: '#99AABF',
        fontSize: 12,
        formatter: '{value}'
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#E0E0E0'
        }
      }
    },
    series: [
      {
        type: 'bar',
        data: chartData.value.values,
        barWidth: '30%',
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#4B96FF' // 蓝色渐变开始
              },
              {
                offset: 1,
                color: '#65CBFF' // 蓝色渐变结束
              }
            ]
          },
          borderRadius: [4, 4, 0, 0]
        }
      }
    ]
  };
  
  chart.setOption(option);
};

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

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="chart-header">
      <div class="filters">
        <div class="filter-item">
          <el-select v-model="selectedType" size="small" class="filter-select" @change="handleFilterChange">
            <el-option
              v-for="item in conversationTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="filter-item">
          <el-select v-model="selectedTimeFilter" size="small" class="filter-select" @change="handleFilterChange">
            <el-option
              v-for="item in timeFilters"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
    </div>
    <div class="chart-container" ref="chartRef"></div>
  </div>
</template>

<style scoped lang="scss">
.average-duration {
  width: 100%;
  height: 100%;
  position: relative;
}

.chart-header {
  position: absolute;
  right: 0;
  top: -35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  
  .title {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    
    .title-icon {
      width: 4px;
      height: 16px;
      background-color: #4B96FF;
      margin-right: 8px;
      border-radius: 2px;
    }
  }
  
  .filters {
    display: flex;
    gap: 10px;
    
    .filter-item {
      .filter-select {
        width: 100px;
        
        :deep(.el-input__wrapper) {
          background-color: #f5f7fa;
          box-shadow: none;
          border-radius: 4px;
        }
        
        :deep(.el-input__inner) {
          font-size: 12px;
        }
      }
    }
  }
}

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