<template>
    <div>
        <!-- <el-button  v-show="true"
      type="primary"
      class="ml10"
      icon="el-icon-s-grid"
      @click="tableFn"
      >表格</el-button
    > 
    <el-button  v-show="true"
      type="primary"
      class="ml10"
      icon="el-icon-s-data"
      @click="chartFn"
      >图表</el-button
    > -->
        <el-row>
            <el-col :span="24">
                <el-radio-group v-model="radio4" style="right: 10px; top: 10px" size="mini">
                    <el-radio-button class="el-icon-s-grid" label="表格"></el-radio-button>
                    <el-radio-button class="el-icon-s-data" label="图表"></el-radio-button>
                </el-radio-group>
            </el-col>
        </el-row>

        <el-row :gutter="10" class="mt10" v-if="table">
            <el-col :span="12">
                <el-table
                    stripe
                    :data="regionData"
                    :height="height"
                    border
                    style="width: 100%"
                    header-cell-class-name="table_header"
                    highlight-current-row
                >
                    <el-table-column label="暂态统计(按区域统计)">
                        <el-table-column prop="name" label="区域"></el-table-column>
                        <el-table-column label="监测点数量">
                            <el-table-column prop="onLine" sortable label="在线"></el-table-column>
                            <el-table-column prop="offLine" sortable label="离线"></el-table-column>
                        </el-table-column>
                        <el-table-column prop="sagsCount" label="暂降次数" sortable></el-table-column>
                        <el-table-column prop="breakCount" label="中断次数" sortable></el-table-column>
                        <el-table-column prop="upCount" sortable label="暂升次数"></el-table-column>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="12">
                <el-table
                    stripe
                    :data="voltageLevelData"
                    :height="height"
                    border
                    style="width: 100%"
                    header-cell-class-name="table_header"
                    highlight-current-row
                >
                    <el-table-column label="暂态统计(按电压等级统计)">
                        <el-table-column prop="name" label="电压等级"></el-table-column>
                        <el-table-column label="监测点数量">
                            <el-table-column prop="onLine" sortable label="在线"></el-table-column>
                            <el-table-column prop="offLine" sortable label="离线"></el-table-column>
                        </el-table-column>
                        <el-table-column prop="sagsCount" sortable label="暂降次数"></el-table-column>
                        <el-table-column prop="breakCount" label="中断次数" sortable></el-table-column>
                        <el-table-column prop="upCount" sortable label="暂升次数"></el-table-column>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <div>
            <el-row :gutter="10" v-if="chart">
                <el-col :span="12" :style="`height: ${vh}px;overflow: hidden;`">
                    <echarts1 ref="child" :item="item"></echarts1>
                </el-col>
                <el-col :span="12" :style="`height: ${vh}px;overflow: hidden;`">
                    <echarts2 ref="child1" :item="item"></echarts2>
                </el-col>
            </el-row>
            <el-row :gutter="10" class="mt10" v-if="chart">
                <el-col :span="12" :style="`height: ${vh}px;overflow: hidden;`">
                    <echarts3 ref="child2" :item="item"></echarts3>
                </el-col>
                <el-col :span="12" :style="`height: ${vh}px;overflow: hidden;`">
                    <echarts4 ref="child3" :item="item"></echarts4>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { getRegionData, getVoltageLevelData } from '@/api/generaloverview'
