<template>
    <el-dialog custom-class="globalDiaWhite" :title="title" v-model="dialogVisible" width="90%" :close-on-click-modal="false" @close="closeDialog">
        <div class="globalDiaMain" v-loading="loading">
            <div class="main_top">
                <div class="main_top_left">
                    <div class="exceed">
                        <span style="margin-top: 3px;">时间：</span>
                        <el-date-picker
                            v-model="monthVal"
                            v-if="isMonth"
                            type="daterange"
                            value-format="YYYY-MM-DD"
                            :clearable='false'
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                        <el-date-picker
                            v-model="yearVal"
                            v-else
                            type="monthrange"
                            value-format="YYYY-MM"
                            range-separator="至"
                            start-placeholder="开始月份"
                            end-placeholder="结束月份">
                        </el-date-picker>
                    </div>
                    <div class="exceed">
                        <span style="margin-top: 3px;">超前：</span>
                        <el-select class="exTime" v-model="chooseExceedTimeFv" placeholder="请选择">
                            <el-option
                            v-for="item in ExceedTimeList"
                            :key="item.value"
                            :label="item.label"
                            :disabled="item.disabled"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <el-button type="primary" @click="seachData">查 询</el-button>
                    <el-button @click="exportExcel">导出查询结果</el-button>
                </div>
            </div>
            <div class="main_charts">
                <div id="centersCharts" class="chartsStyle"></div>
            </div>
            <div class="main_table">
                <el-table :data="tableData" ref="report-table" border style="width: 100%">
                    <el-table-column prop="dataTime" label="时间" align="center" width="160"></el-table-column>
                    <el-table-column label="当期数据" align="center">
                        <el-table-column prop="veryShortTermForecastDq" label="计划发电" align="center"></el-table-column>
                        <el-table-column prop="actualPowerDq" label="实际发电" align="center"></el-table-column>
                        <el-table-column prop="shortTermForecastDq" label="预测发电" align="center"></el-table-column>
                    </el-table-column>
                    <el-table-column label="同期数据" align="center">
                        <el-table-column prop="veryShortTermForecastTq" label="计划发电" align="center"></el-table-column>
                        <el-table-column prop="actualPowerTq" label="实际发电" align="center"></el-table-column>
                        <el-table-column prop="shortTermForecastTq" label="预测发电" align="center"></el-table-column>
                    </el-table-column>
                    <el-table-column label="同期比率" align="center">
                        <el-table-column prop="tqActualRatio" label="计划发电" align="center"></el-table-column>
                        <el-table-column prop="tqUltraRatio" label="实际发电" align="center"></el-table-column>
                        <el-table-column prop="tqShortRatio" label="预测发电" align="center"></el-table-column>
                    </el-table-column>
                    <el-table-column label="环比数据" align="center">
                        <el-table-column prop="veryShortTermForecastSy" label="计划发电" align="center"></el-table-column>
                        <el-table-column prop="actualPowerSy" label="实际发电" align="center"></el-table-column>
                        <el-table-column prop="shortTermForecastSy" label="预测发电" align="center"></el-table-column>
                    </el-table-column>
                    <el-table-column label="环比比率" align="center">
                        <el-table-column prop="hbActualRatio" label="计划发电" align="center"></el-table-column>
                        <el-table-column prop="hbUltraRatio" label="实际发电" align="center"></el-table-column>
                        <el-table-column prop="hbShortRatio" label="预测发电" align="center"></el-table-column>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import  * as XLSX from 'xlsx'
