<template>
    <div class="batterDiviner" :class="!theme ? 'themeDark' : 'themeLight'">
        <div class="batterDiviner_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" :style="pageHeight" v-loading="loading">
            <el-row :style="chartStyle" style="display:flex">
                <el-col :span="8" style="padding-right: 20px;">
                    <div class="lineStyle">
                        <div id="assessmentChart" :style="chartStyle3"></div>
                    </div>
                </el-col>
                <el-col :span="16">
                    <div class="lineStyle" v-on:dblclick="doubleclick('day')">
                        <div id="powerChart" :style="chartStyle3"></div>
                    </div>
                </el-col>
            </el-row>
            <el-row :style="chartStyle2" style="display:flex">
                <el-col :span="12" v-loading="loadingLeft">
                    <div class="lineStyle1" v-on:dblclick="doubleclick('month')">
                        <div id="monthChart" :style="chartStyle4"></div>
                        <div id="monthChartBar" :style="chartStyle4"></div>
                    </div>
                </el-col>
                <el-col :span="12" v-loading="loadingRight">
                    <!-- v-on:dblclick="doubleclick('year')" -->
                    <div class="lineStyle1" style="position:relative" v-on:dblclick="doubleclick('year')">
                        <!-- <div style="position: absolute;left: 40%;margin: 15px 0px;top: 25%;">
                            <img src="../assets/windFramPicture/nodata.jpeg" style="width:180px;height:160px">
                            <p style="position: relative;line-height:0;left: 20px;font-weight: 600;">当年月发电量暂无数据</p>
                        </div> -->
                        <div id="windChart1" :style="chartStyle4"></div>
                        <div id="installChart1" :style="chartStyle4"></div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <day-batter-dialog ref="dayBatter" :ExceedTimeList="ExceedTimeList" :theme="theme" :echartsTheme="echartsTheme">
        </day-batter-dialog>
        <month-and-year-batter-dialog ref="moothYear" :ExceedTimeList="ExceedTimeList" :theme="theme"
            :echartsTheme="echartsTheme"></month-and-year-batter-dialog>
    </div>
</template>

