<template>
    <div class="profit-analysis-container">
        <!-- 顶部核心指标卡片区 -->
        <div class="cards-container">
            <div class="card">
                <div class="card-icon water-icon">
                    <svg-icon icon-class="water" class-name="card-icon-svg" />
                </div>
                <div class="card-content">
                    <div class="card-label">用水金额</div>
                    <div class="card-value">{{ waterAmount }}元</div>
                    <div class="card-sub">{{ getAverageLabel() }} {{ waterDailyAvg }}元</div>
                </div>
            </div>

            <div class="card">
                <div class="card-icon electric-icon">
                    <svg-icon icon-class="elect" class-name="card-icon-svg" />
                </div>
                <div class="card-content">
                    <div class="card-label">用电金额</div>
                    <div class="card-value">{{ electricAmount }}元</div>
                    <div class="card-sub">{{ getAverageLabel() }} {{ electricDailyAvg }}元</div>
                </div>
            </div>

            <div class="card">
                <div class="card-icon unit-icon">
                    <svg-icon icon-class="unit" class-name="card-icon-svg" />
                </div>
                <div class="card-content">
                    <div class="card-label">单耗（度/吨）</div>
                    <div class="card-value">{{ unitConsumption }}</div>
                </div>
            </div>

            <div class="card">
                <div class="card-icon income-icon">
                    <svg-icon icon-class="income" class-name="card-icon-svg" />
                </div>
                <div class="card-content">
                    <div class="card-label">总收入</div>
                    <div class="card-value">{{ totalIncome }}元</div>
                </div>
            </div>
        </div>

        <!-- 筛选与控制区 -->
        <div class="filter-container">
            <div class="time-type-selector">
                <div v-for="type in timeTypes" :key="type.value"
                    :class="['time-type-item', { active: dateType === type.value }]"
                    @click="handleTimeTypeChange(type.value)">
                    {{ type.label }}
                </div>
            </div>

            <div class="date-picker-container">
                <el-date-picker v-if="dateType === 'day'" v-model="dayDate" type="daterange" range-separator="至"
                    value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" @change="dateChange" />
                <el-date-picker v-if="dateType === 'month'" v-model="monthDate" type="monthrange" range-separator="至"
                    start-placeholder="开始月份" end-placeholder="结束月份" value-format="yyyy-MM" @change="dateChange" />
                <div class="year-selector" v-if="dateType === 'year'">
                    <el-date-picker v-model="startYear" type="year" placeholder="选择开始年份" value-format="yyyy"
                        @change="dateChange" />
                    <span class="year-separator">至</span>
                    <el-date-picker v-model="endYear" type="year" placeholder="选择结束年份" value-format="yyyy"
                        @change="dateChange" />
                </div>
                <div class="success-btn" style="margin: 0 0.12rem">
                    <el-button type="success" @click="handleQuery">查询</el-button>
                </div>
                <div class="warning-btn">
                    <el-button type="warning" @click="handleExport">导出</el-button>
                </div>
            </div>
        </div>

        <!-- 图表区域 -->
        <div class="charts-container">
            <!-- 左侧：成本与收益对比图 -->
            <div class="chart-section">
                <div class="section-title">成本与收益对比图</div>
                <div class="chart-box" ref="costChart_ref"></div>
            </div>

            <!-- 右侧：收益趋势 -->
            <div class="trend-section">
                <!-- 成本构成饼图 -->
                <div class="chart-item" style="margin-bottom: 20px;">
                    <div class="section-title">成本构成</div>
                    <div class="chart-box-small" ref="pieChart_ref"></div>
                </div>

                <!-- 收益趋势折线图 -->
                <div class="chart-item">
                    <div class="section-title">收益趋势</div>
                    <div class="chart-box-small" ref="trendChart_ref"></div>
                </div>
            </div>
        </div>

        <!-- 表格区域 -->
        <div class="table-section">
            <div class="section-title">收益明细表</div>
            <div class="table-box">
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="curDate" label="日期" />
                    <el-table-column prop="waterPrice" label="用水单价(元)" />
                    <el-table-column prop="totalUseWaterAmount" label="用水量(吨)" />
                    <el-table-column prop="totalUseWater" label="用水金额(元)" />
                    <el-table-column prop="electPrice" label="用电单价(元)" />
                    <el-table-column prop="totalUseEleAmount" label="用电量(度)" />
                    <el-table-column prop="totalUseEle" label="用电金额(元)" />
                    <el-table-column prop="unitConsumption" label="单耗(度/吨)" />
                    <el-table-column prop="totalIncome" label="收入(元)">
                        <template slot-scope="{ row }">
                            <span
                                :class="{ 'profit-positive': row.totalIncome > 0, 'profit-negative': row.totalIncome < 0 }">
                                {{ row.totalIncome }}
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import { waternErgySum, waterRevenueQuery } from "@/api/hotWater/profitAnalysis";

