<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="区域">
                <el-table :data="areaData" border height="calc(100vh - 220px)" stripe style="width: 100%">
                    <template v-for="item in tableHeaderAera">
                        <el-table-column
                            align="center"
                            :prop="item.prop"
                            :label="item.label"
                            :min-width="item.width"
                            :sortable="item.sortable"
                        ></el-table-column>
                    </template>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="电压等级">
                <el-table :data="levelData" border height="calc(100vh - 220px)" stripe style="width: 100%">
                    <template v-for="item in tableHeaderLevel">
                        <el-table-column
                            align="center"
                            :prop="item.prop"
                            :label="item.label"
                            :min-width="item.width"
                            :sortable="item.sortable"
                        ></el-table-column>
                    </template>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="月份">
                <el-table :data="shareData" border height="calc(100vh - 220px)" stripe style="width: 100%">
                    <el-table-column
                        prop="month"
                        label="月份"
                        align="center"
                        min-width="120px"
                        sortable
                    ></el-table-column>
                    <el-table-column prop="notAssociated" align="center" label="电压暂降次数" sortable>
                        <!-- <template slot-scope="scope">
                            <span v-if="scope.row.month != '总计'">
                                {{ scope.row.linked + scope.row.notAssociated }}
                            </span>
                            <span v-else>{{ scope.row.notAssociated }}</span>
                        </template> -->
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, defineExpose } from 'vue'
const tableData = ref<any[]>([])
const areaData = ref<any[]>([])
const levelData = ref<any[]>([])
const shareData = ref<any[]>([])
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
        },
        ...list.monthlyStatistics.monthCalculation
    ]
}
defineExpose({ info })
</script>
<style lang="scss" scoped>
::v-deep(.el-tabs--left) {
    height: calc(100vh - 220px);
}
</style>
