<template>
    <!-- <div class="button"><el-button type="primary">返回</el-button></div> -->
    <div id="echart" style="width: 100%; height: 100%" ref="fg" v-loading="isLoading1"></div>
</template>
<script>
// import {getAreaData,dictDataCache} from "@/api/Tableabove"
// import { getMainnetworkData } from "@/api/Management-operation/operationIndex"
// import { dicData } from "@/assets/commjs/dictypeData";
export default {
    props: {
        mainnetworkData: {
            type: Array,
            default: undefined
        }
    },
    data() {
        return {
            device: null,
            zoom: undefined, //图表焦点校验
            h: null,
            isLoading1: false,
            myChart: null
            // type:{},
            // deptId:'',
            // echartsData: [], // 数据
            // echartsndArr: [], // 地区
            // echartsArr: [], // 数值
            // form:{
            //     deptIndex: "",
            //     monitorFlag: 2,
            //     powerFlag: 2,
            //     serverName:"event-boot",
            //     searchBeginTime: this.getCurrentMonthFirst(),
            //     searchEndTime: this.getNowFormatDate(),
            //     statisticalType: {},
            //     timeFlag:'',
            // },
        }
    },
    created() {
        //   this.form.deptIndex = JSON.parse(window.sessionStorage.getItem("Info")).deptId;
        //   this.getclassificationData();
        // this.test();
        // console.log(this.deptId.deptId)
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.$nextTick(() => {
            this.province()
        })
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            let domID1 = document.getElementById('echart')
            setTimeout(() => {
                ;(domID1.style.width = '100%'), (domID1.style.height = '100%')
            }, 0)
        },
        //echarts图
        province() {
            this.isLoading1 = true
            let xData = []
            let seriesData1 = []
            let seriesData2 = []
            let seriesData3 = []
            let seriesData4 = []
            this.mainnetworkData.forEach(item => {
                xData.push(item.orgName)
                seriesData1.push(item.transitMeasurementRate)
                seriesData2.push(item.dataIntegrityRate)
                seriesData3.push(item.dataRightRate)
                seriesData4.push(item.indexIntegrityRate)
            })

            let echarts = require('echarts')
            let domID1 = document.getElementById('echart')
            setTimeout(() => {
                ;(domID1.style.width = '100%'), (domID1.style.height = '100%')
            }, 0)
            this.myChart = echarts.init(domID1)
            this.isLoading1 = false
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let option = {
                color: echartsColor.FigureColor,
                title: {
                    text: '主网运行指标',    top: 20,
                    left: 'center',
                    textStyle: {
                        color: echartsColor.WordColor
                    }
                    //   top: 5,
                },
                grid: {
                    left: '3%',
                    right: '2%',
                    top: '60',
                    bottom: '8%',
                    containLabel: true
                },
             
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    formatter: params => {
                        // console.log(params);
                        let title = ''
                        let data = ''
                        params.forEach((item, i) => {
                            // console.log(item);
                            title = item.name + '<br>'
                            data += item.marker + ' ' + item.seriesName + ':  ' + item.data + '%' + '<br>'
                        })
                        return title + data
                        // return params[0].name + '<br>' +
                        //   params[0].marker + ' ' + params[0].seriesName + ':  ' + params[0].data + '%' + '<br>' +
                        //   params[1].marker + ' ' + params[1].seriesName + ':  ' + params[1].data + '%' + '<br>' +
                        //   params[2].marker + ' ' + params[2].seriesName + ':  ' + params[2].data + '%' + '<br>' +
                        //   params[3].marker + ' ' + params[3].seriesName + ':  ' + params[3].data + '%';
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0,
                    textStyle: {
                        align: 'left',
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    }
                },
                legend: {
                    data: ['在线监测率', '数据完整率', '数据准确率', '应设点覆盖率'],
                    // icon: 'rect',
                    right: 40,
                    top: 20,
                    itemGap: 28,
                    itemWidth: 16,
                    itemHeight: 16,
                    textStyle: {
                        color: echartsColor.WordColor,
                        rich: {
                            a: {
                                verticalAlign: 'middle'
                            }
                        },

                        padding: [2, 0, 0, 0] //[上、右、下、左]
                    }
                },
                xAxis: [
                    {
                        //   name: '电压等级\n(监测点数)',// 给X轴加单位
                        type: 'category',
                        data: xData,
                        axisPointer: {
                            type: 'shadow'
                        },
                        itemStyle: {
                            barWidth: '30'
                        },
                        axisLine: {
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            color: echartsColor.WordColor,
                            interval: 0,
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '(%)',
                        nameTextStyle: {
                            color: echartsColor.WordColor
                        },
                        minInterval: 1,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            color: echartsColor.WordColor
                        },
                        splitLine: {
                            lineStyle: {
                                // 浣跨敤娣辨祬鐨勯棿闅旇壊
                                color: [echartsColor.thread],
                                type: 'dashed',
                                opacity: 0.5
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            color: echartsColor.WordColor
                        }
                    }
                ],
                series: [
                    {
                        name: '在线监测率',
                        barWidth: 25,
                        barGap: 0,
                        type: 'bar',
                        data: seriesData1
                    },

                    {
                        name: '数据完整率',
                        barWidth: 25,
                        type: 'bar',
                        data: seriesData2
                    },

                    {
                        name: '数据准确率',
                        barWidth: 25,
                        type: 'bar',
                        data: seriesData3
                    },

                    {
                        name: '应设点覆盖率',
                        barWidth: 25,
                        type: 'bar',
                        data: seriesData4
                    }
                ]
            }
            this.myChart.setOption(option)
            // window.echartsArr.push(this.myChart);
            this.myChart.resize()

            window.addEventListener('resize', this.chartResize)
            let _this = this
            // _this.$erd.listenTo(_this.$refs.fg, (element) => {
            //   _this.$nextTick(() => {
            //     this.myChart.resize();
            //   });
            // });
        },
        chartResize() {
            this.myChart.resize()
            console.log(123)
        }
    },

    beforeDestroy() {
        // ;(document.getElementById('echart').style.width = window.sessionStorage.getItem('appwidth') - 40 + 'px'),
        //     (document.getElementById('echart').style.height =
        //         window.sessionStorage.getItem('appheight') / 2 - 65 + 'px')

        window.removeEventListener('resize', this.chartResize)
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../../styles/comStyle.less');
</style>
