<template>
    <div id="echart1" :style="`width:100%;height:100%;`" ref="dydj"></div>
</template>
<script>
import yan from '@/assets/commjs/color'
// import { getAreaData, dictDataCache } from "@/api/Tableabove";
// import { dicData } from "@/assets/commjs/dictypeData";
export default {
    props: {
        voltageStatistics: {
            type: Array,
            default: undefined
        }
    },
    data() {
        return {
            device: null,
            zoom: undefined, //图表焦点校验
            h: null,
            isLoading1: false,
            myChart: ''
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.resizeEchartZ()

        this.$nextTick(() => {
            // this.grade();
        })
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.h = (window.sessionStorage.getItem('appheight') - 200) / 2 + `px`
            if (this.myChart !== '') {
                this.myChart.resize()
            }
        },
        //echarts图
        async grade() {
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            // this.isLoading1 = true;
            let echartsndArr = []
            let echartsArr = []
            this.voltageStatistics.forEach(item => {
                echartsndArr.push(item.voltageLevel)
                // if (item.frequency == 0) {
                //   item.frequency = 3.14159;
                // }
                if (item.frequency == 0) {
                    item.frequency = 1.1
                } else if (item.frequency == 1) {
                    item.frequency = 1.3
                }
                echartsArr.push(item.frequency)
            })
            let echarts = require('echarts')
            let domID1 = document.getElementById('echart1')
            let myChart = echarts.init(domID1)
            this.myChart = myChart
            setTimeout(() => {
                ;(domID1.style.width = document.getElementById('csshesd').offsetWidth - 0 + 'px'),
                    (domID1.style.height = (window.sessionStorage.getItem('appheight') - 120) / 2 + `px`)
            }, 0)
            // this.isLoading1 = false;

            let option = {
                title: {
                    text: '电压等级',
                    left: 'center',
                    textStyle: {
                        color: echartsColor.WordColor,
                        fontSize: yan.EchartObject.titleNamefontSize1
                    }
                },
                tooltip: {
                    //提示框组件
                    trigger: 'axis',

                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0,
                    formatter: function (params) {
                        // console.log(params);
                        let html = '电压等级：' + params[0].name
                        params.forEach((item, index) => {
                            if (item.value == 1.1) {
                                html += `<br/>${item.seriesName}: ${0}次`
                            } else if (item.value == 1.3) {
                                html += `<br/>${item.seriesName}: ${1}次`
                            } else {
                                html += `<br/>${item.seriesName}: ${item.value}次`
                            }
                        })
                        return html
                        // var tips = "";
                        // for (var i = 0; i < params.length; i++) {
                        //   if (params[i].value == 3.14159) {
                        //     tips += params[i].name + "<br/>";
                        //     tips += params[i].seriesName + ":暂无数据<br/>";
                        //   } else {
                        //     tips += params[i].name + "<br/>";
                        //     tips += params[i].seriesName + ":" + params[i].value + "<br/>";
                        //   }
                        // }
                        // return tips;
                    }
                },
                grid: yan.EchartObject.grid11,
                dataZoom: yan.EchartObject.dataZoom,
                legend: {
                    data: ['暂降次数'],
                    right: 80,
                    top: 10,
                    itemGap: 28,
                    itemStyle: {
                        color: echartsColor.FigureColor[0]
                    },
                    textStyle: {
                        color: echartsColor.WordColor,
                        rich: {
                            a: {
                                verticalAlign: 'middle'
                            }
                        },

                        padding: [2, 0, 0, 0] //[上、右、下、左]
                    }
                },
                xAxis: [
                    {
                        name: '电压等级', // 给X轴加单位
                        type: 'category',
                        data: echartsndArr,
                        axisTick: { show: false },
                        axisLine: {
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                fontFamily: yan.EchartObject.fontFamily,
                                color: echartsColor.WordColor,
                                fontSize: yan.EchartObject.xNamefontSize
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: yan.EchartObject.number,
                        nameTextStyle: {
                            color: echartsColor.WordColor
                        },
                        minInterval: 1,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            color: echartsColor.WordColor,
                            fontSize: yan.EchartObject.yNamefontSize
                        },
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: [echartsColor.thread],
                                type: 'dashed',
                                opacity: 0.5
                            }
                        }
                    }
                ],
                series: [
                    {
                        barMaxWidth: yan.EchartObject.barMaxWidth,
                        barMinHeight: 5,
                        itemStyle: {
                            normal: {
                                //这里是颜色
                                color: function (params) {
                                    // console.log(params,'1111111111111111111111');
                                    if (params.data == 1.1) {
                                        return echartsColor.FigureColor[9]
                                    } else {
                                        return echartsColor.FigureColor[0]
                                    }
                                }
                            }
                            // color: echartsColor.FigureColor[0],
                        },
                        name: '暂降次数',
                        type: 'bar',
                        data: echartsArr
                    }
                ]
            }
            myChart.setOption(option)
            window.echartsArr.push(myChart)
            let _this = this
            _this.$erd.listenTo(_this.$refs.dydj, element => {
                _this.$nextTick(() => {
                    domID1.style.width = document.getElementById('csshesd').offsetWidth - 0 + 'px'
                    myChart.resize()
                })
            })
            setTimeout(function () {
                myChart.resize()
            }, 0)
        },
        resizeEchartZ() {
            var elementResizeDetectorMaker = require('element-resize-detector')
            var erd = elementResizeDetectorMaker()
            erd.listenTo(document.getElementById('csshesd'), element => {
                // let  domeId=document.getElementById("ceshi")
                let domeId2 = document.getElementById('echart1')
                domeId2.style.width = document.getElementById('csshesd').offsetWidth - 0 + 'px'
                //this.$nextTick(() => {
                if (this.myChart !== '') {
                    this.myChart.resize()
                }

                // });
            })
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../../../styles/comStyle.less');
::v-deep .el-table .cell {
    text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 10px;
}
</style>
