<template>
    <el-dialog draggable v-model="dialogVisible" :title="title" width="70%">
        <div style="height: 55vh">
            <vxe-table
                height="auto"
                auto-resize
                :data="tableData"
                v-loading="loading"
                v-bind="defaultAttribute"
                :key="key"
            >
                <div v-if="!voltageLevelFlag">
                    <vxe-column field="name" title="名称" min-width="150"></vxe-column>
                    <vxe-column field="onlineCount" title="在运监测点数" min-width="120">
                        <template #default="scope">
                            {{ scope.row.onlineCount == 3.14159 ? '暂无数据' : scope.row.onlineCount }}
                        </template>
                    </vxe-column>
                    <vxe-column field="overLineCount" min-width="120" title="超标监测点数">
                        <template #default="scope">
                            {{ scope.row.overLineCount == 3.14159 ? '暂无数据' : scope.row.overLineCount }}
                        </template>
                    </vxe-column>
                    <vxe-column field="lineRatio" title="超标测点占比(%)">
                        <template #default="scope">
                            {{ scope.row.lineRatio == 3.14159 ? '暂无数据' : scope.row.lineRatio }}
                        </template>
                    </vxe-column>
                    <vxe-column field="averageOverDay" min-width="120" title="平均超标天数(天/点)">
                        <template #default="scope">
                            {{ scope.row.averageOverDay == 3.14159 ? '暂无数据' : scope.row.averageOverDay }}
                        </template>
                    </vxe-column>
                    <vxe-column field="warningFreq" title="告警频次">
                        <template #default="scope">
                            {{ scope.row.warningFreq == 3.14159 ? '暂无数据' : scope.row.warningFreq }}
                        </template>
                    </vxe-column>
                </div>
                <div v-else>
                    <vxe-column field="name" title="名称" min-width="150"></vxe-column>
                    <vxe-column field="overDays" title="平均超标天数"></vxe-column>
                    <vxe-colgroup title="各指标超标次数">
                        <vxe-column field="overThreeTimes" title="3次">
                            <template #default="scope">
                                {{ scope.row.overThreeTimes == 3.14159 ? '暂无数据' : scope.row.overThreeTimes }}
                            </template>
                        </vxe-column>
                        <vxe-column field="overFiveTimes" title="5次">
                            <template #default="scope">
                                {{ scope.row.overFiveTimes == 3.14159 ? '暂无数据' : scope.row.overFiveTimes }}
                            </template>
                        </vxe-column>
                        <vxe-column field="overSevenTimes" title="7次">
                            <template #default="scope">
                                {{ scope.row.overSevenTimes == 3.14159 ? '暂无数据' : scope.row.overSevenTimes }}
                            </template>
                        </vxe-column>
                        <vxe-column field="overElevenTimes" title="11次">
                            <template #default="scope">
                                {{ scope.row.overElevenTimes == 3.14159 ? '暂无数据' : scope.row.overElevenTimes }}
                            </template>
                        </vxe-column>
                        <vxe-column field="overThirteenTimes" title="13次">
                            <template #default="scope">
                                {{ scope.row.overThirteenTimes == 3.14159 ? '暂无数据' : scope.row.overThirteenTimes }}
                            </template>
                        </vxe-column>
                        <vxe-column field="overTwentyThreeTimes" title="23次">
                            <template #default="scope">
                                {{
                                    scope.row.overTwentyThreeTimes == 3.14159
                                        ? '暂无数据'
                                        : scope.row.overTwentyThreeTimes
                                }}
                            </template>
                        </vxe-column>
                        <vxe-column field="overTwentyFiveTimes" title="25次">
                            <template #default="scope">
                                {{
                                    scope.row.overTwentyFiveTimes == 3.14159
                                        ? '暂无数据'
                                        : scope.row.overTwentyFiveTimes
                                }}
                            </template>
                        </vxe-column>
                        <vxe-column field="otherTimes" title="其他次">
                            <template #default="scope">
                                {{ scope.row.otherTimes == 3.14159 ? '暂无数据' : scope.row.otherTimes }}
                            </template>
                        </vxe-column>
                    </vxe-colgroup>
                </div>
            </vxe-table>
        </div>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { getSubInfoById, getXbLineInfoById } from '@/api/harmonic-boot/area'
const dialogVisible = ref(false)
const loading = ref(false)
const voltageLevelFlag = ref(false)
const tableData = ref([])
const title = ref('')
const key = ref(0)
const statisticalName = ref('')
const open = (row: any, flag: boolean, params: any) => {
    voltageLevelFlag.value = flag
    loading.value = true
    title.value = row.name + '详情'
    statisticalName.value = params.statisticalType.name + '(%)'
    tableData.value = []
    if (flag) {
        getXbLineInfoById({ ...params, deptIndex: row.pid, id: row.id, powerFlag: row.powerFlag })
            .then((res: any) => {
                tableData.value = res.data
                loading.value = false
            })
            .catch(() => {
                loading.value = false
            })
    } else {
        getSubInfoById({ ...params, deptIndex: row.id })
            .then((res: any) => {
                tableData.value = res.data
                loading.value = false
            })
            .catch(() => {
                loading.value = false
            })
    }

    key.value += 1
    dialogVisible.value = true
}
defineExpose({ open })
</script>
<style lang="scss" scoped></style>