export default {
    data() {
        return {
            // 核心指标数据
            waterAmount: "0",
            waterDailyAvg: "0",
            electricAmount: "0",
            electricDailyAvg: "0",
            unitConsumption: "0",
            totalIncome: "0",


            // 时间类型
            dateType: "day",
            timeTypes: [
                { label: "日", value: "day" },
                { label: "月", value: "month" },
                { label: "年", value: "year" }
            ],
            // 总条数
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                startTime: "",
                endTime: "",
            },
            // 日期选择
            dayDate: [],
            monthDate: [],
            startYear: "",
            endYear: "",

            // 图表实例
            costChart: null,
            pieChart: null,
            trendChart: null,

            // 表格数据
            tableData: [
            ]
        };
    },
    mounted() {
        this.initDefaultDates();
        this.initCostChart();
        this.initPieChart();
        this.initTrendChart();
        window.addEventListener("resize", this.handleResize);
        this.handleResize();
        // 初始化时加载数据
        this.fetchCardData();
        this.getList();
    },
    beforeDestroy() {
        window.removeEventListener("resize", this.handleResize);
        if (this.costChart) {
            this.costChart.dispose();
        }
        if (this.pieChart) {
            this.pieChart.dispose();
        }
        if (this.trendChart) {
            this.trendChart.dispose();
        }
    },
    methods: {
        // 初始化成本与收益对比图
        initCostChart() {

            const dates = this.tableData.map(item => item.curDate).reverse();
            const waterAmountData = this.tableData.map(item => item.totalUseWater).reverse();
            const electricAmountData = this.tableData.map(item => item.totalUseEle).reverse();

            const unitConsumptionData = this.tableData.map(item => item.unitConsumption).reverse();

            console.log(" electricAmountData", electricAmountData)

            this.costChart = echarts.init(this.$refs.costChart_ref);
            var Min1 = 0,
                Min2 = 0,
                Max1 = Math.ceil(Math.max(...waterAmountData, ...electricAmountData)),
                Max2 = Math.ceil(Math.max(...unitConsumptionData));
            const titleFontSize = this.$refs.costChart_ref.offsetWidth / 100;
            const option = {
                tooltip: {
                    trigger: "axis",
                    formatter: function (params) {
                        var res = params[0].name + "<br/>";
                        for (var i = 0, l = params.length; i < l; i++) {
                            var seriesName = params[i].seriesName;
                            var value = params[i].value;
                            var marker =
                                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
                                params[i].color.colorStops[0].color +
                                '"></span>';
                            if (seriesName.includes("金额")) {
                                res +=
                                    marker +
                                    seriesName +
                                    ":" +
                                    '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
                                    value +
                                    " " +
                                    "元" +
                                    "</span><br>";
                            } else {
                                res +=
                                    marker +
                                    seriesName +
                                    ":" +
                                    '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
                                    value +
                                    " " +
                                    "</span><br>";
                            }
                        }
                        return res;
                    },
                },
                legend: {
                    data: ["用水金额", "用电金额", "单耗"],
                    show: true,
                    textStyle: {
                        color: "white",
                    },
                    selectedMode: true,
                },
                grid: {
                    top: "15%",
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true
                },
                xAxis: {
                    type: "category",
                    //设置为true代表离零刻度间隔一段距离
                    boundaryGap: true,
                    // 修饰刻度标签的颜色即x坐标数据
                    axisLabel: {
                        // interval: 0, //强制显示所有x轴数据
                        // rotate: 30, //x轴坐标字体倾斜30度
                        color: "rgba(255, 255, 255, 1)",
                        fontSize: 14, // 设置字体大小，可根据需要调整
                    },
                    axisTick: {
                        show: false, // 不显示坐标轴刻度线
                    },
                    // x坐标轴的颜色
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#365576",
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#e2e6f0",
                        },
                    }, //x轴分割线
                    data: dates,
                },
                yAxis: [
                    {
                        type: "value",
                        name: "金额(元)",
                        // 设置 name 的样式
                        nameTextStyle: {
                            color: "rgba(255, 255, 255, 1)",
                            fontSize: 12,
                        },
                        // 修饰刻度标签的颜色即y坐标数据
                        axisLabel: {
                            color: "rgba(255, 255, 255, 1)",
                        },
                        // 显示y坐标轴
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#365576", // 设置 y 轴线的颜色
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "#1a3d62", // 设置分割线的颜色
                                type: "dashed", // 设置分割线为虚线
                            },
                        },
                        scale: true,
                        min: Min1,
                        max: Max1,
                        splitNumber: 10,
                        interval: (Max1 - Min1) / 10,
                    },
                    {
                        type: "value",
                        name: "单耗(度/吨)",
                        // 设置 name 的样式
                        nameTextStyle: {
                            color: "rgba(255, 255, 255, 1)",
                            fontSize: 12,
                        },
                        // 修饰刻度标签的颜色即y坐标数据
                        axisLabel: {
                            color: "rgba(255, 255, 255, 1)",
                        },
                        // 显示y坐标轴
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#365576", // 设置 y 轴线的颜色
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "#1a3d62", // 设置分割线的颜色
                                type: "dashed", // 设置分割线为虚线
                            },
                        },
                        scale: true,
                        min: Min2,
                        max: Max2,
                        splitNumber: 10,
                        interval: (Max2 - Min2) / 10,
                    },
                ],
                series: [
                    {
                        name: "用水金额",
                        type: "bar",
                        smooth: true,
                        symbol: "circle",
                        // 拐点大小
                        symbolSize: 8,

                        // 开始不显示拐点， 鼠标经过显示
                        showSymbol: false,
                        //折线颜色
                        itemStyle: {
                            color: "#0b75d3",
                            // 使用颜色渐变
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(1, 102, 251, 1)", // 起始颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(1, 102, 251, 0)", // 结束颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                            borderRadius: [5, 5, 0, 0], // 分别对应左上、右上、右下、左下的圆角半径
                        },
                        data: waterAmountData,
                    },
                    {
                        name: "用电金额",
                        type: "bar",
                        smooth: true,
                        symbol: "circle",
                        // 拐点大小
                        symbolSize: 8,
                        // 开始不显示拐点， 鼠标经过显示
                        showSymbol: false,
                        //折线颜色
                        itemStyle: {
                            color: "#0b75d3",
                            // 使用颜色渐变
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(0, 224, 225, 1)", // 起始颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(0, 224, 225, 0)", // 结束颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                            borderRadius: [5, 5, 0, 0],
                        },
                        data: electricAmountData,
                    },
                    {
                        name: "单耗",
                        type: "line",
                        smooth: false,
                        symbol: "circle",
                        // 拐点大小
                        symbolSize: 8,
                        yAxisIndex: 1,
                        // 开始不显示拐点， 鼠标经过显示
                        showSymbol: false,
                        //折线颜色
                        itemStyle: {
                            color: "#EE5217", //折线点的颜色
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "#EE5217", // 起始颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "#EE5217", // 结束颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                            lineStyle: {
                                color: "#EE5217", //折线的颜色
                            },
                        },
                        data: unitConsumptionData,
                    },
                ]
            };

            this.costChart.setOption(option);

            // 监听图例选择变化事件
            this.costChart.on('legendselectchanged', (params) => {
                this.handleLegendChanged(params);
            });
        },

        // 处理图例变化,重新计算y轴范围
        handleLegendChanged(params) {
            const waterAmountData = this.tableData.map(item => item.totalUseWater).reverse();
            const electricAmountData = this.tableData.map(item => item.totalUseEle).reverse();
            const unitConsumptionData = this.tableData.map(item => item.unitConsumption).reverse();

            // 获取当前选中的图例
            const selected = params.selected;
            const selectedNames = Object.keys(selected).filter(name => selected[name]);

            // 根据选中的图例重新计算y轴范围
            let Min1 = 0, Max1 = 0;
            let Min2 = 0, Max2 = 0;
            let hasAmountData = false;
            let hasUnitData = false;

            // 检查是否有金额相关的图例被选中
            if (selectedNames.includes('用水金额') || selectedNames.includes('用电金额')) {
                const activeAmountData = [];
                if (selectedNames.includes('用水金额')) {
                    activeAmountData.push(...waterAmountData);
                }
                if (selectedNames.includes('用电金额')) {
                    activeAmountData.push(...electricAmountData);
                }
                if (activeAmountData.length > 0) {
                    Max1 = Math.ceil(Math.max(...activeAmountData));
                    hasAmountData = true;
                }
            }

            // 检查是否有单耗图例被选中
            if (selectedNames.includes('单耗')) {
                Max2 = Math.ceil(Math.max(...unitConsumptionData));
                hasUnitData = true;
            }

            // 如果没有数据被选中,设置默认值
            if (!hasAmountData && !hasUnitData) {
                Max1 = 10;
                Max2 = 1;
            }

            // 更新图表选项
            this.costChart.setOption({
                yAxis: [
                    {
                        min: hasAmountData ? Min1 : 0,
                        max: hasAmountData ? Max1 : 10,
                        splitNumber: 10,
                        interval: hasAmountData ? (Max1 - Min1) / 10 : 1
                    },
                    {
                        min: hasUnitData ? Min2 : 0,
                        max: hasUnitData ? Max2 : 1,
                        splitNumber: 10,
                        interval: hasUnitData ? (Max2 - Min2) / 10 : 0.1
                    }
                ]
            });
        },

        // 初始化成本构成饼图
        initPieChart() {
            this.pieChart = echarts.init(this.$refs.pieChart_ref);

            // 使用顶部卡片的用水和用电金额（汇总数据）
            // 移除可能存在的千分位逗号
            const totalWaterAmount = parseFloat(String(this.waterAmount).replace(/,/g, '')) || 0;
            const totalElectricAmount = parseFloat(String(this.electricAmount).replace(/,/g, '')) || 0;

            const option = {
                tooltip: {
                    trigger: "item",
                    formatter: function (params) {
                        return `<div style="padding: 8px;">
              <div style="color: #fff; font-weight: bold; margin-bottom: 4px;">${params.name}</div>
              <div style="color: #fff;">金额: <span style="color: ${params.color}; font-weight: bold;">${params.value}</span> 元</div>
              <div style="color: #fff;">占比: <span style="color: ${params.color}; font-weight: bold;">${params.percent}%</span></div>
            </div>`;
                    },
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    borderColor: '#3b82f6',
                    borderWidth: 1,
                    borderRadius: 8,
                    padding: 12
                },
                legend: {
                    orient: "horizontal",
                    bottom: 0,
                    left: "center",
                    data: ["用水金额", "用电金额"],
                    itemGap: 20,
                    itemWidth: 14,
                    itemHeight: 14,
                    textStyle: {
                        color: "#ffffff",
                        fontSize: 12,
                        fontWeight: 500
                    },
                    padding: [5, 0, 5, 0]
                },
                series: [
                    {
                        name: "成本构成",
                        type: "pie",
                        radius: ["40%", "60%"],
                        center: ["50%", "45%"],
                        avoidLabelOverlap: true,
                        hoverOffset: 10,
                        selectedOffset: 5,
                        label: {
                            show: true,
                            position: "outside",
                            formatter: function (params) {
                                return [
                                    `{name|${params.name}}`,
                                    `{value|${params.value}元}`,
                                    `{percent|${params.percent}%}`
                                ].join('\n');
                            },
                            rich: {
                                name: {
                                    color: '#ffffff',
                                    fontSize: 11,
                                    fontWeight: 500,
                                    padding: [0, 0, 2, 0]
                                },
                                value: {
                                    color: '#ffffff',
                                    fontSize: 12,
                                    fontWeight: 'bold',
                                    padding: [0, 0, 2, 0]
                                },
                                percent: {
                                    color: '#fbbf24',
                                    fontSize: 11,
                                    fontWeight: 'bold'
                                }
                            },
                            lineHeight: 15,
                            distanceToLabelLine: 5
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 12,
                                fontWeight: 'bold'
                            },
                            scale: true,
                            scaleSize: 10
                        },
                        labelLine: {
                            show: true,
                            length: 15,
                            length2: 10,
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.6)',
                                width: 1,
                                type: 'solid'
                            },
                            smooth: true
                        },
                        data: [
                            {
                                value: totalWaterAmount,
                                name: "用水金额",
                                itemStyle: {
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 1,
                                        y2: 1,
                                        colorStops: [
                                            { offset: 0, color: '#3b82f6' },
                                            { offset: 1, color: '#8b5cf6' }
                                        ]
                                    },
                                    borderWidth: 2,
                                    borderColor: 'rgba(255, 255, 255, 0.2)',
                                    shadowBlur: 10,
                                    shadowColor: 'rgba(59, 130, 246, 0.5)'
                                }
                            },
                            {
                                value: totalElectricAmount,
                                name: "用电金额",
                                itemStyle: {
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 1,
                                        y2: 1,
                                        colorStops: [
                                            { offset: 0, color: '#10b981' },
                                            { offset: 1, color: '#06b6d4' }
                                        ]
                                    },
                                    borderWidth: 2,
                                    borderColor: 'rgba(255, 255, 255, 0.2)',
                                    shadowBlur: 10,
                                    shadowColor: 'rgba(16, 185, 129, 0.5)'
                                }
                            }
                        ]
                    }
                ]
            };

            this.pieChart.setOption(option);
        },

        // 初始化收益趋势折线图
        initTrendChart() {
            this.trendChart = echarts.init(this.$refs.trendChart_ref);

            const dates = this.tableData.map(item => item.curDate).reverse();
            const incomeData = this.tableData.map(item => item.totalIncome).reverse();

            const option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross"
                    }
                },
                legend: {
                    show: false,
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true
                },
                xAxis: {
                    type: "category",
                    data: dates,
                    //设置为true代表离零刻度间隔一段距离
                    boundaryGap: true,
                    // 修饰刻度标签的颜色即x坐标数据
                    axisLabel: {
                        // interval: 0, //强制显示所有x轴数据
                        // rotate: 30, //x轴坐标字体倾斜30度
                        color: "rgba(255, 255, 255, 1)",
                        fontSize: 14, // 设置字体大小，可根据需要调整
                    },
                    axisTick: {
                        show: false, // 不显示坐标轴刻度线
                    },
                    // x坐标轴的颜色
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#365576",
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#e2e6f0",
                        },
                    }, //x轴分割线
                },
                yAxis: {
                    type: "value",
                    name: "金额（元）",
                    // 设置 name 的样式
                    nameTextStyle: {
                        color: "rgba(255, 255, 255, 1)",
                        fontSize: 12,
                    },
                    // 修饰刻度标签的颜色即y坐标数据
                    axisLabel: {
                        color: "rgba(255, 255, 255, 1)",
                    },
                    // 显示y坐标轴
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#365576", // 设置 y 轴线的颜色
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#1a3d62", // 设置分割线的颜色
                            type: "dashed", // 设置分割线为虚线
                        },
                    },
                },
                series: [
                    {
                        name: "收入",
                        type: "line",
                        data: incomeData,
                        smooth: true,
                        itemStyle: {
                            color: "#10b981"
                        },
                        areaStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    { offset: 0, color: "rgba(16, 185, 129, 0.3)" },
                                    { offset: 1, color: "rgba(16, 185, 129, 0.1)" }
                                ]
                            }
                        }
                    }
                ]
            };

            this.trendChart.setOption(option);
        },

        // 窗口大小调整
        handleResize() {
            if (this.costChart) {
                this.costChart.resize();
            }
            if (this.pieChart) {
                this.pieChart.resize();
            }
            if (this.trendChart) {
                this.trendChart.resize();
            }
        },

        // 时间类型切换
        handleTimeTypeChange(type) {
            this.dateType = type;
            this.fetchCardData();
            this.queryParams.pageNum = 1;
            this.getList();
        },

        // 获取平均值标签
        getAverageLabel() {
            const labelMap = {
                'day': '日均',
                'month': '月均',
                'year': '年均'
            };
            return labelMap[this.dateType] || '日均';
        },

        // 日期变化
        dateChange() {
            // 可以在这里添加日期变化后的逻辑
            console.log("日期变化");
        },

        // 查询
        handleQuery() {
            // 验证日期范围是否已选择
            const dateRange = this.getDateRange();
            if (!dateRange.start || !dateRange.end) {
                this.$message.warning('请选择日期范围');
                return;
            }
            console.log("查询数据");
            this.fetchCardData();
            this.queryParams.pageNum = 1;
            this.getList();
        },

        // 获取顶部卡片数据
        async fetchCardData() {
            try {
                // 构建查询参数
                const params = {
                    startDate: this.getDateRange().start,
                    endDate: this.getDateRange().end,
                    type: this.getTypeValue(),
                    buildingId: '所有'
                };

                const res = await waternErgySum(params);
                if (res.code === 200 && res.rows && res.rows.length > 0) {
                    const data = res.rows[0];
                    // 更新卡片数据
                    this.waterAmount = data.totalUseWater ? data.totalUseWater.toFixed(2) : '0';
                    this.waterDailyAvg = data.avgUseWater ? data.avgUseWater.toFixed(2) : '0';
                    this.electricAmount = data.totalUseEle ? data.totalUseEle.toFixed(2) : '0';
                    this.electricDailyAvg = data.avgUseEle ? data.avgUseEle.toFixed(2) : '0';
                    this.unitConsumption = data.unitConsumption !== null ? data.unitConsumption.toString() : '0';
                    this.totalIncome = data.totalIncome ? data.totalIncome.toFixed(2) : '0';
                }
            } catch (error) {
                console.error('获取卡片数据失败:', error);
            }
        },

        // 获取日期范围
        getDateRange() {
            let start = '';
            let end = '';

            if (this.dateType === 'day' && this.dayDate && this.dayDate.length === 2) {
                // 日：年-月-日
                start = this.dayDate[0];
                end = this.dayDate[1];
            } else if (this.dateType === 'month' && this.monthDate && this.monthDate.length === 2) {
                // 月：年-月
                start = this.monthDate[0];
                end = this.monthDate[1];
            } else if (this.dateType === 'year' && this.startYear && this.endYear) {
                // 年：年
                start = this.startYear;
                end = this.endYear;
            }

            return { start, end };
        },

        // 获取type对应的值
        getTypeValue() {
            const typeMap = {
                'day': 1,
                'month': 2,
                'year': 3
            };
            return typeMap[this.dateType] || 1;
        },

        // 导出
        handleExport() {
            console.log("导出数据");
            if (this.tableData) {
                import("@/assets/excel/Export2Excel").then((excel) => {
                    var tHeader = [
                        "日期",
                        "用水单价(元)",
                        "用水量(吨)",
                        "用水金额(元)",
                        "用电单价(元)",
                        "用电量(度)",
                        "用电金额(元)",
                        "单耗(度/吨)",
                        "收入(元)",
                    ]; // 导出的excel表头名信息
                    var filterVal = [
                        "curDate",
                        "waterPrice",
                        "totalUseWaterAmount",
                        "totalUseWater",
                        "electPrice",
                        "totalUseEleAmount",
                        "totalUseEle",
                        "unitConsumption",
                        "totalIncome",
                    ]; // 导出的excel表头字段名，需要导出表格字段名
                    const data = this.formatJson(filterVal, this.tableData);
                    const autoWidth = true;
                    excel.export_json_to_excel({
                        header: tHeader, //表头
                        data, //数据
                        filename: "收益分析报表(" + this.getDateRange().start + "至" + this.getDateRange().end + ")", //名称
                        autoWidth: true, //宽度自适应
                    });
                });
                this.$message({
                    type: "success",
                    message: "导出成功!",
                });
            } else {
                this.$message.error("导出失败!");
            }
        },
        //格式转换,不需要改动
        formatJson(filterVal, jsonData) {
            return jsonData.map((v) =>
                filterVal.map((j) => {
                    if (j === "installDate") {
                        return format(v[j]);
                    } else {
                        return v[j];
                    }
                })
            );
        },

        // 初始化默认日期
        initDefaultDates() {
            const now = new Date();
            const currentYear = now.getFullYear();
            const currentMonth = now.getMonth() + 1;
            const currentDay = now.getDate();

            // 日：今年这个月的1号到今天
            const monthStart = new Date(currentYear, currentMonth - 1, 1);
            const today = new Date(currentYear, currentMonth - 1, currentDay);

            const formatDate = (date) => {
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                return `${year}-${month}-${day}`;
            };

            this.dayDate = [formatDate(monthStart), formatDate(today)];

            // 月：今年1月到当前月
            const formatMonth = (date) => {
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                return `${year}-${month}`;
            };

            const yearStart = new Date(currentYear, 0, 1);
            const currentMonthDate = new Date(currentYear, currentMonth - 1, 1);
            this.monthDate = [formatMonth(yearStart), formatMonth(currentMonthDate)];

            // 年：当前年份
            this.startYear = String(currentYear);
            this.endYear = String(currentYear);
        },

        // 获取列表数据（图表和表格）
        async getList() {
            try {
                // 构建查询参数
                const params = {
                    startDate: this.getDateRange().start,
                    endDate: this.getDateRange().end,
                    type: this.getTypeValue(),
                    buildingId: '所有',
                    pageNum: this.queryParams.pageNum,
                    pageSize: this.queryParams.pageSize
                };

                const res = await waterRevenueQuery(params);
                if (res.code === 200 && res.rows) {
                    // 处理表格数据
                    this.tableData = res.rows;

                    this.total = res.total || 0;

                    // 更新图表
                    this.$nextTick(() => {
                        this.updateCharts();
                    });
                }
            } catch (error) {
                console.error('获取列表数据失败:', error);
            }
        },

        // 更新所有图表
        updateCharts() {
            this.initCostChart();
            this.initPieChart();
            this.initTrendChart();
        },
    }
};
</script>

