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

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

// 年份筛选选项
const yearOptions = ref([
  { label: '年份筛选', value: 'all' }
]);
const selectedYear = ref('all');

// 数据
const chartData = ref({
  years: ['2022', '2023', '2024', '2025', '2026', '2027'],
  values: [50, 200, 550, 850, 750, 900, 200]
});

// 获取数据
const getChartData = () => {
  studentDistribution().then(res => {
    if (res.success) {
      // 实际项目中应该使用API返回的数据
      // chartData.value = res.data;
      initChart();
    } else {
      // 如果API调用失败，使用模拟数据
      initChart();
    }
  }).catch(() => {
    // 如果发生错误，使用模拟数据
    initChart();
  });
};

// 处理年份筛选变化
const handleYearChange = () => {
  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.years,
      axisLine: {
        lineStyle: {
          color: '#E0E0E0'
        }
      },
      axisLabel: {
        color: '#99AABF',
        fontSize: 12
      }
    },
    yAxis: {
      type: 'value',
      name: '',
      max: 900,
      interval: 300,
      axisLabel: {
        color: '#99AABF',
        fontSize: 12
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#E0E0E0'
        }
      }
    },
    series: [
      {
        data: chartData.value.values,
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#fff',
          borderColor: '#4B96FF',
          borderWidth: 2
        },
        lineStyle: {
          color: '#4B96FF',
          width: 3
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(75, 150, 255, 0.3)'
              },
              {
                offset: 1,
                color: 'rgba(75, 150, 255, 0.1)'
              }
            ]
          }
        },
        markPoint: {
          symbol: 'circle',
          symbolSize: 10,
          itemStyle: {
            color: '#4B96FF'
          },
          data: [
            { coord: ['2025', 850] }
          ]
        }
      }
    ]
  };
  
  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="student-distribution">
    <div class="chart-header">
      <div class="filters">
        <div class="filter-item">
          <el-select v-model="selectedYear" size="small" class="filter-select" @change="handleYearChange">
            <el-option
              v-for="item in yearOptions"
              :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">
.student-distribution {
  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;
  
  .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> 