<template>
    <div>
        <el-row element-loading-text="数据加载中">
            <!-- echarts图 -->
            <el-col id="csshes" :span="24" :style="`height: ${vh}px;overflow: hidden;`">
                <Province :areaStatistics="areaStatistics" ref="child1"></Province>
            </el-col>
            <el-col :span="24" :style="`height: ${vh}px;overflow: hidden;`">
                <el-row>
                    <el-col :span="12" id="csshesd">
                        <!-- 电压等级 -->
                        <Grade :voltageStatistics="voltageStatistics" ref="child2"></Grade>
                    </el-col>
                    <el-col :span="12" id="csshesy">
                        <!-- 月份 -->
                        <Relation :monthlyStatistics="monthlyStatistics" :intervald="intervald" ref="child3"></Relation>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Province from './Graphical/Province.vue'
import Grade from './Graphical/Grade.vue'
import Relation from './Graphical/Relation.vue'
import { getAreaData, dictDataCache } from '@/api/Tableabove'
import { dicData } from '@/assets/commjs/dictypeData'
export default {
    props: {
        deptIndex: {
            type: String,
            default: undefined
        },
        item: {
            type: Array,
            default: undefined
        },
        intervald: {
            type: [String, Number],
            default: undefined
        },
        timeFlag: {
            type: [Number, Object, Array, String],
            default: undefined
        }
    },
    components: { Province, Grade, Relation },
    data() {
        return {
            vh: null,
            device: null,
            getHeight: null,
            zoom: undefined, //图表焦点校验
            isLoading: false,
            device: null,
            form: {
                deptIndex: '',
                monitorFlag: 2,
                powerFlag: 2,
                serverName: 'event-boot',
                searchBeginTime: '',
                searchEndTime: '',
                statisticalType: {},
                timeFlag: ''
            },
            areaStatistics: undefined,
            monthlyStatistics: undefined,
            voltageStatistics: undefined
        }
    },
    created() {
        this.form.deptIndex = JSON.parse(window.sessionStorage.getItem('Info')).deptId
        this.getclassificationData()
        // this.Graphical()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        // this.Graphical()
        setTimeout(() => {
            this.Graphical()
        }, 0)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = (window.sessionStorage.getItem('appheight') - 120) / 2
        },
        //获取统计类型
        getclassificationData() {
            // debugger
            var code = 'Statistical_Type'
            this.classificationData = dicData(code, ['Load_Type'])
            this.form.statisticalType = this.classificationData[0]
        },
        Graphical() {
            this.$emit('Loading', true)

            this.form.searchBeginTime = this.item[0]
            this.form.searchEndTime = this.item[1]
            this.form.deptIndex = this.deptIndex
            this.form.timeFlag = this.timeFlag
            getAreaData(this.form).then(res => {
                this.areaStatistics = res.data.areaStatistics.areaCalculation
                this.monthlyStatistics = res.data.monthlyStatistics.monthCalculation
                this.voltageStatistics = res.data.voltageStatistics.voltageLevelCalculation
                this.$nextTick(() => {
                    this.$refs.child1.province()
                    this.$refs.child2.grade()
                    this.$refs.child3.relation()
                })
                this.$emit('Loading', false)
            })
        }
    }
}
</script>

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