<template>
    <div class="statisticalSummary" :class="!theme ? 'themeDark' : 'themeLight'">
        <div class="statistical_wind">
            <el-row class="windStstus">
                <el-col :span="24" class="scrollbar">
                    <!-- <span class="scrollbarName">场站名称：</span> -->
                    <el-scrollbar>
                        <div class="scrollbar-flex-content">
                            <p v-for="item in stationData" :key="item.no" class="scrollbar-demo-item"
                                :class="item.showBac ? 'changeBacksty' : 'defaultBacksty'"
                                @click="changeStation(item.no)">
                                {{ item.stationName }}
                            </p>
                        </div>
                    </el-scrollbar>
                </el-col>
            </el-row>
        </div>
        <div class="lineMain" v-loading="loading">
            <el-row>
                <el-col :span="10" :style="pageHeight" style="padding-right: 10px;">
                    <div class="lineStyle1">
                        <div id="monthChartBar" :style="chartsHeight"></div>
                    </div>
                    <div class="lineStyle1">
                        <el-row style="width: 100%;text-align: center;">
                            <el-col :span="3" v-for="item in showpieColor" :key="item.name">
                                <span class="pieColorLine" :style="{'background': item.value}"></span>
                                <span :style="!theme ? 'color: #fff' : ''"
                                    style="font-size: 12px;margin-left: 8px;">{{item.name}}</span>
                            </el-col>
                        </el-row>
                        <div style="display:flex">
                            <div id="pieChartY" :style="pieHeight"></div>
                            <div id="pieChartS" :style="pieHeight"></div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="14" :style="pageHeight">
                    <div class="lineStyle1">
                        <div id="yearChartBar" :style="chartsHeight"></div>
                        <div :style="tableHeight">
                            <div style="display:flex;margin:10px 0">
                                <!-- <el-button type="primary" disabled>年发电量报告</el-button> -->
                            </div>
                            <div class="tablestyle warn-table" style="margin-top:30px">
                                <el-table :data="tableData" border style="width: 100%"
                                    element-loading-background="rgba(0,0,0,.5)"
                                    :header-cell-style="{'text-align':'center'}">
                                    <el-table-column prop="name" label="月份" align="center" fixed>
                                    </el-table-column>
                                    <el-table-column prop="statistic" label="合计" align="right" fixed>
                                    </el-table-column>
                                    <el-table-column :prop="item.value" width="73" align="right" :label="item.name"
                                        v-for="(item, index) in tableColumn" :key="index">
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {
        apiGetStationDL,
        apiGetmonthlyPower,
        apiGetannualPower
    } from '../../api/api'
    export default {
        data() {
            return {
                windTurbines: '',
                windTurbinesName: '',
                itemVal: '',
                stationData: [],
                tableData: [],
                pieColor: [],
                showpieColor: [],
                tableColumn: [],
                loading: false,
                echartsTheme: '',
                theme: null
            }
        },
        watch: {
            '$store.state.theme': {
                handler: function (newVal, oldVal) {
                    this.theme = newVal
                    this.echartsTheme = !newVal ? 'dark' : ''
                    this.getStationData()
                },
                immediate: true
            }
        },
        created() {
            this.getStationData()
            this.pieColor = [{
                        value: '',
                        name: '一月'
                    },
                    {
                        value: '',
                        name: '二月'
                    },
                    {
                        value: '',
                        name: '三月'
                    },
                    {
                        value: '',
                        name: '四月'
                    },
                    {
                        value: '',
                        name: '五月'
                    },
                    {
                        value: '',
                        name: '六月'
                    },
                    {
                        value: '',
                        name: '七月'
                    },
                    {
                        value: '',
                        name: '八月'
                    },
                    {
                        value: '',
                        name: '九月'
                    },
                    {
                        value: '',
                        name: '十月'
                    },
                    {
                        value: '',
                        name: '十一月'
                    },
                    {
                        value: '',
                        name: '十二月'
                    },
                    {
                        value: '',
                        name: '未发电量'
                    }
                ],
                this.tableColumn = [{
                        value: 'january',
                        name: '一月'
                    },
                    {
                        value: 'february',
                        name: '二月'
                    },
                    {
                        value: 'march',
                        name: '三月'
                    },
                    {
                        value: 'april',
                        name: '四月'
                    },
                    {
                        value: 'may',
                        name: '五月'
                    },
                    {
                        value: 'june',
                        name: '六月'
                    },
                    {
                        value: 'july',
                        name: '七月'
                    },
                    {
                        value: 'august',
                        name: '八月'
                    },
                    {
                        value: 'september',
                        name: '九月'
                    },
                    {
                        value: 'october',
                        name: '十月'
                    },
                    {
                        value: 'november',
                        name: '十一月'
                    },
                    {
                        value: 'december',
                        name: '十二月'
                    }
                ]
        },
        computed: {
            pageHeight() {
                return {
                    'height': document.documentElement.clientHeight - 130 + 'px'
                }
            },
            chartsHeight() {
                let height = (document.documentElement.clientHeight - 140) / 2 + 'px'
                return {
                    'width': '100%',
                    'height': height
                }
            },
            pieHeight() {
                let height = (document.documentElement.clientHeight - 310) / 2 + 'px'
                return {
                    'width': '100%',
                    'height': height
                }
            },
            tableHeight() {
                let height = (document.documentElement.clientHeight - 190) / 2 + 'px'
                return {
                    'width': '100%',
                    'height': height
                }
            }
        },
        methods: {
            changeStation(val) {
                this.windTurbines = val
                this.stationData.forEach(item => {
                    if (item.no === val) {
                        this.windTurbinesName = item.stationName
                        item.showBac = true
                    } else {
                        item.showBac = false
                    }
                })
                this.getWindSpeed()
                this.getYearData()
            },
            getStationData() {
                let that = this
                that.loading = true
                apiGetStationDL().then(datas => {
                    that.stationData = datas.data.list
                    let obj = {
                        stationName: '全域数据',
                        no: -1,
                        itemVal: 0
                    }
                    that.stationData.unshift(obj)
                    that.windTurbines = datas.data.list[0].no
                    that.windTurbinesName = datas.data.list[0].stationName
                    that.itemVal = datas.data.list[0].itemVal
                    this.stationData[0].showBac = true
                    that.getWindSpeed('only')
                    that.getYearData('only')
                })
            },
            // 月发电量及功率预测--曲线图
            getWindSpeed() {
                let that = this
                let params = {
                    stationNumber: that.windTurbines,
                    itemVal: that.itemVal
                }
                apiGetmonthlyPower(params).then(datas => {
                    if (datas && datas.data) {
                        let xAxis = []
                        let series = []
                        let series1 = []
                        let legend = []
                        if (datas.data.dateList.length > 0) {
                            datas.data.dateList.forEach(item => {
                                xAxis.push(item.substring(0, item.indexOf(' ') + 1))
                            })
                        }
                        if (datas.data.dataFormatList.length > 0) {
                            datas.data.dataFormatList.forEach((iten, index) => {
                                legend.push(iten.name)
                                let seriesObj = {
                                    name: iten.name,
                                    type: 'line',
                                    data: iten.data.map(it => {
                                        return that.$utils.isHasNum(it)
                                    }),
                                    symbol: 'none'
                                }
                                series.push(seriesObj)
                                let seriesObj1 = {
                                    name: iten.name,
                                    type: 'bar',
                                    barGap: 0,
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: iten.data.map(it => {
                                        return that.$utils.isHasNum(it)
                                    }),
                                }
                                series1.push(seriesObj1)
                            })
                        }
                        that.getPowerBar('monthChartBar', '当月-日发电量', xAxis, legend, series1)
                    }
                })
            },
            // 获取年发电量数据
            getYearData() {
                let that = this
                let params = {
                    stationNumber: that.windTurbines,
                    itemVal: that.itemVal
                }
                apiGetannualPower(params).then(datas => {
                    if (datas && datas.data.list) {
                        let monthLen = 0
                        monthLen = new Date().getMonth() + 1
                        // 表格数据处理
                        that.getTableData(datas.data.list)
                        // 柱状图数据处理
                        that.getBarData(datas.data.list, monthLen)
                        //饼状图数据处理
                        that.getPieData(datas.data.list, monthLen)
                        that.loading = false
                    }
                })
            },
            // 处理当年月发电量表格数据
            getTableData(datas) {
                let proportion = {
                    name: '当月占比',
                    statistic: '-'
                }
                let proportionYear = {
                    name: '全年占比',
                    statistic: '-'
                }
                let monthName = ['january', 'february', 'march', 'april', 'may',
                    'june', 'july', 'august', 'september', 'october', 'november', 'december'
                ]
                datas.forEach((item, index) => {
                    if (index === 0 || index === 1) {
                        item.statistic = 0
                        monthName.forEach(its => {
                            item[its] = item[its] ? Math.ceil(item[its]) : '-'
                        })
                        monthName.forEach(itv => {
                            item.statistic += item[itv] && item[itv] !== '-' ? item[itv] : 0
                        })
                        if (index === 0) {
                            item.name = '计划发电'
                        } else if (index === 1) {
                            item.name = '实际发电'
                        }
                    } else if (index === 2 || index === 3) {
                        item.statistic = '-'
                        monthName.forEach(itv => {
                            item[itv] = item[itv] && item[itv] !== null ? (item[itv] * 100).toFixed(2) +
                                '%' : '-'
                        })
                        if (index === 2) {
                            item.name = '短期准确率'
                        } else if (index === 3) {
                            item.name = '超短准确率'
                        }
                    }
                })
                // 当月占比
                monthName.forEach(itc => {
                    proportion[itc] = this.$utils.ratioCalculation(datas[1][itc], datas[0][itc])
                })
                datas.splice(2, 0, proportion)
                // 全年占比
                monthName.forEach(itc => {
                    proportionYear[itc] = this.$utils.ratioCalculation(datas[1][itc], datas[0].statistic)
                })
                datas.splice(3, 0, proportionYear)

                let num = 0
                let num2 = 0
                let num3 = 0
                monthName.forEach((itb, index) => {
                    if (datas[4][itb] && datas[4][itb] !== '-') {
                        num += 1
                        num2 += (datas[4][itb].replace('%', '')) / 100
                    }
                    if (datas[5][itb] && datas[5][itb] !== '-') {
                        num3 += datas[5][itb].replace('%', '') / 100
                    }
                })

                //全年占比统计
                proportionYear.statistic = this.$utils.ratioCalculation(datas[1].statistic, datas[0].statistic)
                //短期准确率统计
                datas[4].statistic = (num2 / num).toFixed(2) * 100 + '%'
                //超短期准确率统计
                datas[5].statistic = (num3 / num).toFixed(2) * 100 + '%'
                this.tableData = datas
            },
            //处理当年月发电量柱状图数据
            getBarData(datas, val) {
                let xAxisAll = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
                let xAxis = []
                for (let i = 0; i < val; i++) {
                    xAxis.push(xAxisAll[i])
                }
                let legend = ['计划发电', '实际发电']
                let series = [{
                        name: '计划发电',
                        type: 'bar',
                        barGap: 0,
                        emphasis: {
                            focus: 'series'
                        }
                    },
                    {
                        name: '实际发电',
                        type: 'bar',
                        barGap: 0,
                        emphasis: {
                            focus: 'series'
                        }
                    }
                ]
                datas.forEach(itn => {
                    if (itn.name === '计划发电') {
                        let data = [itn.january, itn.february, itn.march, itn.april, itn.may, itn.june,
                            itn.july, itn.august, itn.september, itn.october, itn.november, itn.december
                        ]
                        series[0].data = data
                    }
                    if (itn.name === '实际发电') {
                        let data1 = [itn.january, itn.february, itn.march, itn.april, itn.may,
                            itn.june, itn.july, itn.august, itn.september, itn.october, itn.november, itn
                            .december
                        ]
                        series[1].data = data1
                    }
                })
                this.getPowerBar('yearChartBar', '当年-月发电量', xAxisAll, legend, series)
            },
            //处理当年月发电量饼状图数据
            getPieData(datas, val) {
                let activeval = 0
                activeval += datas[1].january !== '-' ? datas[1].january * 1 : 0
                activeval += datas[1].february !== '-' ? datas[1].february * 1 : 0
                activeval += datas[1].march !== '-' ? datas[1].march * 1 : 0
                activeval += datas[1].april !== '-' ? datas[1].april * 1 : 0
                activeval += datas[1].may !== '-' ? datas[1].may * 1 : 0
                activeval += datas[1].june !== '-' ? datas[1].june * 1 : 0
                activeval += datas[1].july !== '-' ? datas[1].july * 1 : 0
                activeval += datas[1].august !== '-' ? datas[1].august * 1 : 0
                activeval += datas[1].september !== '-' ? datas[1].september * 1 : 0
                activeval += datas[1].october !== '-' ? datas[1].october * 1 : 0
                activeval += datas[1].november !== '-' ? datas[1].november * 1 : 0
                activeval += datas[1].december !== '-' ? datas[1].december * 1 : 0
                let obj = [{
                    // value: data-activeval < 0 ? 0 : data-activeval, 
                    value: datas[0].statistic - activeval < 0 ? 0 : datas[0].statistic - activeval,
                    name: '未发电量'
                }]
                for (let i = 0; i < datas.length; i++) {
                    let seriesAll = []
                    let series = []
                    if (datas[i].name === '计划发电' || datas[i].name === '实际发电') {
                        seriesAll = [{
                                value: datas[i].january !== '-' ? datas[i].january * 1 : 0,
                                name: '一月',
                                nameEn: 'january'
                            },
                            {
                                value: datas[i].february !== '-' ? datas[i].february * 1 : 0,
                                name: '二月',
                                nameEn: 'february'
                            },
                            {
                                value: datas[i].march !== '-' ? datas[i].march * 1 : 0,
                                name: '三月',
                                nameEn: 'march'
                            },
                            {
                                value: datas[i].april !== '-' ? datas[i].april * 1 : 0,
                                name: '四月',
                                nameEn: 'april'
                            },
                            {
                                value: datas[i].may !== '-' ? datas[i].may * 1 : 0,
                                name: '五月',
                                nameEn: 'may'
                            },
                            {
                                value: datas[i].june !== '-' ? datas[i].june * 1 : 0,
                                name: '六月',
                                nameEn: 'june'
                            },
                            {
                                value: datas[i].july !== '-' ? datas[i].july * 1 : 0,
                                name: '七月',
                                nameEn: 'july'
                            },
                            {
                                value: datas[i].august !== '-' ? datas[i].august * 1 : 0,
                                name: '八月',
                                nameEn: 'august'
                            },
                            {
                                value: datas[i].september !== '-' ? datas[i].september * 1 : 0,
                                name: '九月',
                                nameEn: 'september'
                            },
                            {
                                value: datas[i].october !== '-' ? datas[i].october * 1 : 0,
                                name: '十月',
                                nameEn: 'october'
                            },
                            {
                                value: datas[i].november !== '-' ? datas[i].november * 1 : 0,
                                name: '十一月',
                                nameEn: 'november'
                            },
                            {
                                value: datas[i].december !== '-' ? datas[i].december * 1 : 0,
                                name: '十二月',
                                nameEn: 'december'
                            }
                        ]
                    }
                    if (datas[i].name === '计划发电') {
                        this.getPieChart('pieChartY', '计划发电', seriesAll)
                    } else if (datas[i].name === '实际发电') {
                        for (let i = 0; i < val; i++) {
                            series.push(seriesAll[i])
                        }
                        this.getPieChart('pieChartS', '实际发电', series.concat(obj), datas)
                    }
                }
            },
            getPowerBar(name, title, xAxis, legend, series) {
                let option = {
                    title: {
                        text: this.windTurbinesName + title,
                        textStyle: {
                            fontSize: '16',
                            fontWeight: 'bold'
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: title === '今日发电量预测' ? '7%' : '6%',
                        right: '5%',
                        bottom: '3%',
                        containLabel: true
                    },
                    legend: {
                        // bottom: bott,
                        right: '20',
                        data: legend
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            show: false
                        },
                        data: xAxis
                    }],
                    yAxis: [{
                        type: 'value',
                        name: '万千瓦时(Wkw/h)'
                    }],
                    series: series
                };
                if (!this.theme) {
                    option.backgroundColor = ''

                }
                // 基于准备好的dom，初始化echarts实例
                let dom = document.getElementById(name);
                dom.removeAttribute("_echarts_instance_") ? dom.removeAttribute("_echarts_instance_") : ''
                let myChart = this.$echarts.init(dom, this.echartsTheme)
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize()
                })
            },
            getPieChart(name, title, series, datas) {
                let actureData = null
                if (name === 'pieChartS') {
                    datas.forEach(item => {
                        if (item.name === '计划发电') {
                            actureData = item
                        }
                    })
                }
                let option = {
                    title: {
                        text: title,
                        bottom: 10,
                        left: 'center'
                    },
                    color: ['#5672c4', '#95cc7a', '#f7c75f', '#e96366', '#7ac1dd', '#47a274', '#f78254', '#9761b2',
                        '#e57cca', '#5672c4', '#95cc7a', '#f7c75f', '#e96366'
                    ],
                    tooltip: {
                        trigger: 'item',
                        formatter: (item) => {
                            // debugger
                            let str =
                                `<span style="display:inline-block;margin-bottom:5px;">${item.seriesName}</span></br>`
                            let monthD = ''
                            for (let i in actureData) {
                                if (item.data.nameEn === i) {
                                    monthD =
                                        `<span style="display:inline-block;width: 55%">当月占比：</span>&nbsp;&nbsp;<span>${(item.data.value/actureData[i]).toFixed(2) * 100 + '%'}</span></br>`
                                }
                            }
                            let strMsg = `<div>
                            <span style="display:inline-block;margin-right:4px;margin-top:3px;border-radius:10px;width:10px;height:10px;background-color:${item.color};\"></span>
                            <span style="display:inline-block;width: 40%">${item.data.name}:</span>&nbsp;&nbsp;<span>${item.data.value}</span></br>
                            ${monthD}
                            <span style="display:inline-block;width: 55%">全年占比：</span>&nbsp;&nbsp;<span>${Math.ceil(item.percent)}%</span></br>
                                </div>`
                            str = str + strMsg
                            return str
                        }
                    },
                    series: [{
                        name: title,
                        type: 'pie',
                        radius: '50%',
                        center: ['50%', '50%'],
                        data: series,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                };
                if (!this.theme) {
                    option.backgroundColor = ''

                }
                // 基于准备好的dom，初始化echarts实例
                let dom = document.getElementById(name);
                dom.removeAttribute("_echarts_instance_") ? dom.removeAttribute("_echarts_instance_") : ''
                let myChart = this.$echarts.init(dom, this.echartsTheme)
                myChart.setOption(option);
                let op = myChart.getOption()
                if (name === 'pieChartS') {
                    this.changePieColor(op)
                }
                window.addEventListener("resize", function () {
                    myChart.resize()
                })
            },
            changePieColor(op) {
                let showPie = []
                op.series[0].data.forEach((item, index) => {
                    let obj = {
                        value: op.color[index],
                        name: item.name
                    }
                    showPie.push(obj)
                })
                this.showpieColor = showPie
            }
        }
    }
</script>

<style lang="less">
    @import '../../viewsCss/statisticalSummarypageLess.less';

    .themeDark {
        .statistical_wind {
            .windStstus {
                background: #040c0b;
            }


        }

        .lineMain {
            background: #040c0b;

            .lineStyle1 {
                background: #161f1e;
            }
        }

    }

    .themeLight {
        .statistical_wind {
            .windStstus {
                background: linear-gradient(0deg, transparent, #373590);
            }


        }

        .lineMain {
            background: #edeffb;

            .lineStyle1 {
                background: #fff;
            }
        }
    }
</style>