import { saveAs } from 'file-saver'
import  * as XLSXD from 'xlsx-js-style'
import { apiGetmonthlyDailyPowerComparisonChartData,apiGetyearlyDailyPowerComparisonChartData,
apiGetmonthlyDailyPowerComparisonTableData,apiGetyearlyDailyPowerComparisonTableData} from '../../api/api'
export default {
    props:{
        from: {
            type: String,
            default: () => {
                return '';
            },
        },
        ExceedTimeList: {
            type: Array,
            default: () => {
                return [];
            },
        },
        stationData:{
            type: Array,
            default: () => {
                return [];
            },
        }
    },
    data() {
        return {
            title: '',
            dialogVisible: false,
            windTurbines: null,
            windTurbinesVal: null,
            tableData: [],
            chooseExceedTimeFv: 0,
            pickerTime: [],
            monthVal: [],
            yearVal: [],
            loading: false,
            isMonth: false
        }
    },
    created() {
    },
    methods:{
        closeDialog() {
            this.dialogVisible = false
        },
        seachData() {
            this.loading = true
            this.getChartsData()
            this.getTableData()
            
        },
        chooseVal(val) {
            this.stationData.forEach(item => {
                if (item.no === val) {
                    this.windTurbinesVal = item.itemVal
                }
            })
        },
        // 全域功率预测echarts
        getChartsData() {
            let that = this
            let params = {
                leadTime: that.chooseExceedTimeFv,
                stationNumber: that.windTurbines,
                itemVal: that.windTurbinesVal
            }
            if (that.isMonth) {
                params.beginDataTime = that.monthVal[0]
                params.endDataTime = that.monthVal[1]
                apiGetmonthlyDailyPowerComparisonChartData(params).then(datas =>{
                    that.changeChartsData(datas)
                })
            } else {
                params.beginDataTime = that.yearVal[0]
                params.endDataTime = that.yearVal[1]
                delete params.leadTime
                apiGetyearlyDailyPowerComparisonChartData(params).then(datas =>{
                    that.changeChartsData(datas)
                })
            }
        },
        //数据处理
        changeChartsData(datas) {
            if (datas && datas.data) {
                let xAxis = []
                let series = []
                let legend = []
                if (datas.data.dateList.length > 0) {
                    datas.data.dateList.forEach(item =>{
                    if (this.isMonth) {
                        xAxis.push(item.substring(0, item.indexOf(' ')))
                    } else {
                        xAxis.push(item.substring(0, item.indexOf(' ')-3))
                    }
                })
                }
                if (datas.data.dataFormatList.length > 0) {
                    datas.data.dataFormatList.forEach(iten =>{
                        legend.push(iten.name)
                        let seriesObj = {
                            name: iten.name,
                            type: 'line',
                            data: iten.data.map(it => {
                                    return this.$utils.isHasNum(it)
                                }),
                            symbol: 'none'
                        }
                        series.push(seriesObj)
                    })
                }
                this.getglobalLine('centersCharts', xAxis, legend, series)
            }
        },
        getglobalLine(name, xAxis, legend, series) {
            let option = {
                title: {
                    text: '电量'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    right: '20',
                    data: legend
                },
                grid: {
                    left: '5%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xAxis
                },
                yAxis: {
                    type: 'value',
                    name: '万千瓦时(Wkw/h)'
                },
                series: series
            };
            if (this.from === 'index') {
                option.backgroundColor = ''
            }
            // 基于准备好的dom，初始化echarts实例
            let dom = document.getElementById(name);
            dom.removeAttribute("_echarts_instance_")
            let myChart = this.$echarts.init(dom);
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize()
            })
        },
        // 全域功率预测table
        getTableData() {
            let that = this
            let params = {
                leadTime: that.chooseExceedTimeFv,
                stationNumber: that.windTurbines,
                itemVal: that.windTurbinesVal
            }
            if (that.isMonth) {
                params.beginDataTime = that.monthVal[0]
                params.endDataTime = that.monthVal[1]
                apiGetmonthlyDailyPowerComparisonTableData(params).then(datas =>{
                    that.changeTableData(datas)
                })
            } else {
                params.beginDataTime = that.yearVal[0]
                params.endDataTime = that.yearVal[1]
                delete params.leadTime
                apiGetyearlyDailyPowerComparisonTableData(params).then(datas =>{
                    that.changeTableData(datas)
                })
            }
        },
        changeTableData(datas){
            if (datas && datas.data) {
                this.loading = false
                if (datas.data.dataFormatList) {
                    datas.data.dataFormatList.forEach(item =>{
                        for(let i in item) {
                            if (i !== 'dataTime') {
                                item[i] = this.$utils.isHasNum(item[i])
                            } else {
                                if (!this.isMonth) {
                                    item[i] = item[i].substring(0, item[i].lastIndexOf('-'))
                                }
                            }
                        }
                        //同期计划发电
                        item.tqActualRatio = this.$utils.ratioCalculation(item.veryShortTermForecastDq, item.veryShortTermForecastTq)
                        //同期实际发电
                        item.tqUltraRatio = this.$utils.ratioCalculation(item.actualPowerDq, item.actualPowerTq)
                        //同期预测发电
                        item.tqShortRatio = this.$utils.ratioCalculation(item.shortTermForecastDq, item.shortTermForecastTq)
                        //环比计划发电
                        item.hbActualRatio = this.$utils.ratioCalculation(item.veryShortTermForecastDq, item.veryShortTermForecastSy)
                        //环比实际发电
                        item.hbUltraRatio = this.$utils.ratioCalculation(item.actualPowerDq, item.actualPowerSy)
                        //环比预测发电
                        item.hbShortRatio = this.$utils.ratioCalculation(item.shortTermForecastDq, item.shortTermForecastSy)
                    })
                    this.tableData = datas.data.dataFormatList
                }
            }
        },
        exportExcel() {
            let $e = this.$refs['report-table'].$el
            try {
                let $table = $e.querySelector('.el-table__fixed')
                if(!$table) {
                    $table = $e
                }
                const wb = XLSX.utils.table_to_book($table, {raw:true})
                if (wb && wb.Sheets.Sheet1) {
                    let as = ['!cols', '!fullref', '!merges', '!ref', '!rows']
                    let bs = ['时间', '当期数据', '实际发电','预测发电', '同期数据', '同期比率', '环比数据', '环比比率']
                    for(let i in wb.Sheets.Sheet1) {
                        if (as.indexOf(i)<0) {
                            if (bs.indexOf(wb.Sheets.Sheet1[i].v)>=0) {
                                wb.Sheets.Sheet1[i].s = {
                                    font:{
                                        name: '微软雅黑',
                                        sz: 11,
                                        bold: true,
                                        color: {rgb: 'ffffff'}
                                    },
                                    alignment: {
                                        horizontal: 'center',
                                        vertical: 'center'
                                    },
                                    fill:{fgColor: {rgb: '4f81bd'}}
                                }
                                if (i === 'A1') {
                                    wb.Sheets.Sheet1['!cols'].push({wch: 30})
                                } else if (i === 'B1') {
                                    wb.Sheets.Sheet1['!cols'].push({wch: 20})
                                } else {
                                    wb.Sheets.Sheet1['!cols'].push({wch: 15})
                                }
                            } else {
                                wb.Sheets.Sheet1[i].s = {
                                    font:{
                                        name: '微软雅黑',
                                        sz: 10,
                                        bold: false,
                                        color: {rgb: '000000'}
                                    },
                                    alignment: {
                                        horizontal: 'center',
                                        vertical: 'center'
                                    },
                                    // fill:{fgColor: {rgb: '4f81bd'}}
                                }
                            }
                        }
                    }
                }

                const wbout = XLSXD.write(wb, {bookType: 'xlsx', bookSST:true, type: 'array'})
                saveAs(
                    new Blob([wbout],{type: 'application/octet-stream'}),
                    `${this.title}.xlsx`,
                )
            } catch (e) {
                if (typeof console !== 'undefined') console.error(e)
            }
        }
    }
}
</script>

<style lang="less">
@import '../SecondaryPageStyle/globalblackStyle.less';
@import '../SecondaryPageStyle/globalwhiteStyle.less';
</style>
<style lang="less">
.globalDiaMain{
    .main_top{
        .main_top_left{
            .exceed{
                .el-date-editor{
                    .el-input__prefix{
                        margin-left: 5px !important;
                    }
                }
            }
        }
    }
}
</style>