<template>
    <div class="chart-container">
        <div class="chart-header">
            <h2>效率分析</h2>
            <div class="chart-actions">
                <button :class="{ active: timeRange === 'hour' }" @click="changeTimeRange('hour')">小时</button>
                <button :class="{ active: timeRange === 'day' }" @click="changeTimeRange('day')">每天</button>
                <button :class="{ active: timeRange === 'week' }" @click="changeTimeRange('week')">每周</button>
            </div>
        </div>
        <!--图表内容区域 -->
        <div ref="chartRef" class="chart-content"></div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

// 图表DOM引用
const chartRef = ref(null);
// 图表实例
let chartInstance = null;

// 当前时间范围状态
const timeRange = ref('hour'); // 默认显示小时数据

// 定义props
const props = defineProps({
  chartData: {
    type: Object,
    default: () => ({
      hour: {
        xAxis: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00'],
        efficiencyData: [7, 10, 14, 17, 18, 19, 20]
      },
      day: {
        xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        efficiencyData: [12, 15, 17, 14, 18, 16, 19]
      },
      week: {
        xAxis: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周'],
        efficiencyData: [10, 13, 16, 14, 18, 17]
      }
    })
  }
});

// 切换时间范围的函数
const changeTimeRange = (range) => {
  timeRange.value = range;
  updateChartData();
};

// 更新图表数据的函数
const updateChartData = () => {
  if (chartInstance) {
    const data = props.chartData[timeRange.value];
    chartInstance.setOption({
      xAxis: {
        data: data.xAxis
      },
      series: [
        {
          data: data.efficiencyData
        }
      ]
    });
  }
};

// 初始化图表
const initChart = () => {
    if (chartRef.value && !chartInstance) {
        chartInstance = echarts.init(chartRef.value);
    }

    const data = props.chartData[timeRange.value];

    const option = {
        title: {
            text: '',
            show: false
        },
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(33,56,77,1)',
            borderColor: 'rgba(33,56,77,1)',
            textStyle: {
                color: '#fff',
                fontSize: 14
            }
        },
        legend: {
            data: ['转换效率(%)'],
            icon:'circle',
            left: '5%',  // 放在左边
            itemWidth: 8,  // 调小icon宽度
            itemHeight: 8  // 调小icon高度
        },
        grid: {
            top: '20%',
            right: '4%',
            bottom: '4%',
            left: '6%',
            containLabel: true
        },
        xAxis: {
            data: data.xAxis,
            type: 'category',
            boundaryGap: true,
            axisLabel: {
                textStyle: {
                    color: '#3E4954',
                    fontSize: 12
                }
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
                formatter: '{value}%',
                textStyle: {
                    color: '#333',
                    fontSize: 12
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#f0f0f0',
                    type: 'dashed'
                }
            }
        },
        series: [
            {
                name: '转换效率(%)',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 8,
                lineStyle: {
                    width: 3,
                    color: '#1890ff'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: 'rgba(24, 144, 255, 0.6)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(24, 144, 255, 0.1)'
                            }
                        ],
                        false
                    )
                },
                itemStyle: {
                    color: '#1890ff', // 设置为实心圆
                    borderWidth: 0 // 移除边框
                },
                data: data.efficiencyData
            }
        ]
    };

    chartInstance.setOption(option);
};

// 响应窗口大小变化
const handleResize = () => {
    if (chartInstance) {
        chartInstance.resize();
    }
};

// 生命周期钩子
onMounted(() => {
    initChart();
    window.addEventListener('resize', handleResize);

    // 清理函数
    return () => {
        window.removeEventListener('resize', handleResize);
        if (chartInstance) {
            chartInstance.dispose();
            chartInstance = null;
        }
    };
});

</script>

<style scoped>
.chart-container {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    height: 400px;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.chart-header h2 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.chart-actions button {
    background: none;
    border: 1px solid #e0e0e0;
    padding: 5px 12px;
    border-radius: 4px;
    margin-left: 8px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.chart-actions button.active {
    background-color: #1890ff;
    color: white;
    border-color: #1890ff;
}

.chart-content {
    width: 100%;
    height: calc(100% - 70px);
    padding: 10px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .chart-container {
        height: 350px;
    }
}

@media (max-width: 480px) {
    .chart-container {
        height: 300px;
    }

    .chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .chart-actions {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .chart-actions button {
        margin: 0;
        flex: 1;
        margin-right: 5px;
    }

    .chart-actions button:last-child {
        margin-right: 0;
    }
}
</style>