<template>
    <div v-if="tableData.length != 0">
        <!-- div设计table -->
        <div class="table" v-for="(item, index) in columnsData" :key="index">
            <!-- 单层表头 -->
            <div class="thead">
                <div class="thead_top">
                    {{ item[0].showName ? item[0].showName : '' }}({{ item[0].unit }})
                </div>
                <div class="thead_bot">
                    <div class="thead_bot_cell" v-for="(vv, key) in item" :key="key">
                        {{ vv.phase + '相 ' }}
                    </div>
                </div>
            </div>
            <!-- 有合并表头的数据 -->
            <div class="tbody">
                <div class="tbody_cell" v-for="(vv, key) in item" :key="key">
                    {{
                        tableData.find(item => {
                            return item.anotherName == vv.showName && item.phase == vv.phase
                        })?.statisticalData
                            ? tableData.find(item => {
                                  return item.anotherName == vv.showName && item.phase == vv.phase
                              })?.statisticalData
                            : '/'
                    }}
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, nextTick, onMounted } from 'vue'
import { getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery'
const loading = ref(false)
const tableData: any = ref([])
loading.value = true
const columnsData: any = ref([])
const getColumns = () => {
    getRealTimeTableList().then(res => {
        columnsData.value = res.data
    })
}
nextTick(() => {})
onMounted(() => {
    getColumns()
    loading.value = false
})
const getTableData = (list: any) => {
    tableData.value = list
    loading.value = false
    columnsData.value.map((item: any) => {
        item.map((vv: any) => {
            vv.statisticalData = list.find((kk: any) => {
                return kk.anotherName == vv.showName && kk.phase == vv.phase
            })?.statisticalData
        })
    })
}
defineExpose({ getTableData })
</script>

<style lang="scss" scoped>
// ::v-deep .vxe-table--empty-content{
// display: none !important;
// }
.table {
    width: 100%;
    height: 120px;
    border: 1px solid #eee;
    border-bottom: 2px solid #eee;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    .thead {
        width: 100%;
        height: auto;
        background: #f4f6f9;
        text-align: center;
        display: flex;
        flex-direction: column;
        .thead_top {
            width: 100%;
            height: 40px;
            line-height: 40px;
            border: 1px solid #eee;
            color: #111;
            font-size: 14px;
            font-weight: 800;
        }
        .thead_bot {
            width: 100%;
            height: 40px;
            line-height: 40px;
            display: flex;
            color: #111;
            font-size: 14px;
            font-weight: 800;
            .thead_bot_cell {
                flex: 1;
                border: 1px solid #eee;
            }
        }
    }
    .tbody {
        flex: 1;
        display: flex;
        text-align: center;
        .tbody_cell {
            flex: 1;
            text-align: center;
            line-height: 40px;
            border: 1px solid #eee;
            border-bottom: 0;
        }
    }
    .tbody:hover {
        background: #f4f6f9;
    }
}
</style>
