<template>
    <div id="echart" :style="`width:100%;height:${h};`" ref="fg" v-loading="isLoading1"></div>
</template>
<script>
export default {
    props: {
        trendChartData: {
            type: Array,
            default: undefined
        }
    },
    data() {
        return {
            device: null,
            zoom: undefined, //图表焦点校验
            h: null,
            isLoading1: false,
            type: {},
            deptId: '',
            dataDate: [],
            flickerTimes: [], //
            freqTimes: [],
            inegTimes: [],
            inuharmTimes: [],
            itimes: [],
            unbalanceTimes: [],
            vdevTimes: [],
            vtimes: []
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.$nextTick(() => {
            this.province()
        })
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.zoom = window.devicePixelRatio
            if (this.zoom == 1) {
                let heightd = window.sessionStorage.getItem('appheight') - 300
                this.h = heightd + 'px'
            }
            if (this.zoom == 1.25) {
                let heightd = window.sessionStorage.getItem('appheight') - 405
                this.h = heightd + 'px'
            }
        },
        //echarts图
        async province() {
            this.isLoading1 = true
            // console.log(this.trendChartData,'1111111111111111111111');
            this.dataDate = []
            this.freqTimes = []
            this.vdevTimes = []
            this.flickerTimes = []
            this.vtimes = []
            this.itimes = []
            this.inuharmTimes = []
            this.unbalanceTimes = []
            this.inegTimes = []
            this.trendChartData.forEach(item => {
                this.dataDate.push(item.dataDate)
                this.freqTimes.push(item.freqTimes)
                this.vdevTimes.push(item.vdevTimes)
                this.flickerTimes.push(item.flickerTimes)
                this.vtimes.push(item.vtimes)
                this.itimes.push(item.itimes)
                this.inuharmTimes.push(item.inuharmTimes)
                this.unbalanceTimes.push(item.unbalanceTimes)
                this.inegTimes.push(item.inegTimes)
            })
            let echarts = require('echarts')
            let domID1 = document.getElementById('echart')
            let myChart = echarts.init(domID1)
            this.isLoading1 = false
            let option = {
                color: ['#00bfff', '#00fa9a', '#000080', '#87ceeb', '#daa520', '#d2691e', '#ff6347', '#7b68ee'],
                // title:{
                //     text: '配网运行指标',
                //     left: "1%",
                //   //   top: 5,
                // },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                grid: {
                    left: '3%',
                    right: '3%',
                    top: '8%',
                    bottom: '15%'
                },
                toolbox: {
                    feature: {
                        // dataView: { show: true, readOnly: false },
                        // magicType: { show: true, type: ["line", "bar"] },
                        // //restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {
                    // data: ["日均", "累计"],
                    //   icon: 'rect',
                    bottom: 10,
                    left: '25%',
                    itemGap: 20,
                    itemWidth: 12,
                    itemHeight: 8
                },
                xAxis: [
                    {
                        //   name: '电压等级\n(监测点数)',// 给X轴加单位
                        type: 'category',
                        boundaryGap: false,
                        data: this.dataDate,
                        axisPointer: {
                            type: 'shadow'
                        },
                        itemStyle: {
                            barWidth: '30'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                dataZoom: [
                    {
                        show: true,
                        height: 12,
                        xAxisIndex: [0],
                        bottom: '8%',
                        start: 0,
                        end: 100,
                        handleIcon:
                            'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                        handleSize: '110%',
                        handleStyle: {
                            color: '#d3dee5'
                        },
                        textStyle: {
                            color: '#fff'
                        },
                        borderColor: '#90979c'
                    },
                    {
                        type: 'inside',
                        show: true,
                        height: 15,
                        start: 0,
                        end: 100
                    }
                ],
                series: [
                    {
                        name: '频率偏差',
                        type: 'line',
                        data: this.freqTimes
                    },
                    {
                        name: '电压偏差',
                        type: 'line',
                        data: this.vdevTimes
                    },
                    {
                        name: '闪变',
                        type: 'line',
                        data: this.flickerTimes
                    },
                    {
                        name: '谐波电压',
                        type: 'line',
                        data: this.vtimes
                    },
                    {
                        name: '谐波电流',
                        type: 'line',
                        data: this.itimes
                    },
                    {
                        name: '间谐波电压',
                        type: 'line',
                        data: this.inuharmTimes
                    },
                    {
                        name: '三相电压不平衡度',
                        type: 'line',
                        data: this.unbalanceTimes
                    },
                    {
                        name: '负序电流',
                        type: 'line',
                        data: this.inegTimes
                    }
                ]
            }
            myChart.setOption(option)
            window.echartsArr.push(myChart)
            // myChart.resize();
            let _this = this
            _this.$erd.listenTo(_this.$refs.fg, element => {
                _this.$nextTick(() => {
                    myChart.resize()
                })
            })
            window.onresize = function () {
                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;
}
.button {
    float: right;
    margin-top: 30px;
    margin-right: 30px;
}
</style>
