<template>
    <div class="panoramicPowerPage" :class="!theme ? 'themeDark' : 'themeLight'">
        <div class="windStstus">
            <div class="everyOne" v-for="(item, index) in statusData" :key="index">
                <img :src="item.img" alt="">
                <span class="statusName">{{item.name}}</span>
                <span class="statusNum">{{item.number}}</span>
            </div>
            <div class="windLeft">
                <div class="windMsg">
                    <span>总装机：</span>
                    <span>{{allStatus.zzj}}台组</span>
                </div>
                <div class="windMsg">
                    <span>总装机容量：</span>
                    <span>{{allStatus.zzjrl}}Mw</span>
                </div>
            </div>
        </div>
        <div class="lineMain" :style="pageHeight" v-loading="loading">
            <el-row>
                <el-col :span="8" v-for="(item,index) in chartsData" :key="index">
                    <div class="lineStyle" v-on:dblclick="doubleclick(item)">
                        <div style="display: flex;float: right;justify-content: end;margin-right: 53px;">
                            <div v-for="it in item.showpowerLegend" :key="it.name">
                                <span class="lineColor" :style="{'background': it.color}"></span>
                                <span class="powerLegendColor" :style="{'background': it.color}"></span>
                                <span :style="!theme ? 'color: #fff' : ''"
                                    style="font-size: 12px;margin-left: 12px;position: relative;top: 1px;">{{it.name}}</span>
                            </div>
                        </div>
                        <div :id="'lineChart' + Number(index+1)" :style="lineChartStyle"></div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <panorama-dialog ref="panorama" from="panoramicPower" :ExceedTimeList="ExceedTimeList"
            :echartsTheme="echartsTheme" :theme="theme"></panorama-dialog>
    </div>
</template>

