<template>
    <div class="pd10" :style="`height:${vh}`" id="wzx">
        <div style="position: absolute; right: 60px; top: 18px; font-weight: bold">
            <el-tag
                style="
                    background: #cc0000;
                    width: 30px;
                    height: 15px;
                    border: 1px solid #cc0000;
                    float: left;
                    margin-top: 2px;
                "
            ></el-tag>
            <span style="color: #cc0000; font-weight: 400; float: left">&nbsp&nbsp完整性<60% &nbsp&nbsp</span>
            <el-tag
                size="mini"
                style="
                    background: #ffcc33;
                    width: 30px;
                    height: 15px;
                    border: 1px solid #ffcc33;
                    float: left;
                    margin-top: 2px;
                "
            ></el-tag>
            <span style="color: #ffcc33; font-weight: 400; float: left">&nbsp&nbsp60%≤完整性<90% &nbsp&nbsp</span>
            <el-tag
                style="
                    background: #339966;
                    width: 30px;
                    height: 15px;
                    border: 1px solid #339966;
                    float: left;
                    margin-top: 2px;
                "
            ></el-tag>
            <span style="color: #339966; font-weight: 400; float: left">&nbsp&nbsp完整性≥90%</span>
        </div>
        <el-button
            style="position: absolute; right: 10px; z-index: 20000"
            type="text"
            icon="el-icon-download"
            title="生成图片"
            @click="download"
        >
            下载
        </el-button>
        <div ref="fg" id="dataintegrity"></div>
        <!-- -->
    </div>
