<template>
    <div id="electr2" :style="`width:100%;height:100%;`" ref="zjyy"></div>
</template>

<script>
export default {
    props: {
        resembleData: {
            type: Array,
            default: undefined
        }
    },
    data() {
        return {
            device: null,
            zoom: undefined, //图表焦点校验
            h: null,
            isLoading1: false,
            barData: [],
            myChart: ''
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.resizeEchartZ()

        //   }

        // this.$nextTick(() => {
        //   this.resemble();
        // });
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            let heightd = window.sessionStorage.getItem('appheight') - 250
            this.h = heightd / 2 + 'px'
            this.zoom = 1 / document.body.style.zoom
            if (this.myChart !== '') {
                this.myChart.resize()
            }
        },
        async resemble() {
            this.isLoading1 = true
            this.barData = []
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            this.resembleData.forEach((item, index) => {
                let obj = {
                    value: item.value,
                    name: item.name,
                    itemStyle: {
                        normal: { show: true, color: echartsColor.FigureColor[index] }
                    }
                }
                this.barData.push(obj)
                this.barData.forEach((item, i) => {
                    if (item.name == '总计') {
                        this.barData.splice(i, 1)
                    }
                })
                //console.log(this.barData);
            })
            let echarts = require('echarts')
            let domID1 = document.getElementById('electr2')
            let myChart = echarts.init(domID1)
            this.myChart = myChart
            setTimeout(() => {
                ;(domID1.style.width = document.getElementById('zjyy').offsetWidth - 0 + 'px'),
                    (domID1.style.height = (window.sessionStorage.getItem('appheight') - 200) / 2 + 'px')
            }, 0)
            this.isLoading1 = false
            let option = {
                title: {
                    text: '暂降类型',
                    left: 'center',
                    top: 0
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    left: 10,
                    top: '5%'
                },
                tooltip: {
                    trigger: 'item',
                    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)',
                    formatter: '{a} <br/>{b} : {c} (次)',
                    confine: true
                },
                series: [
                    {
                        name: '暂降类型',
                        type: 'pie',
                        center: ['50%', '50%'],
                        selectedOffset: 30,
                        clockwise: true,
                        label: {
                            show: false,
                            position: 'outside'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '12',
                                formatter: '{b}: {c} (次)',
                                color: echartsColor.WordColor
                            }
                        },
                        data: this.barData,
                        itemStyle: {
                            opacity: 1,
                            color: {
                                repeat: 'repeat'
                            }
                        }
                    }
                ]
            }

            myChart.setOption(option)
            window.echartsArr.push(myChart)
            // myChart.resize();
            let _this = this
            _this.$erd.listenTo(_this.$refs.zjyy, element => {
                _this.$nextTick(() => {
                    domID1.style.width = document.getElementById('zjyy').offsetWidth - 0 + 'px'
                    myChart.resize()
                })
            })
            window.onresize = function () {
                myChart.resize()
            }
        },
        resizeEchartZ() {
            var elementResizeDetectorMaker = require('element-resize-detector')
            var erd = elementResizeDetectorMaker()
            erd.listenTo(document.getElementById('zjyy'), element => {
                let domeId2 = document.getElementById('electr2')
                domeId2.style.width = document.getElementById('zjyy').offsetWidth - 0 + 'px'
                if (this.myChart !== '') {
                    this.myChart.resize()
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
::v-deep .el-table__body-wrapper.is-scrolling-none {
    height: 227px !important;
}
</style>
