<template>
    <div class="chart-container">
        <!-- 图表标题和时间范围选择器 -->
        <div class="chart-header">
            <h2>发电量趋势 (kWh)</h2>
            <div class="chart-actions">
                <button @click="timeRange = 'day'" :class="{ active: timeRange === 'day' }">日发电</button>
                <button @click="timeRange = 'week'" :class="{ active: timeRange === 'week' }">周发电</button>
                <button @click="timeRange = 'month'" :class="{ active: timeRange === 'month' }">月发电</button>
            </div>
        </div>
        <!-- 图表内容区域 -->
        <div ref="chartRef" class="chart-content"></div>
    </div>
</template>

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

// 接收从父组件传入的数据
const props = defineProps({
  quShiData: {
    type: Object,
    default: () => ({
      day: {
        xAxis: [],
        actualData: [],
        theoreticalData: []
      },
      week: {
        xAxis: [],
        actualData: [],
        theoreticalData: []
      },
      month: {
        xAxis: [],
        actualData: [],
        theoreticalData: []
      }
    })
  }
});

// 图表DOM引用
const chartRef = ref(null);
// 时间范围状态
const timeRange = ref('day');
// 图表实例
let chartInstance = null;

// 定义颜色常量
const ACTUAL_COLOR = '#2A82E4';
const THEORETICAL_COLOR = '#67C23A';

// 根据时间范围计算当前显示的数据
const chartData = computed(() => {
  // 使用传入的数据，如果不存在则使用默认数据
  const dataForRange = props.quShiData[timeRange.value] || props.quShiData.day;
  return {
    xAxis: dataForRange.xAxis,
    actualData: dataForRange.actualData,
    theoreticalData: dataForRange.theoreticalData
  };
});

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

    const data = chartData.value;

    const option = {
        
        tooltip: {
            trigger: 'axis',
            // 悬停线相关设置
            axisPointer: {
                type: 'cross',
                lineStyle: {
                    color: '#2A82E4',
                    width: 2
                }
            },
            backgroundColor: 'rgba(255, 255, 255, 0.9)',
            borderColor: '#e8e8e8',
            borderWidth:2 ,
            textStyle: {
                color: '#333'
            },
            formatter: function (params) {
                const date = params[0].axisValue;
                const actualValue = params[0].value;
                const theoreticalValue = params[1].value;

                return `
                      <div style="font-weight: bold;">${date}</div>
                      <div style="color: ${ACTUAL_COLOR};">实际发电量: ${actualValue}</div>
                      <div style="color: ${THEORETICAL_COLOR};">理论发电量: ${theoreticalValue}</div>
                    `;
            }
        },
        legend: {
            right: 'center',
            data: ['实际发电', '理论发电'],
            top: 0,
            itemWidth: 10,
            itemHeight: 10,
            icon: 'stack',
            textStyle: {
                fontSize: 12,
                color: '#666'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            top: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data.xAxis,
            axisLine: {
                lineStyle: {
                    color: '#dcdfe6'
                }
            },
            axisLabel: {
                color: '#3E4954',
                fontSize: 12
            },
            axisTick: {
                show: false // 去除刻度线
            },
            splitLine: {
                show: true,  //显示分割线
                lineStyle: {
                    type: 'dashed'  // 设置分割线为虚线
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#dcdfe6'
                }
            },
            axisLabel: {
                color: '#3E4954',
                fontSize: 12
            },
            axisTick: {
                show: false // 去除刻度线
            },
            splitLine: {
                show: true,  //显示分割线
                lineStyle: {
                    type: 'dashed'  // 设置分割线为虚线
                }
            }
        },
        series: [
            {
                name: '实际发电',
                type: 'line',
                data: data.actualData,
                smooth: true,
                symbol: 'circle',
                symbolSize: 6,
                // 开始不显示拐点， 鼠标经过显示
                showSymbol: false,
                // 设置拐点颜色以及边框
                itemStyle: {
                    color: ACTUAL_COLOR
                },
                lineStyle: {
                    color: ACTUAL_COLOR,
                    width: 3
                },
                emphasis: {
                    itemStyle: {
                        color: '#2A82E4',
                        borderColor: '#fff',
                        borderWidth: 3
                    }
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: `rgba(${parseInt(ACTUAL_COLOR.slice(1, 3), 16)}, ${parseInt(ACTUAL_COLOR.slice(3, 5), 16)}, ${parseInt(ACTUAL_COLOR.slice(5, 7), 16)}, 0.2)`
                        },
                        {
                            offset: 1,
                            color: `rgba(${parseInt(ACTUAL_COLOR.slice(1, 3), 16)}, ${parseInt(ACTUAL_COLOR.slice(3, 5), 16)}, ${parseInt(ACTUAL_COLOR.slice(5, 7), 16)}, 0.05)`
                        }
                    ])
                }
            },
            {
                name: '理论发电',
                type: 'line',
                data: data.theoreticalData,
                smooth: true,
                symbol: 'circle',
                symbolSize: 6,
                itemStyle: {
                    color: THEORETICAL_COLOR
                },
                lineStyle: {
                    color: THEORETICAL_COLOR,
                    width: 3
                },
                emphasis: {
                    itemStyle: {
                        color: '#67C23A',
                        borderColor: '#fff',
                        borderWidth: 3
                    }
                },
                // 开始不显示拐点， 鼠标经过显示
                showSymbol: false,
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: `rgba(${parseInt(THEORETICAL_COLOR.slice(1, 3), 16)}, ${parseInt(THEORETICAL_COLOR.slice(3, 5), 16)}, ${parseInt(THEORETICAL_COLOR.slice(5, 7), 16)}, 0.2)`
                        },
                        {
                            offset: 1,
                            color: `rgba(${parseInt(THEORETICAL_COLOR.slice(1, 3), 16)}, ${parseInt(THEORETICAL_COLOR.slice(3, 5), 16)}, ${parseInt(THEORETICAL_COLOR.slice(5, 7), 16)}, 0.05)`
                        }
                    ])
                }
            },
        ]
    };

    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;
        }
    };
});

// 监听时间范围变化，更新图表
watch(timeRange, () => {
    initChart();
});
</script>

<style scoped>
.chart-container {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    height: 500px;
    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% - 54px);
    padding: 10px;
}

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

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

    .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;
    }
}

.model {
    padding: 20px;
    background-color: rgba(242, 248, 252, 1);
}
</style>