import { getGeneralSituationData, getVoltageData } from '@/api/generaloverview'
import { dicData } from '@/assets/commjs/dictypeData'
import echarts1 from './Echart/echarts1.vue'
import echarts2 from './Echart/echarts2.vue'
import echarts3 from './Echart/echarts3.vue'
import echarts4 from './Echart/echarts4.vue'
export default {
    props: {
        item: {
            type: Array,
            default: undefined
        }
    },
    watch: {
        radio4(val) {
            if (val === '表格') {
                this.tableFn()
            } else {
                this.chartFn()
            }
        }
    },
    components: { echarts1, echarts2, echarts3, echarts4 },
    data() {
        return {
            radio4: '表格',
            vh: 0,
            height: null,
            isLoading: false,
            isLoading1: false,
            regionData: [],
            voltageLevelData: [],
            table: true,
            chart: false,
            form: {
                deptIndex: '5699e5916a18a6381e1ac92da5bd2628',
                monitorFlag: 2,
                powerFlag: 2,
                serverName: 'event-boot',
                searchBeginTime: this.getCurrentMonthFirst(),
                searchEndTime: this.getNowFormatDate(),
                statisticalType: {}
            },
            form1: {
                deptIndex: '5699e5916a18a6381e1ac92da5bd2628',
                monitorFlag: 2,
                powerFlag: 2,
                serverName: 'event-boot',
                searchBeginTime: this.getCurrentMonthFirst(),
                searchEndTime: this.getNowFormatDate(),
                statisticalType: {}
            }
        }
    },
    created() {},
    mounted() {
        this.form.deptIndex = JSON.parse(window.sessionStorage.getItem('Info')).deptId
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.getclassificationData()
        this.getclassificationData1()
        this.$nextTick(() => {
            this.region()
            this.voltageLevel()
        })
        // console.log(this.item);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.height = window.sessionStorage.getItem('appheight') - 165
            this.vh = (window.sessionStorage.getItem('appheight') - 160) / 2
        },
        //方法调用暂态统计(按区域统计)数据接口
        // region() {
        //   this.isLoading = true;
        //   //监测覆盖率报表
        //   getRegionData().then((res) => {
        //     this.isLoading = false;
        //     this.regionData = res.data;
        //   });
        // },
        childInfo() {
            this.$emit('Loading', true)

            this.$refs.child.getechart1()
            this.$refs.child1.getechart2()
            this.$refs.child2.getechart3()
            this.$refs.child3.getechart4()
            setTimeout(() => {
                this.$emit('Loading', false)
            }, 1500)
        },
        //获取统计类型
        getclassificationData() {
            // debugger
            var code = 'Statistical_Type'
            this.classificationData = dicData(code, ['Load_Type'])
            this.form.statisticalType = this.classificationData[0]
        },
        getclassificationData1() {
            // debugger
            var code = 'Statistical_Type'
            this.classificationData = dicData(code, ['Load_Type'])
            this.form1.statisticalType = this.classificationData[1]

            // console.log(this.form1.statisticalType,'=================');
        },
        //获取当前月第一天日期
        getCurrentMonthFirst() {
            var date = new Date()
            var year = date.getFullYear()
            date.setDate(1)
            var month = parseInt(date.getMonth() + 1)
            var day = date.getDate()
            if (month < 10) {
                month = '0' + month
            }
            if (day < 10) {
                day = '0' + day
            }
            return year + '-' + month + '-' + day
        },
        //获取当天日期
        getNowFormatDate() {
            var date = new Date()
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var day = date.getDate()
            if (month < 10) {
                month = '0' + month
            }
            if (day < 10) {
                day = '0' + day
            }
            return year + '-' + month + '-' + day
        },
        async region() {
            this.$emit('Loading', true)
            this.form.searchBeginTime = this.item[0]
            this.form.searchEndTime = this.item[1]
            await getGeneralSituationData(this.form).then(res => {
                // console.log(res);

                this.regionData = res.data
            })
            this.$emit('Loading', false)
        },
        async voltageLevel() {
            this.$emit('Loading', true)
            this.form1.searchBeginTime = this.item[0]
            this.form1.searchEndTime = this.item[1]
            await getVoltageData(this.form1).then(res => {
                this.voltageLevelData = res.data
            })
            this.$emit('Loading', false)
        },
        //方法调用暂态统计(按电压等级统计)数据接口
        // voltageLevel() {
        //   this.isLoading1 = true;
        //   //监测覆盖率报表
        //   getVoltageLevelData().then((res) => {
        //     this.isLoading1 = false;
        //     this.voltageLevelData = res.data;
        //   });
        // },

        //表格显示
        tableFn() {
            this.$emit('Loading', true)
            this.table = true
            this.chart = false
            setTimeout(() => {
                this.$emit('Loading', false)
            }, 1000)
        },
        //图标显示
        chartFn() {
            this.$emit('Loading', true)
            this.table = false
            this.chart = true
            setTimeout(() => {
                this.$emit('Loading', false)
            }, 1000)
        }
    }
}
</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;
}
// ::v-deep .table_header {
//   height: 35px !important;
// }
</style>
