<template>
    <el-container>
        <el-main>
            <!-- 顶部统计信息 -->
            <el-row :gutter="20" class="top-stats">
                <el-col :span="12">
                    <!-- <el-card class="box-card">
                        <h3 class="base-info-h3">基础信息：</h3>
                        <p class="base-info-p">业主姓名：李敏</p>
                        <p class="base-info-p">电站编码：2045456465489713</p>
                        <p class="base-info-p">安装地址：安徽省合肥市创新创业园</p>
                        <p class="base-info-p">实际安装容量：55.5KW</p>
                        <p class="base-info-p">项目公司：衡阳越勤光伏科技有限公司</p>
                    </el-card> -->
                    <el-card class="box-card">
                        <el-descriptions title="基础信息：" column="1" colon="true">
                            <el-descriptions-item label="业主姓名:">{{ station.ownerName }}</el-descriptions-item>
                            <el-descriptions-item label="电站编码:">{{ station.stationCode }}</el-descriptions-item>
                            <el-descriptions-item label="安装地址:">{{ station.address }}</el-descriptions-item>
                            <el-descriptions-item label="实际安装容量:">{{ zoom(station.actualCapacity)  }}KW</el-descriptions-item>
                            <el-descriptions-item label="项目公司:">{{ station.projectCompanyName }}</el-descriptions-item>
                            <el-descriptions-item label="资方:">{{ station.capitalName }}</el-descriptions-item>
                        </el-descriptions></el-card>

                </el-col>

                <el-col :span="12">
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <div class="stat-box">
                                <div class="stat-title">当日发电</div>
                                <div class="stat-value">{{ station.entryStat.etd }}KWh</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="stat-box">
                                <div class="stat-title">当月发电</div>
                                <div class="stat-value">{{ station.entryStat.etm }}MWh</div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <div class="stat-box">
                                <div class="stat-title">当年发电</div>
                                <div class="stat-value">{{ station.entryStat.ety }}MWh</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="stat-box">
                                <div class="stat-title">累计发电</div>
                                <div class="stat-value">{{ station.entryStat.eta }}MWh</div>
                            </div>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>

            <el-row>
                <el-col>


                    <el-card style="margin-top: 0px;">
                        <template #header>
                            <div class="card-header">
                                <span>发电趋势图</span>
                                <div class="right">
                                    <el-date-picker v-if="trendType == 'day'" :clearable="false" v-model="time"
                                        type="date" size="mini" class="fl mr10" style="width: 140px;"
                                        value-format="YYYY-MM-DD" @change="() => { this.getPowerGenerationTrends(); }"
                                        placeholder="选择日期">
                                    </el-date-picker>
                                    <el-date-picker v-if="trendType == 'month'" :clearable="false" v-model="time"
                                        type="month" size="mini" class="fl mr10" style="width: 140px;"
                                        value-format="YYYY-MM" @change="() => { this.getPowerGenerationTrends(); }"
                                        placeholder="选择月">
                                    </el-date-picker>
                                    <!-- <el-date-picker v-if="trendType == 'year'" :clearable="false" v-model="time"
                                        type="year" size="mini" class="fl mr10" style="width: 140px;"
                                        value-format="YYYY" @change="() => { this.getPowerGenerationTrends(); }"
                                        placeholder="选择年">
                                    </el-date-picker> -->
                                    <el-radio-group class="fl" v-model="trendType" size="mini" @change="handleType">
                                        <el-radio-button label="day">按日</el-radio-button>
                                        <el-radio-button label="week">近7日</el-radio-button>
                                        <el-radio-button label="month">按月</el-radio-button>
                                        <el-radio-button label="year">按年</el-radio-button>
                                    </el-radio-group>
                                </div>
                            </div>
                        </template>
                        <div id="trendChar" style="width: 100%; height: 230px"></div>
                        <!-- <v-chart :options="options" ref="trendChar"style="width: 100%; height: 230px"></v-chart> -->
                    </el-card>
                </el-col>
            </el-row>
        </el-main>

        <!-- 运维统计 -->
        <el-aside width="400px" class="sidebar">
            <weather :stationId="stationId" :day="time"></weather>
            <el-card style="margin-top: 10px;">
                <div slot="header" class="sidebar-title">运维统计</div>
                <div class="sidebar-content">

                    <div id="warnChart" style="height:180px; flex: 1"></div>
                </div>
            </el-card>
        </el-aside>
    </el-container>
