<template>
    <div class="pd10" v-loading="isLoading" element-loading-text="数据加载中">
        <el-row>
            <el-col>
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="全部监测点:">
                        <el-checkbox v-model="checkbox" @change="changeFn"></el-checkbox>
                    </el-form-item>

                    <el-form-item>
                        <Timeinterval :interval="interval" ref="interval"></Timeinterval>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" class="ml10" icon="el-icon-search" @click="researchFn">
                            查询
                        </el-button>
                        <el-button type="primary" class="ml10" icon="el-icon-download" @click="exportFn">
                            导出
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col>
                <el-tabs v-model.trim="activeName" @tab-click="handleClick" type="border-card">
                    <el-tab-pane label="暂态总体概况" name="first" :style="'height:' + vh + ';'">
                        <Generaloverview
                            @Loading="Loading"
                            :item="item"
                            ref="child"
                            v-if="activeName == 'first'"
                        ></Generaloverview>
                    </el-tab-pane>

                    <el-tab-pane label="暂态严重度统计" name="second" :style="'height:' + vh + ';'">
                        <severity @Loading="Loading" :item="item" ref="child1" v-if="activeName == 'second'"></severity>
                    </el-tab-pane>

                    <el-tab-pane label="暂态原因统计" name="third" :style="'height:' + vh + ';'">
                        <Transientcause
                            @Loading="Loading"
                            :item="item"
                            ref="child2"
                            v-if="activeName == 'third'"
                        ></Transientcause>
                    </el-tab-pane>

                    <el-tab-pane label="详细事件列表" name="fourth" :style="'height:' + vh + ';'">
                        <Eventlist
                            @Loading="Loading"
                            :item="item"
                            ref="child3"
                            v-if="activeName == 'fourth'"
                        ></Eventlist>
                    </el-tab-pane>

                    <el-tab-pane label="暂降次数统计" name="fifth" :style="'height:' + vh + ';'">
                        <NumberOfDips
                            @Loading="Loading"
                            :item="item"
                            ref="child4"
                            v-if="activeName == 'fifth'"
                        ></NumberOfDips>
                    </el-tab-pane>

                    <el-tab-pane label="暂升次数统计" name="sixth" :style="'height:' + vh + ';'">
                        <Temporaryrise
                            @Loading="Loading"
                            :item="item"
                            ref="child5"
                            v-if="activeName == 'sixth'"
                        ></Temporaryrise>
                    </el-tab-pane>

                    <el-tab-pane label="短时中断次数统计" name="seventh" :style="'height:' + vh + ';'">
                        <Shortinterruption
                            @Loading="Loading"
                            :item="item"
                            ref="child6"
                            v-if="activeName == 'seventh'"
                        ></Shortinterruption>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>
<script>
// import * as echarts from "echarts";
import Timeinterval from '@/views/components/TimePicker/index4'
import Generaloverview from './components/weekly/Generaloverview'
import Severity from './components/weekly/Severity'
import Transientcause from './components/weekly/Transientcause'
import Eventlist from './components/weekly/Eventlist'
import NumberOfDips from './components/weekly/NumberOfDips'
import Temporaryrise from './components/weekly/Temporaryrise'
import Shortinterruption from './components/weekly/Shortinterruption'
import { getExportData } from '@/api/generaloverview'
import { dicData } from '@/assets/commjs/dictypeData'
export default {
    name: 'weekly',
    components: {
        Timeinterval,
        Generaloverview,
        Severity,
        Transientcause,
        Eventlist,
        NumberOfDips,
        Temporaryrise,
        Shortinterruption
    },
    data() {
        return {
            isLoading: true,
            vh: '',
            zoom: '',
            interval: 3,
            activeName: 'first',
            checkbox: '',
            type: '暂态总体概况',
            item: ['', ''],
            form: {
                deptIndex: '',
                monitorFlag: 2,
                powerFlag: 2,
                serverName: 'event-boot',
                searchBeginTime: '',
                searchEndTime: '',
                statisticalType: {}
            },
            device: ''
        }
    },
    created() {
        this.form.deptIndex = JSON.parse(window.sessionStorage.getItem('Info')).deptId
        this.getclassificationData()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)

        this.item = this.$refs.interval.timeValue

        // console.log(this.$refs.interval.timeValue);
        // console.log(this.item);
    },

    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.device = window.devicePixelRatio
            this.vh = window.sessionStorage.getItem('appheight') - 117 + 'px'
        },

        //获取统计类型
        getclassificationData() {
            // debugger
            var code = 'Statistical_Type'
            this.classificationData = dicData(code, ['Load_Type'])
            this.form.statisticalType = this.classificationData[0]
        },
        //获取当前月第一天日期
        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
        },
        //导出
        exportFn() {
            this.item = this.$refs.interval.timeValue
            this.form.searchBeginTime = this.item[0]
            this.form.searchEndTime = this.item[1]
            this.$message({
                message: '正在导出,请稍等!!!',
                type: 'success'
            })
            getExportData(this.form).then(res => {
                let blob = new Blob([res], {
                    type: 'application/vnd.ms-excel'
                })
                const url = window.URL.createObjectURL(blob)
                const link = document.createElement('a') // 创建a标签
                link.href = url // link.download = "电压暂降事件分析报告"; // 设置下载的文件名
                link.download = '区域报告.xls' // 设置下载的文件名
                document.body.appendChild(link)
                link.click() //执行下载
                document.body.removeChild(link)
            })
        },
        Loading(e) {
            this.isLoading = e
        },
        changeFn() {
            // console.log(this.form.checkbox);
        },

        handleClick(tab, event) {
            // console.log(tab, event);
            this.type = tab.label
            // console.log(this.type);
        },
        researchFn() {
            this.item = this.$refs.interval.timeValue
            this.form.searchBeginTime = this.item[0]
            this.form.searchEndTime = this.item[1]
            setTimeout(() => {
                if (this.type == '暂态总体概况') {
                    if (this.$refs.child.table == true) {
                        this.$refs.child.region()
                        this.$refs.child.voltageLevel()
                    } else if (this.$refs.child.chart == true) {
                        this.$refs.child.childInfo()
                    }
                } else if (this.type == '暂态严重度统计') {
                    this.$refs.child1.severity()
                } else if (this.type == '暂态原因统计') {
                    this.isLoading = true
                    this.$refs.child2.$refs.child.getechart()
                } else if (this.type == '详细事件列表') {
                    this.$refs.child3.eventlist()
                } else if (this.type == '暂降次数统计') {
                    this.$refs.child4.numberOfDips()
                } else if (this.type == '暂升次数统计') {
                    this.$refs.child5.temporaryrise()
                } else if (this.type == '短时中断次数统计') {
                    this.$refs.child6.shortinterruption()
                }
            }, 100)
        }
    }
}
</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 .el-form-item {
    margin-bottom: 5px;
}
</style>
