<template>
    <div>
        <div class="pd10" :style="`height:${vh}`" id="jbl">
            <el-button
                style="position: absolute; right: 10px; z-index: 20000"
                type="text"
                icon="el-icon-download"
                title="生成图片"
                @click="download"
            >
                下载
            </el-button>
            <div ref="kj" id="qualifiedechart"></div>
            <!--  -->
        </div>
    </div>
</template>
<script>
import yan from '@/assets/commjs/color'
import html2canvas from 'html2canvas'
export default {
    data() {
        return {
            voltageleve1: 0,
            tableheight: undefined,
            terminal: 0,
            interfere: 0,
            device: 1,
            title: '区域',
            titlex: '区域',
            zoom: '',
            vh: null,
            myChartes: ''
        }
    },
    props: {
        xdata: {
            type: Array,
            default: []
        },
        ydata1: {
            type: Array,
            default: []
        },
        ydata2: {
            type: Array,
            default: undefined
        },
        ydata3: {
            type: Array,
            default: undefined
        },
        ydata4: {
            type: Array,
            default: undefined
        },
        ydata5: {
            type: Array,
            default: undefined
        },
        ydata6: {
            type: Array,
            default: undefined
        },
        ydata7: {
            type: Array,
            default: undefined
        },
        ydata8: {
            type: Array,
            default: undefined
        },
        mindata: {
            type: Number,
            default: undefined
        },
        //  title:{
        //   type:String,
        //   default:undefined
        //  },
        classvalue: {
            type: String,
            default: undefined
        }
    },
    watch: {
        classvalue: function (a, b) {
            if (a == 'Power_Network') {
                this.title = '区域'
                this.titlex = '区域'
            } else if (a == 'Manufacturer') {
                this.title = '终端厂家'
                this.titlex = '终端\n厂家'
            } else if (a == 'Voltage_Level') {
                this.title = '电压等级'
                this.titlex = '电压\n等级'
            } else if (a == 'Load_Type') {
                this.title = '干扰源类型'
                this.titlex = '干扰\n源类型'
            }
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.resizeEchartd()

        this.$nextTick(() => {
            this.qualifiedechart()
        })
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 125 + 'px'
            if (this.myChartes !== '') {
                this.myChartes.resize()
            }
        },
        resizeEchartd() {
            var elementResizeDetectorMaker = require('element-resize-detector')
            if (document.getElementById('jbl')) {
                var erd = elementResizeDetectorMaker()
                erd.listenTo(document.getElementById('jbl'), element => {
                    let domeId = document.getElementById('jbl')
                    let domeId2 = document.getElementById('qualifiedechart')
                    domeId2.style.width = domeId.offsetWidth - 10 + 'px'
                    if (this.myChartes !== '') {
                        this.myChartes.resize()
                    }
                })
            }
        },
        download() {
            // 转换成canvas
            html2canvas(document.getElementById('jbl'), {
                background: '#fff',
                scale: 1
            }).then(function (canvas) {
                // 创建a标签，实现下载
                var creatIMg = document.createElement('a')
                creatIMg.download = '谐波畸变率统计图.png' // 设置下载的文件名，
                creatIMg.href = canvas.toDataURL() // 下载url
                creatIMg.click()
                creatIMg.remove() // 下载之后把创建的元素删除
            })
        },
        qualifiedechart() {
            const echarts = require('echarts')
            let domID1 = document.getElementById('qualifiedechart')
            setTimeout(() => {
                ;(domID1.style.width = document.getElementById('jbl').offsetWidth - 10 + 'px'),
                    (domID1.style.height = window.sessionStorage.getItem('appheight') - 126 + 'px')
            }, 0)
            var myChartes = echarts.init(domID1)
            this.myChartes = myChartes
            myChartes.clear()
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let this2 = this
            var option = {
                title: {
                    text: this.title,
                    left: 'center',
                    textStyle: {
                        fontSize: yan.EchartObject.titleNamefontSize1,
                        color: echartsColor.WordColor
                    }
                    //subtext: '单位(%)'
                },
                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)',
                    formatter: function (params) {
                        var tips = ''
                        tips += params[0].name + '</br/>'

                        for (var i = 0; i < params.length; i++) {
                            if (params[i].value == this2.mindata) {
                                tips += params[i].seriesName + ':暂无数据<br/>'
                            } else {
                                tips += params[i].seriesName + ':' + params[i].value + '<br/>'
                            }
                        }
                        return tips
                    }
                },
                grid: yan.EchartObject.grid6,
                xAxis: [
                    {
                        name: this.titlex,
                        nameTextStyle: {
                            color: echartsColor.WordColor,
                            verticalAlign: 'top', //标题位置
                            padding: [-5, 0, 0, -10]
                        },
                        type: 'category',
                        data: this.xdata,
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            textStyle: {
                                fontFamily: yan.EchartObject.fontFamily,
                                color: echartsColor.WordColor
                            },
                            rotate: 0
                        },
                        axisLine: {
                            show: true,
                            symbol: ['none', 'arrow'],
                            symbolOffset: 5, //箭头距离x轴末端距离
                            lineStyle: {
                                shadowOffsetX: 5,
                                color: echartsColor.thread,
                                shadowColor: echartsColor.thread //设置阴影的颜色
                            }
                            // symbol: ["none", "arrow"],
                        }
                    }
                ],
                // toolbox:  yan.EchartObject.toolbox1,
                yAxis: [
                    {
                        name: yan.EchartObject.nuit1,
                        type: 'value',
                        min: 0,
                        // max: 100,
                        nameTextStyle: {
                            color: echartsColor.WordColor,
                            verticalAlign: 'top', //标题位置
                            padding: [-22, 0, 10, 0]
                        },
                        axisLine: {
                            show: true,
                            symbol: ['none', 'arrow'],
                            symbolOffset: 25, //箭头距离x轴末端距离
                            lineStyle: {
                                shadowOffsetY: -25,
                                color: echartsColor.thread,
                                shadowColor: echartsColor.thread //设置阴影的颜色
                            }
                        },
                        axisLabel: {
                            color: echartsColor.WordColor
                        },
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: [echartsColor.thread],
                                type: 'dashed',
                                opacity: 0.5
                            }
                        }
                    }
                ],
                dataZoom: yan.EchartObject.dataZoom,
                series: [
                    {
                        name: '总畸变率',
                        barMaxWidth: yan.EchartObject.barMaxWidth,
                        type: 'bar',
                        label: {
                            normal: {
                                // show: true,
                                // position: 'top'
                            }
                        },
                        itemStyle: {
                            normal: {
                                // 随机显示
                                color: function (params) {
                                    if (params.value == this2.mindata) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [{ offset: 1, color: '#ccc' }],
                                            false
                                        )
                                    } else {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [{ offset: 1, color: echartsColor.FigureColor[0] }],
                                            false
                                        )
                                    }
                                }
                            }
                        },
                        data: this.ydata1
                    }
                ]
            }
            myChartes.setOption(option)
            window.echartsArr.push(myChartes)
            window.onresize = function () {
                myChartes.resize()
            }
            let _this = this
            _this.$erd.listenTo(_this.$refs.kj, element => {
                _this.$nextTick(() => {
                    ;(domID1.style.width = document.getElementById('jbl').offsetWidth - 10 + 'px'), myChartes.resize()
                })
            })
            window.onresize = function () {
                myChartes.resize()
            }
        }
    }
}
</script>
<style scoped></style>
