<template>
    <div>
        <el-form :inline="true" class="formFlex">
            <el-form-item label="统计时间">
                <DatePicker ref="datePickerRef"></DatePicker>
            </el-form-item>
            <el-form-item class="mr5">
                <el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
                <el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出</el-button>
            </el-form-item>
        </el-form>

        <div v-loading="loading" style="display: flex; overflow: hidden" :style="{ height: height }">
            <vxe-table style="flex: 1" v-bind="defaultAttribute" height="100%" :data="region">
                <vxe-table-colgroup title="暂态统计(按区域统计)">
                    <vxe-table-column field="name" title="区域"></vxe-table-column>
                    <vxe-table-colgroup title="监测点数量">
                        <vxe-table-column field="onLine" title="在线"></vxe-table-column>
                        <vxe-table-column field="offLine" title="离线"></vxe-table-column>
                    </vxe-table-colgroup>
                    <vxe-table-column field="sagsCount" title="暂降次数"></vxe-table-column>
                    <vxe-table-column field="breakCount" title="中断次数"></vxe-table-column>
                    <vxe-table-column field="upCount" title="暂升次数"></vxe-table-column>
                </vxe-table-colgroup>
            </vxe-table>
            <vxe-table style="flex: 1" class="ml10" v-bind="defaultAttribute" height="100%" :data="voltage">
                <vxe-table-colgroup title="暂态统计(按电压等级统计)">
                    <vxe-table-column field="name" title="电压等级"></vxe-table-column>
                    <vxe-table-colgroup title="监测点数量">
                        <vxe-table-column field="onLine" title="在线"></vxe-table-column>
                        <vxe-table-column field="offLine" title="离线"></vxe-table-column>
                    </vxe-table-colgroup>
                    <vxe-table-column field="sagsCount" title="暂降次数"></vxe-table-column>
                    <vxe-table-column field="breakCount" title="中断次数"></vxe-table-column>
                    <vxe-table-column field="upCount" title="暂升次数"></vxe-table-column>
                </vxe-table-colgroup>
            </vxe-table>
        </div>
    </div>
</template>
<script setup lang="ts">
import { useDictData } from '@/stores/dictData'
import DatePicker from '@/components/form/datePicker/index.vue'
import { ElMessage } from 'element-plus'
import { ref, reactive, onMounted } from 'vue'
import { getVoltage, getGeneralSituation, getExport } from '@/api/event-boot/report'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { mainHeight } from '@/utils/layout'
const dictData = useDictData()
const datePickerRef = ref()
const loading = ref(true)
const formData = reactive({
    deptIndex: dictData.state.area[0].id,
    monitorFlag: 2,
    powerFlag: 2,
    searchBeginTime: '',
    searchEndTime: '',
    serverName: 'event-boot'
})
const height = mainHeight(145).height
const region = ref([])
const voltage = ref([])
const init = () => {
    loading.value = true
    formData.searchBeginTime = datePickerRef.value.timeValue[0]
    formData.searchEndTime = datePickerRef.value.timeValue[1]

    Promise.all([
        getGeneralSituation({
            ...formData,
            statisticalType: dictData.getBasicData('Statistical_Type', [
                'Report_Type',
                'Manufacturer',

                'Voltage_Level',
                'Load_Type'
            ])[0]
        }),
        getVoltage({
            ...formData,
            statisticalType: dictData.getBasicData('Statistical_Type', [
                'Report_Type',
                'Power_Network',
                'Manufacturer',
                'Load_Type'
            ])[0]
        })
    ]).then(res => {
        loading.value = false
        region.value = res[0].data
        voltage.value = res[1].data
    })
}
const exportEvent = () => {
    ElMessage({
        message: '正在导出中'
    })
    getExport({
        ...formData,

        statisticalType: dictData.getBasicData('Statistical_Type', [
            'Report_Type',
            'Manufacturer',

            'Voltage_Level',
            'Load_Type'
        ])[0]
    }).then(res => {
        const link = document.createElement('a')
        let blob = new Blob([res], {
            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
        })
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        link.setAttribute('download', '暂态总体概况.xlsx') // 文件名可自定义
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        ElMessage({
            message: '导出成功',
            type: 'success'
        })
    })
}
onMounted(() => {
    init()
})
</script>
<style lang="scss" scoped>
.formFlex {
    display: flex;
    justify-content: space-between;
}
</style>
