<template>
    <div class="box">
        <div :style="`height:${h};`"></div>
    </div>
</template>
<script>
import { getEventSeverity } from '@/api/sagSeverity.js'
import { dicData } from '@/assets/commjs/dictypeData'
import { viewheight } from '@/assets/commjs/common'
import { getDomainData } from '@/api/transientassessment.js'
export default {
    data() {
        return {
            isLoading: false,
            classificationData: [],
            statisticalType: {},

            tableHeaderAera: [
                { prop: 'areaName', label: '区域', width: '150px' },
                { prop: 'eventNum', label: '暂降点次数' },
                { prop: 'lineNum', label: '暂降点个数' }
            ],
            device: null,
            zoom: undefined, //图表焦点校验
            h: null,
            isLoading1: false
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.getclassificationData()

        this.$nextTick(() => {
            this.domain()
            this.transientassessment()
        })
    },

    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            let heightd = window.sessionStorage.getItem('appheight') - 200
            this.h = (heightd + 75) / 2 + 'px'
        },

        transientassessment() {
            this.isLoading = true
            let params = {
                deptIndex: this.$store.getters.projectUnit.id,
                monitorFlag: 2,
                powerFlag: 2,
                searchBeginTime: this.$store.getters.projectTitleId[0],
                searchEndTime: this.$store.getters.projectTitleId[1],
                serverName: 'event-boot',
                statisticalType: this.statisticalType
            }
            getEventSeverity(params).then(res => {
                this.isLoading = false
                this.areaData = res.data.eventSeverityValue
                // console.log(this.areaData, "areadata");
            })
        },
        async domain() {
            let echarts = require('echarts')
            let main = document.getElementById('echart')

            this.isLoading1 = true
            let echartsndArr = []
            let echartsArr = []
            let params = {
                deptIndex: this.$store.getters.projectUnit.id,

                monitorFlag: 2,
                powerFlag: 2,

                searchBeginTime: this.$store.getters.projectTitleId[0],
                searchEndTime: this.$store.getters.projectTitleId[1],
                serverName: 'event-boot',
                statisticalType: this.statisticalType
            }

            await getEventSeverity(params).then(res => {
                let data = res.data.eventSeverityValue
                // console.log(data, "iiijsijis+!!!1");
                let domID1 = document.getElementById('echart')
                let myChart = echarts.init(domID1)
                //     setTimeout(() => {
                //     (domID1.style.height =
                //       window.sessionStorage.getItem('appheight')/2 + "px");
                // }, 0);
                let echartsData = data
                // console.log("地区echartsData:",echartsData)
                this.isLoading1 = false

                for (let i = 0; i < echartsData.length; i++) {
                    echartsndArr.push(echartsData[i].areaName)
                }
                for (let i = 0; i < echartsData.length; i++) {
                    echartsArr.push(echartsData[i].lineNum)
                }

                let option = {
                    title: {
                        text: '中国',
                        left: 'center',
                        top: 5
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    grid: {
                        left: '5%',
                        right: '12%',
                        top: '15%',
                        bottom: '15%'
                    },
                    //   legend: {
                    //     data: ['暂降次数',],
                    //     icon: 'rect',
                    //       top: 10,
                    //       left: '7%',
                    //       itemGap: 20,
                    //       itemWidth: 12,
                    //       itemHeight: 8,
                    //   },
                    xAxis: [
                        {
                            name: '地区\n(监测点数)', // 给X轴加单位
                            type: 'category',
                            data: echartsndArr,
                            axisPointer: {
                                type: 'shadow'
                            },
                            itemStyle: {
                                barWidth: '30'
                            },
                            axisLabel: {
                                interval: 0, //使x轴上的文字显示完全,
                                margin: 25,
                                rotate: 25,
                                align: 'center'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            max: 300,
                            type: 'value',
                            name: '(监测点个数)',
                            axisLine: {
                                show: true
                            }
                        }
                    ],
                    series: [
                        {
                            //   name: '暂降次数',
                            barMaxWidth: 30,
                            itemStyle: {
                                color: '#009999'
                            },
                            type: 'bar',
                            data: echartsArr
                        }
                    ]
                }
                myChart.setOption(option)
                window.echartsArr.push(myChart)
                setTimeout(() => {
                    myChart.resize()
                }, 400)
                // myChart.resize();
                // let _this = this;
                // _this.$erd.listenTo(_this.$refs.fg, element => {
                //   _this.$nextTick(() => {
                //     myChart.resize();
                //   });
                // });

                // window.onresize = function() {
                //   myChart.resize();
                // };
            })

            // {monitoring: '四川省', order: '(暂无数据)', level: '(暂无数据)'}

            //   console.log("地区data:",data)
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../../styles/comStyle.less');
// .box{
//   display: flex;
// }
::v-deep .el-table .cell {
    text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 10px;
}
</style>