<script>
    import panoramaDialog from '@/components/powerPredictionComponent/panoramicPowerDialog/panoramaPowerDialogPage.vue'
    import {
        apiGetpanoramicPowerCharts,
        apiGetStatusInfoAll
    } from '../../api/api'
    import oneimg from '../../assets/windStatusPic/000.png'
    import twoimg from '../../assets/windStatusPic/001.png'
    import threeimg from '../../assets/windStatusPic/002.png'
    import fourimg from '../../assets/windStatusPic/003.png'
    import fiveimg from '../../assets/windStatusPic/004.png'
    import siximg from '../../assets/windStatusPic/005.png'
    import sevenimg from '../../assets/windStatusPic/006.png'
    export default {
        components: {
            panoramaDialog
        },
        data() {
            return {
                statusData: [],
                chartsData: [],
                weatherDataFromApi: {},
                pickerTime: [],
                loading: false,
                planFiveMin: '',
                allStatus: {},
                showpowerLegend: [],
                echartsTheme: '',
                theme: null
            }
        },
        watch: {
            '$store.state.theme': {
                handler: function (newVal, oldVal) {
                    this.theme = newVal
                    this.echartsTheme = !newVal ? 'dark' : ''
                    this.getChartData()
                },
                immediate: true
            }
        },
        created() {
            this.weatherDataFromApi = JSON.parse(window.sessionStorage.getItem('weatherData'))
            this.statusData = [{
                    img: oneimg,
                    name: '运行',
                    nameEn: 'yx',
                    number: 0
                },
                {
                    img: twoimg,
                    name: '待机',
                    nameEn: 'dj',
                    number: 0
                },
                {
                    img: threeimg,
                    name: '维护',
                    nameEn: 'wh',
                    number: 0
                },
                {
                    img: fourimg,
                    name: '停机',
                    nameEn: 'tj',
                    number: 0
                },
                {
                    img: fiveimg,
                    name: '限电',
                    nameEn: 'xd',
                    number: 0
                },
                {
                    img: siximg,
                    name: '离线',
                    nameEn: 'lx',
                    number: 0
                },
                {
                    img: sevenimg,
                    name: '检修',
                    nameEn: 'jx',
                    number: 0
                }
            ]
            this.ExceedTimeList = [{
                    label: '超前15分钟',
                    value: 0
                },
                {
                    label: '超前30分钟',
                    value: 1
                },
                {
                    label: '超前45分钟',
                    value: 2
                },
                {
                    label: '超前1小时',
                    value: 3
                },
                {
                    label: '超前1小时15分钟',
                    value: 4
                },
                {
                    label: '超前1小时30分钟',
                    value: 5
                },
                {
                    label: '超前1小时45分钟',
                    value: 6
                },
                {
                    label: '超前2小时',
                    value: 7
                },
                {
                    label: '超前2小时15分钟',
                    value: 8
                },
                {
                    label: '超前2小时30分钟',
                    value: 9
                },
                {
                    label: '超前2小时45分钟',
                    value: 10
                },
                {
                    label: '超前3小时',
                    value: 11
                },
                {
                    label: '超前3小时15分钟',
                    value: 12
                },
                {
                    label: '超前3小时30分钟',
                    value: 13
                },
                {
                    label: '超前3小时45分钟',
                    value: 14
                },
                {
                    label: '超前4小时',
                    value: 15
                },
                {
                    label: '超前5小时',
                    value: 19
                },
                {
                    label: '超前6小时',
                    value: 23
                }
            ]
            this.pickerTime = [
                new Date(new Date(new Date().getTime()).setHours(0, 0, 0, 0) + 900 * 1000),
                new Date(new Date(new Date().getTime()).setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1000)
            ]
            this.getChartData()
            this.getWindStatus()
        },
        mounted() {
            let that = this
            that.planFiveMin = setInterval(function () {
                that.getChartData()
            }, 300000)
        },
        computed: {
            pageHeight() {
                return {
                    // 'width': '100%',
                    'height': document.documentElement.clientHeight - 140 + 'px'
                }
            },
            lineChartStyle() {
                let heightChart = ''
                // let pageHeight = document.documentElement.clientHeight-120-(Math.ceil(this.chartsData.length/3)*40)
                let pageHeight = document.documentElement.clientHeight - 115 - (Math.ceil(this.chartsData.length / 3) *
                    40)
                if (this.chartsData.length <= 3) {
                    heightChart = '350px'
                } else {
                    heightChart = pageHeight / (Math.ceil(this.chartsData.length / 3)) + 'px'
                }
                return {
                    'width': '100%',
                    'height': heightChart
                    // 'height': '300px'
                }
            }
        },
        beforeRouteLeave(to, from, next) {
            next()
            if (this.planFiveMin) {
                clearInterval(this.planFiveMin);
                this.planFiveMin = null;
            }
        },
        methods: {
            doubleclick(item) {
                console.log('db', item)
                this.$refs.panorama.dialogVisible = true
                this.$refs.panorama.stationData = item
                this.$refs.panorama.title = item.name + '功率预测'
                this.$refs.panorama.pickerTime = this.pickerTime
                this.$nextTick(() => {
                    this.$refs.panorama.getChartsData()
                    this.$refs.panorama.getTableData()
                })

            },
            //获取风机状态
            getWindStatus() {
                let that = this
                apiGetStatusInfoAll().then(datas => {
                    if (datas) {
                        if (datas.data) {
                            that.statusData.forEach(item => {
                                for (let it in datas.data) {
                                    if (item.nameEn === it) {
                                        item.number = datas.data[it]
                                    }
                                }
                            })
                            that.allStatus = datas.data
                        }
                    }
                })
            },
            statusIcon(type) {
                let picture = ''
                if (type === '1') {
                    picture = 'yunxingPic'
                } else if (type === '2') {
                    picture = 'daijiPic'
                } else if (type === '3') {
                    picture = 'weihuPic'
                } else if (type === '4') {
                    picture = 'tingjiPic'
                } else if (type === '5') {
                    picture = 'xiandianPic'
                } else if (type === '6') {
                    picture = 'lixianPic'
                } else if (type === '7') {
                    picture = 'jianxiuPic'
                }
                return picture
            },
            getChartData() {
                this.loading = true
                this.chartsData = []
                apiGetpanoramicPowerCharts().then(datas => {
                    if (datas && datas.data) {
                        let xAxis = []
                        if (datas.data.dateList) {
                            xAxis = datas.data.dateList.map(it => it.substring(it.indexOf(' ') + 1, it.length))
                        }
                        if (datas.data.stationInformationList) {
                            this.chartsData = datas.data.stationInformationList
                            this.chartsData.forEach((item, index) => {
                                item.showpowerLegend = [{
                                        name: '理论',
                                        color: '#5672c4'
                                    },
                                    {
                                        name: '可用',
                                        color: '#95cc7a'
                                    },
                                    {
                                        name: 'AGC',
                                        color: '#f7c75f'
                                    },
                                    {
                                        name: '超短期',
                                        color: '#e96366'
                                    },
                                    {
                                        name: '实际',
                                        color: '#7ac1dd'
                                    },
                                ]
                                let legend = []
                                let series = []
                                let namess = ''
                                for (let i = 0; i < item.dataFormatList.length; i++) {
                                    if (item.dataFormatList[i].name !== '短期') {
                                        legend.push(item.dataFormatList[i].name)
                                        namess = item.name
                                        let seriesObj = {
                                            name: item.dataFormatList[i].name,
                                            type: 'line',
                                            data: item.dataFormatList[i].data.map(it => {
                                                return this.$utils.isHasNum(it)
                                            }),
                                            symbol: 'none'
                                        }
                                        series.push(seriesObj)
                                    }
                                }
                                this.$nextTick(() => {
                                    this.getPowerLine(namess, index, xAxis, legend, series)
                                })

                            })
                        }
                        this.loading = false
                    }
                    console.log(datas)
                })
            },
            getPowerLine(name, numxc, xAxis, legend, series) {
                let namevc = 'lineChart' + Number(numxc + 1)
                let option = {
                    title: {
                        text: name,
                        textStyle: {
                            fontSize: '16',
                            fontWeight: 'bold'
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: (item) => {
                            let str =
                                `<span style="display:inline-block;margin-bottom: 5px">${item[0].axisValue}</span></br>`
                            let strMsg = ''
                            item.forEach((it, index) => {
                                if (index !== 3) {
                                    strMsg = `<div style="margin-bottom: 5px">
                                    <span style="display:inline-block;margin-right:4px;margin-top:3px;border-radius:10px;width:10px;height:10px;background-color:${it.color};\"></span>&nbsp;
                                    <span style="display:inline-block;">${it.seriesName}:</span>&nbsp;&nbsp;<span>${it.value}</span>
                                        </div>`
                                    this.chartsData[numxc].showpowerLegend[index].name = it.seriesName
                                    this.chartsData[numxc].showpowerLegend[index].color = it.color
                                } else {
                                    if (it.axisValue === '00:15:00') {
                                        it.color = '#e96366'
                                    }
                                    strMsg = `<div style="margin-bottom: 5px">
                                    <span style="display:inline-block;margin-right:4px;margin-top:3px;border-radius:10px;width:10px;height:10px;background-color:${it.color};\"></span>&nbsp;
                                    <span style="display:inline-block;">${it.color === '#e96366' ? '超短期' : '短期'}:</span>&nbsp;&nbsp;<span>${it.value}</span>
                                        </div>`
                                    if (it.color === '#e96366') {
                                        this.chartsData[numxc].showpowerLegend[index].name = '超短期'
                                    } else {
                                        this.chartsData[numxc].showpowerLegend[index].name = '短期'
                                    }
                                    this.chartsData[numxc].showpowerLegend[index].color = it.color
                                }
                                str = str + strMsg
                            })
                            return str
                        }
                    },
                    legend: {
                        top: 0,
                        right: 0,
                        data: legend,
                        show: false
                    },
                    grid: {
                        left: '5%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xAxis
                    },
                    yAxis: {
                        type: 'value',
                        name: '兆瓦(Mw)'
                    },
                    series: series
                };
                let hour = new Date().getHours() + 6
                let min = new Date().getMinutes()
                let allTime = ''
                let num = 0
                if (0 <= min && min < 15) {
                    allTime = hour + ':00:00'
                } else if (15 <= min && min < 30) {
                    allTime = hour + ':15:00'
                } else if (30 <= min && min < 45) {
                    allTime = hour + ':30:00'
                } else if (45 <= min && min < 60) {
                    allTime = hour + ':45:00'
                }
                xAxis.forEach((item, index) => {
                    if (item === allTime) {
                        num = index
                    }
                })
                if (num > 0) {
                    option.visualMap = {
                        show: false,
                        dimension: 0,
                        seriesIndex: 3,

                        pieces: [{
                                gt: 0,
                                lte: num,
                                color: '#e96366'
                            },
                            {
                                gt: num,
                                color: '#39ccd9'
                            }
                        ]
                    }
                }
                if (!this.theme) {
                    option.backgroundColor = ''

                }
                // 基于准备好的dom，初始化echarts实例
                let dom = document.getElementById(namevc);
                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()
                })
            }
        }
    }
</script>

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

    .themeDark {

        .windStstus,
        .homePage_main {
            background: #040c0b;
        }

        .lineMain {
            background: #040c0b;

            .lineStyle {
                background: #161f1e;
            }
        }
    }

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

        .lineMain {
            background: #edeffb;

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