<script>
    import DayBatterDialog from '../../components/powerPredictionComponent/batteryDivinerDialog/dayBatterDialog.vue'
    import MonthAndYearBatterDialog from '../../components/powerPredictionComponent/batteryDivinerDialog/monthAndYearBatterDialog.vue'
    import {
        apiGetStationDL,
        apiGetdailyPowerGenerationForecast,
        apiGetmonthlyDailyPowerGenerationForecast,
        apiGetannualMonthlyElectricityGenerationForecast,
        apiGettodayPowerGenerationForecast
    } from '../../api/api'
    export default {
        components: {
            DayBatterDialog,
            MonthAndYearBatterDialog
        },
        data() {
            return {
                windTurbines: '',
                statusData: [],
                messageDataxc: [],
                stationData: [],
                pickerTime: [],
                pickerTimeMonth: [],
                pickerTimeYear: [],
                itemVal: '',
                loading: false,
                loadingLeft: true,
                loadingRight: true,
                planFiveMin: '',
                echartsTheme: '',
                theme: null
            }
        },
        watch: {
            '$store.state.theme': {
                handler: function (newVal, oldVal) {
                    this.theme = newVal
                    this.echartsTheme = !newVal ? 'dark' : ''
                    this.getStationData()
                },
                immediate: true
            }
        },
        created() {
            this.statusData = [{
                    type: '1',
                    name: '运行',
                    number: '321'
                },
                {
                    type: '2',
                    name: '待机',
                    number: '10'
                },
                {
                    type: '3',
                    name: '维护',
                    number: '10'
                },
                {
                    type: '4',
                    name: '停机',
                    number: '20'
                },
                {
                    type: '5',
                    name: '限电',
                    number: '0'
                },
                {
                    type: '6',
                    name: '离线',
                    number: '20'
                },
                {
                    type: '7',
                    name: '检修',
                    number: '20'
                }
            ]
            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)
            ]
            let de = this.$utils.hasYearMonthDate(new Date().getFullYear(), new Date().getMonth() + 1)
            this.pickerTimeMonth = [
                new Date().getFullYear() + '-' + Number(new Date().getMonth() + 1) + '-' + '01',
                new Date().getFullYear() + '-' + Number(new Date().getMonth() + 1) + '-' + de,
            ]
            this.pickerTimeYear = [
                new Date().getFullYear() + '-' + '01',
                new Date().getFullYear() + '-' + '12',
            ]
            this.getStationData()
        },
        computed: {
            pageHeight() {
                return {
                    'height': document.documentElement.clientHeight - 140 + 'px'
                }
            },
            chartStyle() {
                let height = (document.documentElement.clientHeight - 150) / 3 + 'px'
                return {
                    'width': '100%',
                    'height': height
                }
            },
            chartStyle2() {
                let heighttop = (document.documentElement.clientHeight - 150) / 3
                let height = (document.documentElement.clientHeight - 180 - heighttop) + 'px'
                return {
                    'width': '100%',
                    'height': height
                }
            },
            chartStyle3() {
                let height = (document.documentElement.clientHeight - 240) / 3 + 'px'
                return {
                    'width': '100%',
                    'height': height
                }
            },
            chartStyle4() {
                let height = (document.documentElement.clientHeight - 180) / 3 + 'px'
                return {
                    'width': '100%',
                    'height': height
                }
            }
        },
        mounted() {
            let that = this
            that.planFiveMin = setInterval(function () {
                that.seachData()
            }, 300000)
        },
        beforeRouteLeave(to, from, next) {
            next()
            if (this.planFiveMin) {
                clearInterval(this.planFiveMin);
                this.planFiveMin = null;
            }
        },
        methods: {
            doubleclick(type) {
                let title = ''
                this.stationData.forEach(item => {
                    if (item.no === this.windTurbines) {
                        title = item.stationName
                    }
                })
                if (type === 'day') {
                    this.$refs.dayBatter.dialogVisible = true
                    this.$refs.dayBatter.tableData = []
                    this.$refs.dayBatter.title = title + '日发电量预测'
                    this.$refs.dayBatter.loading = true
                    this.$refs.dayBatter.dateVal = this.pickerTime
                    this.$refs.dayBatter.windTurbines = this.windTurbines
                    this.$refs.dayBatter.windTurbinesVal = this.itemVal
                    this.$nextTick(() => {
                        this.$refs.dayBatter.getChartsData()
                        this.$refs.dayBatter.getTableData()
                    })
                } else {
                    this.$refs.moothYear.dialogVisible = true
                    this.$refs.moothYear.tableData = []
                    this.$refs.moothYear.loading = true
                    this.$refs.moothYear.windTurbines = this.windTurbines
                    this.$refs.moothYear.windTurbinesVal = this.itemVal
                    if (type === 'month') {
                        this.$refs.moothYear.isMonth = true
                        this.$refs.moothYear.title = title + '月发电量预测'
                        this.$refs.moothYear.monthVal = this.pickerTimeMonth
                    } else {
                        this.$refs.moothYear.isMonth = false
                        this.$refs.moothYear.title = title + '年发电量预测'
                        this.$refs.moothYear.yearVal = this.pickerTimeYear
                    }
                    this.$nextTick(() => {
                        if (type === 'year') {
                            const myChart1 = this.$echarts.init(document.getElementById('windChart1'), this
                                .echartsTheme)
                            const myChart2 = this.$echarts.init(document.getElementById('installChart1'),
                                this.echartsTheme)
                            myChart1.dispatchAction({
                                type: 'hideTip'
                            });
                            myChart2.dispatchAction({
                                type: 'hideTip'
                            });
                        } else {
                            const myChart1 = this.$echarts.init(document.getElementById('monthChart'), this
                                .echartsTheme)
                            const myChart2 = this.$echarts.init(document.getElementById('monthChartBar'),
                                this.echartsTheme)
                            myChart1.dispatchAction({
                                type: 'hideTip'
                            });
                            myChart2.dispatchAction({
                                type: 'hideTip'
                            });
                        }
                        this.$refs.moothYear.getChartsData()
                        this.$refs.moothYear.getTableData()
                    })
                }
            },
            getStationData() {
                this.loading = true
                apiGetStationDL().then(datas => {
                    this.stationData = datas.data.list
                    let obj = {
                        stationName: '全域数据',
                        no: -1,
                        itemVal: 0
                    }
                    this.stationData.unshift(obj)
                    this.windTurbines = datas.data.list[0].no
                    this.itemVal = datas.data.list[0].itemVal
                    this.stationData[0].showBac = true
                    this.getPowerPrediction()
                    this.getWindSpeed()
                    this.getWindSpeedYear()
                    this.getAssessmentScore(0)
                    this.loading = false
                })
            },
            changeStation(val) {
                this.windTurbines = val
                this.stationData.forEach(item => {
                    if (item.no === val) {
                        this.itemVal = item.itemVal
                        item.showBac = true
                    } else {
                        item.showBac = false
                    }
                })
                this.seachData()
            },
            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
            },
            seachData() {
                this.getPowerPrediction()
                this.getWindSpeed()
                this.getWindSpeedYear()
                this.getAssessmentScore(0)
            },
            // 日发电量预测曲线
            getPowerPrediction() {
                let params = {
                    stationNumber: this.windTurbines,
                    itemVal: this.itemVal
                }
                apiGetdailyPowerGenerationForecast(params).then(datas => {
                    if (datas && datas.data) {
                        let xAxis = []
                        let series = []
                        let legend = []
                        if (datas.data.dateList.length > 0) {
                            datas.data.dateList.forEach(item => {
                                xAxis.push(item.substring(item.indexOf(' ') + 1))
                            })
                        }
                        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.getPowerLine('powerChart', '日发电量预测曲线', xAxis, legend, series)
                    }
                })
            },
            // 本月单日发电量预测--曲线图
            getWindSpeed() {
                let params = {
                    stationNumber: this.windTurbines,
                    itemVal: this.itemVal
                }
                apiGetmonthlyDailyPowerGenerationForecast(params).then(datas => {
                    if (datas && datas.data) {
                        this.loadingLeft = false
                        let xAxis = []
                        let series = []
                        let series1 = []
                        let legend = []
                        // let color = ['#f2a91f','#4a8ae9', '#4ae973', '#e9be4a']
                        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 this.$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 this.$utils.isHasNum(it)
                                    }),
                                    // itemStyle:{
                                    //     normal: {
                                    //         color: color[index]
                                    //     }
                                    // }
                                }
                                series1.push(seriesObj1)
                            })
                        }
                        this.getPowerLine('monthChart', '本月单日发电量预测', xAxis, legend, series)
                        this.getPowerBar('monthChartBar', '', xAxis, legend, series1)
                    }
                })
            },
            // 当年本月发电量预测--曲线图
            getWindSpeedYear() {
                let params = {
                    stationNumber: this.windTurbines,
                    itemVal: this.itemVal
                }
                apiGetannualMonthlyElectricityGenerationForecast(params).then(datas => {
                    if (datas && datas.data) {
                        this.loadingRight = false
                        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(' ') - 3))
                            })
                        }
                        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 this.$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 this.$utils.isHasNum(it)
                                    }),
                                }
                                series1.push(seriesObj1)
                            })
                        }
                        this.getPowerLine('windChart1', '今年月度发电量预测', xAxis, legend, series)
                        this.getPowerBar('installChart1', '', xAxis, legend, series1)
                    }
                })
            },
            getPowerLine(name, title, xAxis, legend, series) {
                let option = {
                    title: {
                        text: title,
                        textStyle: {
                            fontSize: '16',
                            fontWeight: 'bold'
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    // color:['#f2a91f','#4a8ae9', '#4ae973' ],
                    legend: {
                        // width: '380',
                        right: '20',
                        data: legend
                    },
                    grid: {
                        left: '6%',
                        right: '5%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: 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);
                myChart.on('mousemove', this.setTooltip('windChart1', 'installChart1', 2))
                window.addEventListener("resize", function () {
                    myChart.resize()
                })
            },
            setTooltip(name1, name2, num) {
                const myChart1 = this.$echarts.init(document.getElementById(name1), this.echartsTheme)
                const myChart2 = this.$echarts.init(document.getElementById(name2), this.echartsTheme)
                this.$utils.setTooltip(myChart1, myChart2, num)
            },
            // 今日发电量预测
            getAssessmentScore() {
                let params = {
                    stationNumber: this.windTurbines,
                    itemVal: this.itemVal
                }
                apiGettodayPowerGenerationForecast(params).then(datas => {
                    console.log(datas)
                    if (datas && datas.data) {
                        let xAxis = []
                        let series = []
                        let legend = []
                        if (datas.data.name.length > 0) {
                            datas.data.name.forEach(item => {
                                xAxis.push(item)
                            })
                        }
                        if (datas.data.dataFormatList.length > 0) {
                            datas.data.dataFormatList.forEach((iten, index) => {
                                legend.push(iten.name)
                                let seriesObj = {
                                    name: iten.name,
                                    type: 'bar',
                                    barGap: 0,
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: iten.data.map(it => {
                                        return this.$utils.isHasNum(it)
                                    }),
                                }
                                series.push(seriesObj)
                            })
                        }
                        this.getPowerBar('assessmentChart', '今日发电量预测', xAxis, legend, series)
                    }
                })
            },
            getPowerBar(name, title, xAxis, legend, series) {
                let option = {
                    title: {
                        text: title,
                        textStyle: {
                            fontSize: '16',
                            fontWeight: 'bold'
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: title === '今日发电量预测' ? '8%' : '6%',
                        right: '5%',
                        bottom: '3%',
                        containLabel: true
                    },
                    legend: {
                        // bottom: bott,
                        right: '20',
                        data: title === '今日发电量预测' ? 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);
                myChart.on('mousemove', this.setTooltip('monthChart', 'monthChartBar', 3))
                window.addEventListener("resize", function () {
                    myChart.resize()
                })
            }
        }
    }
</script>

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

    .themeDark {

        .batterDiviner_wind {
            .windStstus {
                background: #040c0b;
            }
        }

        .lineMain {
            background: #040c0b;

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

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

        .lineMain {
            background: #edeffb;

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