<template>
    <div class="MonitoringPointScale">
        <div class="boxT" @mouseleave="handleMouseLeave">
            <img class="imgicon" src="../images/GM.png" alt="" srcset="" />
            <span>暂降事件</span>
            <div class="divSpan">
                <span @click="tab1(0, 1)" :style="{ color: flag == 0 ? '#07d8fd' : '#fff' }">区域</span>
                ∣
                <span @click="tab2(0, 1)" :style="{ color: flag == 1 ? '#07d8fd' : '#fff' }">负荷类型</span>
                ∣
                <span @click="tab3(0, 1)" :style="{ color: flag == 2 ? '#07d8fd' : '#fff' }">时间统计</span>
            </div>
        </div>
        <div class="boxB" ref="electr__7" v-show="area">
            <div id="electr__7" style="width: 100%; height: 100%" />
        </div>
        <div class="boxB" ref="electr__8" v-show="type">
            <div id="electr__8" style="width: 100%; height: 100%" />
        </div>
        <div class="boxB" ref="electr__9" v-show="time">
            <div id="electr__9" style="width: 100%; height: 100%" />
        </div>
    </div>
</template>
<script>
import { getAreaDownStatisticsData, getLoadType, getTimeCount } from '@/api/center/DropEvent.js'
export default {
    components: {},
    props: {},
    data() {
        return {
            ddata: [],
            legenddata: [],
            area: true,
            type: false,
            time: false,
            color: ['#d909e0', '#ffe400', '#ff9a09', '#ef1e5f', '#23cbe5', '#ec561b', '#ffa500'],
            flag: 0,
            Num: 0,
            zoom: '', //图表焦点校验
            formData: {
                deptIndex: '',
                searchBeginTime: this.getCurrentMonthFirst(),
                searchEndTime: this.getNowFormatDate()
            },
            myChart2: null,
            time2: null,
            myChart3: null,
            time3: null,
            timeA: null,
            timeB: null,
            timeC: null,
            calm: false,
            electr7List: [],
            electr8List: [],
            electr9List: [],
            xData: [],
            yData: []
        }
    },
    created() {
        this.formData.deptIndex = JSON.parse(window.sessionStorage.getItem('Info')).deptId
    },
    mounted() {
        this.zoom = 1 / document.body.style.zoom
        window.addEventListener('resize', () => {
            this.zoom = 1 / document.body.style.zoom
        })
        getAreaDownStatisticsData(this.formData).then(res => {
            this.electr7List = res
            this.electr7()
        })
        getLoadType(this.formData).then(res => {
            this.electr8List = res
        })
        getTimeCount(this.formData).then(res => {
            this.electr9List = res

            this.electr9List.data.forEach((item, i) => {
                if (i != 0) {
                    item.time = item.time.slice(5)
                } else if (i == 0) {
                    let month = item.time.slice(5)
                    let year = item.time.slice(0, 4)
                    item.time = month + '\n' + '(' + year + ')'
                }
                this.xData.push(item.time)
                this.yData.push(item.count)
            })
        })

        this.info()
    },

    methods: {
        info() {
            this.timeA = setTimeout(() => {
                this.tab2()
            }, 15000)
            this.timeB = setTimeout(() => {
                this.tab3()
            }, 30000)
            this.timeC = setTimeout(() => {
                this.tab1()
                this.info()
            }, 45000)
        },
        handleMouseLeave() {
            if (this.calm) {
                this.calm = false
                this.$emit('Remove')
                // this.info();
            }
        },
        //获取当月第一天日期
        getCurrentMonthFirst() {
            var date = new Date()
            var year = date.getFullYear()
            date.setDate(1)
            var month = parseInt(date.getMonth() + 1)
            var day = date.getDate()
            if (month < 10) {
                month = '0' + month
            }
            if (day < 10) {
                day = '0' + day
            }
            return year + '-' + month + '-' + day
        },
        //获取当天日期
        getNowFormatDate() {
            var date = new Date()
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var day = date.getDate()
            if (month < 10) {
                month = '0' + month
            }
            if (day < 10) {
                day = '0' + day
            }
            return year + '-' + month + '-' + day
        },
        tab1(e, v) {
            this.flag = 0
            this.electr7()
            this.area = true
            this.type = false
            this.time = false
            if (e == 0) {
                if (v == 1) {
                    this.$emit('control', { name: 'DropEvent', val: 1 })
                }
                clearTimeout(this.timeA)
                clearTimeout(this.timeB)
                clearTimeout(this.timeC)
                this.calm = true
            }
        },
        tab2(e, v) {
            this.flag = 1
            this.electr8()
            this.area = false
            this.type = true
            this.time = false
            if (e == 0) {
                if (v == 1) {
                    this.$emit('control', { name: 'DropEvent', val: 2 })
                }
                clearTimeout(this.timeA)
                clearTimeout(this.timeC)
                clearTimeout(this.timeB)
                this.calm = true
            }
        },
        tab3(e, v) {
            this.flag = 2
            clearInterval(this.time3)
            this.electr9()
            this.area = false
            this.type = false
            this.time = true
            if (e == 0) {
                if (v == 1) {
                    this.$emit('control', { name: 'DropEvent', val: 3 })
                }
                clearTimeout(this.timeA)
                clearTimeout(this.timeB)
                clearTimeout(this.timeC)
                this.calm = true
            }
        },
        // 分布式光伏渗透率
        async electr7() {
            let _this = this
            let EchartsData = []

            let arrData = this.electr7List.data.param
            let arrx = [],
                arry = []
            for (let i = 0; i < arrData.length; i++) {
                if (arrData[i].name.length > 3) {
                    arrx.push(arrData[i].name.slice(0, 3) + '..')
                } else {
                    arrx.push(arrData[i].name)
                }

                arry.push(arrData[i].count)
            }
            // arrData.forEach((item) => {
            //   item.name = item.name;
            //   item.value = item.count;
            // });
            EchartsData = arrData
            let echarts = require('echarts')
            let domID1 = document.getElementById('electr__7')
            let boxnum = document.getElementById('boxnum')
            setTimeout(() => {
                ;(domID1.style.width = this.$refs.electr__7.offsetWidth + 'px'),
                    (domID1.style.height = this.$refs.electr__7.offsetHeight + 'px')
                boxnum.style.width = this.$refs.electr__7.offsetWidth / 5 + 'px'
            }, 0)
            if (_this.myChart2 != null) {
                _this.myChart2.dispose()
                clearInterval(_this.time2)
            }
            _this.myChart2 = echarts.init(domID1)

            var chartData = arry
            var chartName = arrx
            // var chartData =  [1236,1214,1129,925,855,769,675,585,345,245];
            // var chartName = ["江苏省","浙江省","安徽省","福建省","广东省","河北省","山东省","湖南省","山西省","甘肃省"];

            // 	var max = Math.max.apply(null,chartData);
            var emptyData = chartData.map(function (v, i) {
                var item = {
                    value: 5000,
                    label: {
                        //右边数值
                        formatter: '{a|' + v + '次}',
                        position: 'right',
                        rich: {
                            a: {
                                color: '#00ffff',
                                fontSize: 10,
                                padding: [5, 5]
                            }
                        }
                    }
                }
                return item
            })

            let option = {
                //backgroundColor: '#061330',
                tooltip: {
                    show: true,
                    trigger: 'item',
                    backgroundColor: 'rgba(8,36,68,.7)',
                    color: '#00ffff',
                    textStyle: {
                        color: '#00ffff'
                    },
                    formatter: function (params, ticket, callback) {
                        var res = ''
                        var name = chartName[params.dataIndex]
                        var value = chartData[params.dataIndex]
                        res = name + '<br />发生暂降次数：' + value + '次'
                        return res
                    }
                },
                grid: {
                    top: '10px',
                    right: '20px',
                    left: '25px',
                    bottom: '10px',
                    containLabel: true
                },
                xAxis: [
                    {
                        show: false
                    },
                    {
                        type: 'value',
                        axisLabel: {
                            //坐标轴字体颜色
                            show: false
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: 'rgba(255,255,255,0.12)'
                            }
                        },
                        axisTick: {
                            //y轴刻度线
                            show: false
                        },
                        splitLine: {
                            //网格
                            show: false
                        },
                        max: function (value) {
                            return value.max
                        }
                    }
                ],

                yAxis: [
                    {
                        type: 'category',
                        show: true,
                        inverse: true,
                    

                        data: chartName,
                        interval: 10,
                        axisTick: {
                            //y轴刻度线
                            show: false
                        },
                        axisLabel: {
                            formatter: function (value) {
                                if (value.length > 3) {
                                    return `${value.slice(0, 2)}...`
                                }
                                return value
                            },
                            color: '#fff',
                            fontSize: 10,
                            // 配置序号背景
                            rich: {
                                a1: {
                                    color: '#fff',
                                    backgroundColor: '#FFCC00',
                                    width: 15,
                                    height: 15,
                                    align: 'center',
                                    borderRadius: 10
                                },
                                a2: {
                                    color: '#fff',
                                    backgroundColor: '#999999',
                                    width: 15,
                                    height: 15,
                                    align: 'center',
                                    borderRadius: 10
                                },
                                a3: {
                                    color: '#fff',
                                    backgroundColor: '#FF6600',
                                    width: 15,
                                    height: 15,
                                    align: 'center',
                                    borderRadius: 10
                                },
                                a4: {
                                    color: '#fff',
                                    backgroundColor: '#FF0099',
                                    width: 15,
                                    height: 15,
                                    align: 'center',
                                    borderRadius: 10
                                },
                                a5: {
                                    color: '#fff',
                                    backgroundColor: '#66ff66',
                                    width: 15,
                                    height: 15,
                                    align: 'center',
                                    borderRadius: 10
                                },
                                a6: {
                                    color: '#fff',
                                    backgroundColor: '#CC66FF',
                                    width: 15,
                                    height: 15,
                                    align: 'center',
                                    borderRadius: 10
                                },
                                a7: {
                                    color: '#fff',
                                    backgroundColor: '#33ffff',
                                    width: 15,
                                    height: 15,
                                    align: 'center',
                                    borderRadius: 10
                                },
                                a8: {
                                    color: '#fff',
                                    backgroundColor: '#00CC99',
                                    width: 15,
                                    height: 15,
                                    align: 'center',
                                    borderRadius: 10
                                },
                                a9: {
                                    color: '#fff',
                                    backgroundColor: '#FFCCFF',
                                    width: 15,
                                    height: 15,
                                    align: 'center',
                                    borderRadius: 15
                                },
                                a10: {
                                    color: '#fff',
                                    backgroundColor: '#FFCC33',
                                    width: 15,
                                    height: 15,
                                    align: 'center',
                                    borderRadius: 10
                                }
                            },
                            formatter: function (params, index) {
                                var leftIndex = index + 1
                                if (leftIndex < 33) {
                                    return ['{a' + leftIndex + '|' + leftIndex + '}' + '  ' + params].join('/n')
                                } else {
                                    return ['{b|' + leftIndex + '}' + '  ' + params].join('/n')
                                }
                            }
                        },
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    {
                        type: 'category',
                        name: '',
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        inverse: true,
                        data: chartName
                    }
                ],
                dataZoom: [
                    {
                        type: 'slider',
                        show: true,
                        // 设置组件控制的y轴
                        yAxisIndex: [0, 1],
                        left: 5,
                        // top: 60,
                        // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%
                        // 也可以用 startValue设置起始值
                        start: 0,
                        end: 50, //默认为100
                        width: 6,
                        // height: 450,
                        // 组件的背景颜色
                        // left: 600, //左边的距离
                        // right: 8,//右边的距离
                        borderRadius: 5,
                        // borderColor: "rgba(43,48,67,0.8)",
                        // fillerColor: '#ccc',//滑动块的颜色
                        //  backgroundColor: '#33384b',//两边未选中的滑动条区域的颜色
                        // 是否显示detail，即拖拽时候显示详细数值信息
                        showDetail: false,
                        // 控制手柄的尺寸
                        handleSize: 12,
                        // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势。
                        showDataShadow: false
                    },
                    {
                        type: 'inside',
                        yAxisIndex: [0, 1],
                        start: 1
                        // end: 36,
                        // 不按任何功能键，鼠标滚轮能触发缩放
                        // zoomOnMouseWheel: false,
                        // 不按任何功能键，鼠标移动能触发数据窗口平移
                        // moveOnMouseWheel: true,
                    }
                ],

                series: [
                    {
                        type: 'bar',
                        barMaxWidth: '10',
                        yAxisIndex: 1,
                        silent: true,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    1,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: '#FF6600' // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: '#28c3db' // 100% 处的颜色
                                        }
                                    ],
                                    false
                                ),
                                barBorderRadius: [20, 20]
                            }
                        },
                        label: {
                            show: true,
                            position: 'right',
                            formatter: function (params) {
                                return `${params.value}次`
                            },
                            textStyle: {
                                color: '#00ffff',
                                fontSize: 10
                            }
                        },
                        data: chartData
                    },
                    {
                        show: true,
                        type: 'bar',
                        barWidth: '10',
                        z: 2,
                        label: {
                            show: false
                        },
                        itemStyle: {
                            normal: {
                                color: '#098cad4f',
                                barBorderRadius: [20, 20]
                            }
                        },

                        data: emptyData
                    }
                ]
            }
            //自己滚动图表
            let timeOut = null
            _this.myChart2.on('mouseover', this.stop())
            _this.myChart2.on('mouseout', this.goMove())
            this.autoMove()
       

            option && _this.myChart2.setOption(option, true)
            window.echartsArr.push(_this.myChart2)
            setTimeout(function () {
                _this.myChart2.resize()
            }, 0)
            _this.time2 = setInterval(() => {
                if (Number(option.dataZoom[0].end) > 100) {
                    option.dataZoom[0].end = 50
                    option.dataZoom[0].start = 0
                } else {
                    option.dataZoom[0].end = 100
                    // option.dataZoom[0].end + 1 * (100 / option.series[0].data.length);
                    option.dataZoom[0].start = 50
                    // option.dataZoom[0].start + 1 * (100 / option.series[0].data.length);
                }
                _this.myChart2.setOption(option)
                window.echartsArr.push(_this.myChart2)
            }, 8000)
        },
        autoMove() {},
        stop() {
            //    clearInterval(timeOut)
        },
        goMove() {
            this.autoMove()
        },
        async electr8() {
            let echarts = require('echarts')
            let domID1 = document.getElementById('electr__8')
            setTimeout(() => {
                ;(domID1.style.width = this.$refs.electr__8.offsetWidth + 'px'),
                    (domID1.style.height = this.$refs.electr__8.offsetHeight + 'px')
            }, 0)

            let myChart2 = echarts.init(domID1)
            let a = []
            let EchartsData = []
            // 数据处理
            // 原作品：https://www.makeapie.com/editor.html?c=xS1sKZMUg7
            // const data = await getLoadType(this.formData);
            let arrData = this.electr8List.data
            arrData.forEach(item => {
                item.name = item.name
                item.value = item.count
            })
            EchartsData = arrData
            EchartsData.forEach(res => {
                a.push(res.value)
            })
            let option = {
                grid: {
                    top: '10%'
                },
                tooltip: {
                    show: true,
                    trigger: 'item',
                    backgroundColor: 'rgba(8,36,68,.7)',
                    color: '#00ffff',
                    textStyle: {
                        color: '#00ffff'
                    },
                    position: 'right',
                    appendToBody: true
                },
                radar: {
                    center: ['50%', '50%'],
                    radius: '70%',
                    shape: 'circle',
                    splitArea: {
                        areaStyle: {
                            color: ['transparent']
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#0cd0da'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#a4a4a4'
                        }
                    },
                    indicator: EchartsData
                },
                series: [
                    {
                        type: 'radar',
                        name: '负荷类型暂降类型发生次数',
                        symbol: 'circle',
                        symbolSize: 6,
                        itemStyle: {
                            normal: {
                                color: 'rgba(19, 173, 255, 1)',
                                borderColor: 'rgba(19, 173, 255, 0.4)'
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: 'rgba(19, 173, 255, 0.5)'
                            }
                        },
                        lineStyle: {
                            normal: {
                                color: '#24739c',
                                width: 2,
                                type: 'solid'
                            }
                        },

                        data: [a]
                    }
                ]
            }

            option && myChart2.setOption(option, true)
            window.echartsArr.push(myChart2)
            setTimeout(function () {
                myChart2.resize()
            }, 0)
        },
        async electr9() {
            let _this = this
            let echarts = require('echarts')
            let domID1 = document.getElementById('electr__9')
            setTimeout(() => {
                ;(domID1.style.width = this.$refs.electr__9.offsetWidth + 'px'),
                    (domID1.style.height = this.$refs.electr__9.offsetHeight + 'px')
            }, 0)
            if (_this.myChart3 != null) {
                _this.myChart3.dispose()
                clearInterval(_this.time3)
            }
            _this.myChart3 = echarts.init(domID1)
            // const data = await getTimeCount(this.formData);

            // 数图配置项
            var option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(8,36,68,.7)',
                    color: '#00ffff',
                    textStyle: {
                        color: '#00ffff'
                    },
                    formatter: function (params) {
                        //  console.log(params);
                        var tips = ''
                        // tips += params[0].name + "</br/>";
                        for (var i = 0; i < params.length; i++) {
                            tips += '时间' + ':' + '&nbsp' + '&nbsp' + params[i].name + '</br/>'
                            tips += '统计次数' + ':' + '&nbsp' + '&nbsp' + params[i].value + '</br/>'
                            //   if (params[i].value == 3.14159) {
                            //     tips += params[i].seriesName + ":" + 0 + "<br/>";
                            //   } else {
                            //     tips += params[i].name + ":" + params[i].value + "<br/>";
                            //   }
                        }
                        return tips
                    },
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    top: '40px', // 等价于 y: '16%'
                    left: '10px',
                    right: '45px',
                    bottom: '15px',
                    containLabel: true
                },
                legend: {
                    itemGap: 100,
                    // data: ["时间"],
                    textStyle: {
                        //图例文字的样式
                        color: '#00ffff'
                    },
                    left: 'center',
                    top: 10
                },
                xAxis: {
                    name: '时间',
                    type: 'category',
                    boundaryGap: false,
                    data: this.xData,
                    axisLine: {
                        lineStyle: {
                            color: '#00ffff'
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#00ffff'
                        }
                    }
                },

                yAxis: [
                    {
                        type: 'value',
                        minInterval: 1,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#00ffff'
                            }
                        },

                        splitLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: '#00ffff'
                            }
                        }
                    },
                    {
                        name: '单位:次',
                        nameTextStyle: {
                            color: '#00ffff',

                            fontSize: 12
                        },
                        minInterval: 1,

                        position: 'right',
                        //right:'15%',
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        // name: "时间",
                        data: this.yData,
                        type: 'line',
                        smooth: true,
                        color: {
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            type: 'linear',
                            global: false,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#008AFE'
                                },
                                {
                                    offset: 1,
                                    color: '#00EAFF'
                                }
                            ]
                        }
                    }
                ]
            }
            var app = {
                currentIndex: -1
            }
            _this.time3 = setInterval(function () {
                var dataLen = option.series[0].data.length

                // 取消之前高亮的图形
                _this.myChart3.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: app.currentIndex
                })
                app.currentIndex = (app.currentIndex + 1) % dataLen
                //console.log(app.currentIndex);
                // 高亮当前图形
                _this.myChart3.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: app.currentIndex
                })
                // 显示 tooltip
                _this.myChart3.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: app.currentIndex
                })
            }, 2000)
            option && _this.myChart3.setOption(option, true)
            window.echartsArr.push(_this.myChart3)
            setTimeout(function () {
                _this.myChart3.resize()
            }, 0)
        }
    },
    beforeDestroy() {
        for (let i = 1; i < 10000; i++) {
            clearInterval(i)
        }
        for (let i = 1; i < 10000; i++) {
            clearTimeout(i)
        }
    },

    computed: {},

    watch: {}
}
</script>
<style lang="less" scoped>
@import url('../../center/css/home.less');
// @import url("../center/css/change.less");
@font-face {
    font-family: sszh;
    src: url('../../center/fonts/sszh.ttf'); /* IE9+ */
}
.MonitoringPointScale {
    width: 100%;
    height: 100%;
    .boxT {
        display: flex;
        align-items: center;
        height: 8%;
        font-family: '\5FAE\8F6F\96C5\9ED1';
        font-size: 0.85rem;
        line-height: 8%;
        // background-color: #29707f;
        letter-spacing: 1px;
        color: #07d8fd;
        cursor: pointer;
        background: linear-gradient(225deg, transparent 10px, #29707f 0) top right;
        .imgicon {
            height: 100%;
            padding: 0 1.5%;
            cursor: pointer;
        }
        .divSpan {
            padding-left: 5%;
            font-size: 0.85rem;
            color: #fff;
        }
    }
    .boxB {
        position: relative;
        height: 92%;
        // background-color: rgb(41, 16, 16);
    }
    .boxnum {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 100000000;
    }
    .zong_title {
        font-size: 18px;
        text-align: center;
    }
    .zong_num {
        font-family: electricFont;
        font-size: 30px;
        color: rgb(0, 238, 255);
        text-align: center;
    }
    .add_title {
        font-size: 18px;
        color: rgb(0, 238, 255);
        text-align: center;
    }
    .add_num {
        font-family: electricFont;
        font-size: 30px;
        color: yellow;
        text-align: center;
    }
    .zong {
        margin-top: 20px;
        border: 1px solid yellow;
        border-radius: 8px;
    }
    .add {
        margin-top: 5px;
        border: 1px solid rgb(0, 238, 255);
        border-radius: 8px;
    }
}
</style>