</template>
<script>
import yan from '@/assets/commjs/color'
export default {
    data() {
        return {
            vh: null,
            zoom: '',
            loadingd: false,
            tableheight: undefined,
            title: '区域',
            titlex: '区域',
            device: 1,
            myChartes: ''
        }
    },
    props: {
        xdata: {
            type: Array,
            default: undefined
        },
        loading: {
            type: Boolean,
            default: false
        },
        classvalue: {
            type: String,
            default: undefined
        },
        ydata: {
            type: Array,
            default: undefined
        },
        ydata1: {
            type: Array,
            default: undefined
        },
        timeValue: {
            type: String,
            default: undefined
        },
        timehuanbiValue: {
            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.resizeEchartd()

        this.$nextTick(() => {
            this.dataintegrityecharts()
        })
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 115 + 'px'
            if (this.myChartes !== '') {
                this.myChartes.resize()
            }
        },
        resizeEchartd() {
            var elementResizeDetectorMaker = require('element-resize-detector')
            if (document.getElementById('wzx')) {
                var erd = elementResizeDetectorMaker()
                erd.listenTo(document.getElementById('wzx'), element => {
                    let domeId = document.getElementById('wzx')
                    let domeId2 = document.getElementById('dataintegrity')
                    domeId2.style.width = domeId.offsetWidth - 10 + 'px'
                    if (this.myChartes !== '') {
                        this.myChartes.resize()
                    }
                })
            }
        },
        download() {
            // 转换成canvas
            html2canvas(document.getElementById('wzx'), {
                //backgroundColor: 'white',
                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() // 下载之后把创建的元素删除
            })
        },
        dataintegrityecharts() {
            const echarts = require('echarts')
            let domID1 = document.getElementById('dataintegrity')
            setTimeout(() => {
                domID1.style.width = document.getElementById('wzx').offsetWidth - 10 + 'px'
                domID1.style.height = window.sessionStorage.getItem('appheight') - 125 + 'px'
            }, 0)
            var myChartes = echarts.init(domID1)
            this.myChartes = myChartes
            myChartes.clear()
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            var option = {
                title: {
                    text: this.title,
                    left: 'center',
                    textStyle: {
                        fontSize: yan.EchartObject.titleNamefontSize1,
                        color: echartsColor.WordColor
                    }
                },
                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 = ''

                        for (var i = 0; i < params.length; i++) {
                            if (params[i].value == 1) {
                                tips += params[i].name + '</br>'
                                tips += '数据完整性:暂无数据'
                            } else {
                                tips += params[i].name + '</br>'
                                tips += '数据完整性:' + params[i].value
                            }
                        }
                        return tips
                    }
                },
                grid: yan.EchartObject.grid4,
                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,
                                fontSize: yan.EchartObject.xNamefontSize
                            },
                            rotate: 0
                        },
                        axisLine: {
                            show: true,
                            symbol: ['none', 'arrow'],
                            symbolOffset: 5, //箭头距离x轴末端距离
                            lineStyle: {
                                shadowOffsetX: 5,
                                color: echartsColor.thread,
                                shadowColor: echartsColor.thread //设置阴影的颜色
                            }
                        }
                    }
                ],
                // toolbox: yan.EchartObject.toolbox1,
                dataZoom: yan.EchartObject.dataZoom,
                yAxis: [
                    {
                        name: yan.EchartObject.nuit1,
                        nameTextStyle: {
                            color: echartsColor.WordColor,
                            verticalAlign: 'top', //标题位置
                            padding: [-22, 0, 10, 0]
                        },
                        type: 'value',
                        min: 0,
                        max: 100,
                        axisLabel: {
                            color: echartsColor.WordColor,
                            fontSize: yan.EchartObject.xNamefontSize
                        },
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            symbol: ['none', 'arrow'],
                            symbolOffset: 25, //箭头距离x轴末端距离
                            lineStyle: {
                                shadowOffsetY: -25,
                                color: echartsColor.thread,
                                shadowColor: echartsColor.thread //设置阴影的颜色
                            }
                        },
                        splitArea: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: this.timeValue,
                        barMaxWidth: yan.EchartObject.barMaxWidth,
                        type: 'bar',
                        label: {
                            normal: {
                                show: false,
                                position: 'top'
                            }
                        },
                        itemStyle: {
                            normal: {
                                // 随机显示
                                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                                // 定制显示（按顺序）
                                color: function (params) {
                                    if (params.value >= 90) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [{ offset: 1, color: yan.ColorObject.Integrity1 }],
                                            false
                                        )
                                    } else if (params.value >= 60 && params.value <= 90) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [{ offset: 1, color: yan.ColorObject.Integrity2 }],
                                            false
                                        )
                                    } else if (params.value <= 60 && params.value !== 3.14159 && params.value !== 1) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [{ offset: 1, color: yan.ColorObject.Integrity3 }],
                                            false
                                        )
                                    } else if (params.value == 3.14159 || params.value == 1) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [{ offset: 1, color: '#ccc' }],
                                            false
                                        )
                                    }
                                }
                            }
                        },
                        markLine: {
                            silent: false,
                            symbol: 'circle',
                            data: [
                                {
                                    name: '',
                                    yAxis: 100,
                                    lineStyle: {
                                        color: yan.ColorObject.Integrity1
                                    },
                                    label: {
                                        //position: "middle",
                                        formatter: '{b}',
                                        textStyle: {
                                            color: yan.ColorObject.Integrity1
                                        }
                                    }
                                },
                                {
                                    name: '',
                                    yAxis: 90,
                                    lineStyle: {
                                        color: yan.ColorObject.Integrity2
                                    },
                                    label: {
                                        //position: "middle",
                                        formatter: '{b}',
                                        textStyle: {
                                            color: yan.ColorObject.Integrity2
                                        }
                                    }
                                },
                                {
                                    name: '',
                                    yAxis: 60,
                                    lineStyle: {
                                        color: yan.ColorObject.Integrity3
                                    },
                                    label: {
                                        // position: "middle",
                                        formatter: '{b}',
                                        textStyle: {
                                            color: yan.ColorObject.Integrity3
                                        }
                                    }
                                }
                            ]
                        },
                        data: this.ydata
                    }
                ]
            }
            myChartes.setOption(option)
            window.echartsArr.push(myChartes)
            setTimeout(() => {
                myChartes.resize()
            }, 100)
            let _this = this
            _this.$erd.listenTo(_this.$refs.fg, element => {
                _this.$nextTick(() => {
                    domID1.style.width = document.getElementById('wzx').offsetWidth - 10 + 'px'
                    myChartes.resize()
                })
            })
            window.onresize = function () {
                myChartes.resize()
            }
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../styles/comStyle.less');
</style>