</template>
 
<script>
import { getDetail, powerGenerationTrends } from "@/api/nh/powerStation";
import * as echarts from 'echarts';
import weather from '@/views/nh/components/weather.vue'
import func from '@/utils/func';

import { formatDate } from '@/utils/date';
export default {
    name: 'OverView',
    components: { weather },
    data() {
        return {
            stationId: JSON.parse(localStorage.getItem('power_station_detail_id')),
            station: { entryStat: {} },
            trendType: "day",
            time: "",
            trendChar: {}, //发电趋势
            warnChart: {}, //告警
        }
    },
    created() {
        // this.stationId = JSON.parse(localStorage.getItem('power_station_detail_id'));

        // powerGenerationTrends(this.stationId,"day",'2024-05-26').then(res => {
        //   const data = res.data.data;
        //   console.log(data)
        // });
    },
    mounted() {
        this.trendChar = echarts.init(document.getElementById('trendChar'));
        this.warnChart = echarts.init(document.getElementById('warnChart'));
        this.initDetail();
        // 可以在此处初始化图表
        this.initCharts();
    },

    methods: {
        zoom(num){
            return func.zoomNum(num,1,2);
        },
        handleType(e) {
            this.time = formatDate(new Date(), e);
            this.getPowerGenerationTrends();
        },
        initDetail() {
            //初始化电站详情
            getDetail(this.stationId).then(res => {
                console.log(res.data)
                this.station = res.data.data;
                if(Object.keys(this.station).length > 0){
                    if(Object.keys(this.station.entryStat).length > 0){
                        this.station.entryStat.etm = func.zoomNum(this.station.entryStat.etm,0.001,3);
                        this.station.entryStat.ety = func.zoomNum(this.station.entryStat.ety,0.001,3);
                        this.station.entryStat.eta = func.zoomNum(this.station.entryStat.eta,0.001,3);
                     }
                }
                // this.warnChart = this.station.overviewVo;

                let overviewVo = this.station.overviewVo;
                this.setWarnOptions(overviewVo.alarmDeal, overviewVo.alarmUnDeal)
            });
        },
        initCharts() {
            // 初始化图表的方法
            // 可以使用ECharts或其他图表库
            this.time = formatDate(new Date(), 'day');
            this.getPowerGenerationTrends();
            //自动缩放图表
            window.addEventListener('resize', () => {
                if (this.resizeTimer) clearTimeout(this.resizeTimer);
                this.resizeTimer = setTimeout(() => {
                    this.trendChar.resize();
                    this.warnChart.resize();
                }, 10)
            })
        },
        getPowerGenerationTrends() {
            powerGenerationTrends(this.stationId, this.trendType, this.time).then(res => {
                const data = res.data.data;
                this.setOptions('trendChar',
                    // ['2:00','4:00','6:00','8:00','10:00','12:00']
                    data.XStr
                    , [
                        {
                            name: '发电量',
                            smooth: true,
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: '#fc9709',
                                    lineStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                            {
                                                offset: 0,
                                                color: "rgba(248,220,156,0.5)"//'#f8dc9c'
                                            },
                                            {
                                                offset: 1,
                                                color: "rgba(238,180,49,0.5)" //'#eeb431'
                                            }
                                        ]),//线色
                                        width: 2
                                    },
                                    areaStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                            {
                                                offset: 0,
                                                color: "rgba(248,220,156,0.5)"//'#f8dc9c'
                                            },
                                            {
                                                offset: 1,
                                                color: "rgba(238,180,49,0.5)" //'#eeb431'
                                            }
                                        ]) //背景色
                                    },
                                }
                            },
                            data: data.fdlY,
                            // data: [100, 20, 80, 50, 60, 20],
                            animationDuration: 1000,
                            animationEasing: 'quadraticOut'
                        },
                        // {
                        //   name: '实时功率',
                        //   smooth: true,
                        //   type: 'line',
                        //   itemStyle: {
                        //     normal: {
                        //       color: "rgba(211,88,20, 0.5)",//d35814
                        //       lineStyle: {
                        //         color: '#ea9b68',
                        //         width: 2
                        //       },
                        //       areaStyle: {
                        //         color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                        //           {
                        //             offset: 0,
                        //             color: "rgba(211,88,20, 0.5)"
                        //           },
                        //           {
                        //             offset: 1,
                        //             color: "rgba(238,180,49, 0.5)"//'#eeb431'
                        //           }
                        //         ]) //背景色
                        //       }
                        //     }
                        //   },
                        //   data: res.data.ssglY,
                        //   // data: [80, 50, 60, 20, 90, 100],
                        //   animationDuration: 1000,
                        //   animationEasing: 'quadraticOut'
                        // },
                    ]);
            });
        },
        //告警统计图
        setWarnOptions(deal, unDeal) {
            this.warnChart.setOption({
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: 'top', // 将图例放在顶部
                    // left: 'left',
                    data: [
                        { name: '未处理', icon: 'rect' },
                        { name: '已处理', icon: 'rect' }
                    ]
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['40%', '70%'],
                        label: {
                            show: true,
                            alignTo: 'edge',
                            edgeDistance: 5,
                            width: 80,
                            formatter(param) {
                                return param.percent + "%";
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: function (colors) {
                                    console.log("colors", colors)
                                    let colorList = ['#d0d0d0', '#117fbc']
                                    return colorList[colors.dataIndex];
                                }
                            },
                        },
                        data: [
                            { value: unDeal, name: '未处理' },
                            { value: deal, name: '已处理' },
                        ]
                    }
                ]
            })
        },
        setOptions(name, xData, datas) {
            let that = this;
            let yAxis;
            if (name == 'trendChar') {
                yAxis = [
                    {
                        name: '发电量（kWh）',
                        type: 'value',
                        axisLine: {
                            show: true,
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: { show: true, textStyle: { color: '#606266' } },
                        splitLine: { show: false },
                    }
                ]
            } else {
                yAxis = [
                    {
                        name: '发电量（kWh）',
                        type: 'value',
                        axisLine: {
                            show: true,
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: { show: true, textStyle: { color: '#606266' } },
                        splitLine: { show: false },
                    },
                    // {
                    //   name: '功率（KW）',
                    //   nameLocation: 'end',
                    //   type: 'value',
                    //   splitLine:{ show: false},
                    //   axisLine: {
                    //     show: true,
                    //   },
                    //   axisLabel: { show: true, textStyle: { color: '#606266' } },
                    //   axisTick:{
                    //     show: false
                    //   }
                    // }
                ]
            }
            this.$data[name].setOption({
                // legend: {},
                legend: {
                    itemWidth: 16,
                    itemHeight: 4,
                    itemGap: 24,
                    data: [
                        { name: '发电量', icon: 'rect', },
                        { name: '实时功率', icon: 'rect', },
                        { name: '计划发电量', icon: 'rect', },
                        { name: '累计计划完成率', icon: 'rect', },
                    ],
                    textStyle: {
                        color: '#333'
                    }
                },
                xAxis: {
                    // name: '日期',
                    data: xData,
                    boundaryGap: false,
                    axisTick: {
                        show: false
                    },
                    axisLabel: { show: true, textStyle: { color: '#606266' } },
                },
                yAxis: yAxis,
                grid: {
                    left: 30,
                    right: 40,
                    bottom: 0,
                    top: 40,
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    padding: [5, 20],
                },
                series: datas
            })
        },
    }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.card-header {}

.fl {
    float: left;
}

.mr10 {
    margin-right: 10px;
}

.chart-small-placeholder {
    width: 100px;
    height: 100px;
    background-color: #e0e0e0;
    margin-top: 10px;
}

.top-stats {
    margin-bottom: 20px;
}

.stat-box {
    text-align: center;
    padding: 20px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    background: #fff;
}

.stat-title {
    font-size: 16px;
    color: #606266;
}

.stat-value {
    font-size: 24px;
    color: #303133;
    margin-top: 10px;
}

.chart-container,
.plan-container {
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    background: #fff;
}

.chart-title,
.plan-title {
    font-size: 16px;
    color: #606266;
    margin-bottom: 10px;
}

.chart-content,
.plan-content {
    height: 300px;
}

.sidebar {
    padding: 0 20px 20px 20px;
}

.sidebar-title {
    font-size: 16px;
    color: #606266;
}

.sidebar-content {
    padding: 10px;
}

.alert-section,
.order-section {
    margin-bottom: 20px;
}

.alert-title,
.order-title {
    font-size: 14px;
    color: #606266;
    margin-bottom: 10px;
}

.right {
    float: right;
}
</style>