<style lang="scss" scoped>
.profit-analysis-container {
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;

    .section-title {
        font-size: 16px;
        font-weight: bold;
        color: #ffffff;
        margin-bottom: 16px;
    }

    .cards-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
        margin-bottom: 20px;

        .card {
            background: rgba(29, 111, 233, 0.3);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            display: flex;
            align-items: center;
            transition: all 0.3s ease;

            &:hover {
                background: rgba(255, 255, 255, 0.12);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
                transform: translateY(-2px);
            }

            .card-icon {
                width: 60px;
                height: 60px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 16px;
                font-size: 28px;

                .card-icon-svg {
                    width: 32px;
                    height: 32px;
                    fill: white;
                }

                &.water-icon {
                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                    color: white;
                }

                &.electric-icon {
                    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
                    color: white;
                }

                &.unit-icon {
                    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
                    color: white;
                }

                &.income-icon {
                    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
                    color: white;
                }
            }

            .card-content {
                flex: 1;

                .card-label {
                    font-size: 14px;
                    color: #a0aec0;
                    margin-bottom: 8px;
                }

                .card-value {
                    font-size: 24px;
                    font-weight: bold;
                    color: #ffffff;
                    margin-bottom: 4px;
                }

                .card-sub {
                    font-size: 12px;
                    color: #cbd5e0;

                    &.profit-rate {
                        color: #10b981;
                        font-weight: 500;
                    }
                }
            }
        }
    }

    .filter-container {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(29, 111, 233, 0.3);
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
        display: flex;
        justify-content: flex-start;
        gap: 20px;
        flex-wrap: wrap;

        .time-type-selector {
            display: flex;
            gap: 8px;

            .time-type-item {
                padding: 8px 16px;
                border-radius: 6px;
                border: 1px solid rgba(29, 111, 233, 0.3);
                background: rgba(255, 255, 255, 0.1);
                color: #ffffff;
                cursor: pointer;
                transition: all 0.3s ease;
                font-size: 14px;

                &:hover {
                    background: rgba(29, 111, 233, 0.3);
                }

                &.active {
                    background: #3b82f6;
                    color: white;
                    border-color: #3b82f6;
                }
            }
        }

        .date-picker-container {
            flex: 1;
            display: flex;
            align-items: center;

            .year-selector {
                display: flex;
                align-items: center;
                gap: 10px;

                .year-separator {
                    color: #cbd5e0;
                }
            }
        }
    }

    .charts-container {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;

        .chart-section {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(29, 111, 233, 0.3);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            width: 68%;


            .chart-box {
                flex: 1;
                min-height: 400px;
            }
        }

        .trend-section {
            display: flex;
            flex-direction: column;
            width: 30%;

            .chart-item {
                background: rgba(255, 255, 255, 0.1);
                border: 1px solid rgba(29, 111, 233, 0.3);
                border-radius: 12px;
                padding: 20px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                display: flex;
                flex-direction: column;
                width: 100%;

                .chart-box-small {
                    flex: 1;
                    min-height: 250px;
                }
            }
        }
    }

    .table-section {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(29, 111, 233, 0.3);
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        margin-top: 20px;


        .table-box {
            min-height: 400px;
            overflow: auto;

            ::v-deep .el-table {
                border: none;

                &::before {
                    display: none;
                }

                th {
                    background-color: rgba(255, 255, 255, 0.1);
                    color: #ffffff;
                    font-weight: 600;
                }

                tr {
                    transition: all 0.3s ease;

                    &:hover {
                        background-color: rgba(255, 255, 255, 0.1);
                    }

                    td {
                        border: none;
                        padding: 12px;
                        color: #ffffff;
                    }
                }

                .profit-positive {
                    color: #10b981;
                    font-weight: bold;
                }

                .profit-negative {
                    color: #ef4444;
                    font-weight: bold;
                }
            }
        }

        .table-footer {
            text-align: right;
            color: #cbd5e0;
            font-size: 12px;
            padding: 10px 0 0 0;
        }
    }
}

// 响应式设计
@media (max-width: 1200px) {
    .chart-section {
        width: 58% !important;
    }

    .trend-section {
        width: 40% !important;

    }
}

@media (max-width: 768px) {
    .cards-container {
        grid-template-columns: 1fr;
    }

    .filter-container {
        flex-direction: column;
        align-items: stretch;

        .date-picker-container {
            width: 100%;
        }

        .button-group {
            width: 100%;

            .el-button {
                flex: 1;
            }
        }
    }
}
</style>
