<template>
    <div>
        <span style="font-size: 14px; font-weight: bold">
            <!-- 统计区域: 中国 &ensp; 统计时间: 2023-12-01-2023-12-27 &ensp; 统计次数: {{ frequency + '次' }} -->
        </span>
        <el-tabs tab-position="left" class="demo-tabs" style="margin-top: 10px">
            <el-tab-pane label="区域">
                <div class="default-main">
                    <vxe-table :data="areaData" v-bind="defaultAttribute" height="auto" auto-resize>
                        <vxe-column
                            v-for="item in tableHeaderAera"
                            :field="item.prop"
                            :title="item.label"
                            :min-width="item.width"
                            :sortable="item.sortable"
                            :formatter="formatter"
                        ></vxe-column>
                    </vxe-table>
                </div>
            </el-tab-pane>
            <el-tab-pane label="电压等级">
                <div class="default-main">
                    <vxe-table :data="levelData" v-bind="defaultAttribute" height="auto" auto-resize>
                        <vxe-column
                            v-for="item in tableHeaderLevel"
                            :field="item.prop"
                            :title="item.label"
                            :min-width="item.width"
                            :sortable="item.sortable"
                        ></vxe-column>
                    </vxe-table>
                </div>
            </el-tab-pane>
            <el-tab-pane label="月份">
                <div class="default-main">
                    <vxe-table :data="shareData" v-bind="defaultAttribute" height="auto" auto-resize>
                        <vxe-column field="month" title="月份" min-width="120px" sortable></vxe-column>
                        <vxe-column field="notAssociated" title="电压暂降次数" sortable></vxe-column>
                    </vxe-table>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, defineExpose, computed } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { mainHeight } from '@/utils/layout'

const areaData:any = ref([])
const levelData:any = ref([])
const shareData:any = ref([])

const tableHeaderAera = ref<any[]>([
    { prop: 'areaName', label: '区域名称', width: '120px' },
    { prop: 'monitoringPoints', label: '监测点数', sortable: true },
    { prop: 'frequency', label: '电压暂降次数', sortable: true },
    { prop: 'sarfi9', label: 'SARFI-90', sortable: true }
])
const tableHeaderLevel = ref<any[]>([
    { prop: 'voltageLevel', label: '电压等级(kV)', width: '150px' },
    { prop: 'monitoringPoints', label: '监测点数' },
    { prop: 'frequency', label: '电压暂降次数' }
])

const frequency = ref<number>(875)

const info = (list: any) => {
    frequency.value = list.areaStatistics.frequencySum
    areaData.value = [
        {
            areaName: '总计',
            monitoringPoints: list.areaStatistics.monitoringPointSum,
            frequency: list.areaStatistics.frequencySum,
            sarfi9: '/'
        },
        ...list.areaStatistics.areaCalculation
    ]

    levelData.value = [
        {
            voltageLevel: '总计',
            monitoringPoints: list.voltageStatistics.monitoringPointSum,
            frequency: list.voltageStatistics.frequencySum
        },
        ...list.voltageStatistics.voltageLevelCalculation
    ]
    let all = 0
    list.monthlyStatistics.monthCalculation.forEach((item: any) => {
        all += item.linked + item.notAssociated
    })
    shareData.value = [
        {
            month: '总计',
            notAssociated: all.toFixed(2)
        },
        ...list.monthlyStatistics.monthCalculation
    ]
}
const formatter = (row: any) => {
    if (row.column.field == 'areaName') {
        return (row.cellValue = row.cellValue.replace('\n', ''))
    } else {
        return row.cellValue
    }
}
defineExpose({ info })
const layout = mainHeight(185) as any
const defaultMain = mainHeight(195) as any
</script>
<style lang="scss" scoped>
::v-deep(.el-tabs--left, ) {
    height: v-bind('layout.height');
}
.default-main {
    height: v-bind('defaultMain.height');
}
</style>
