<template>
    <div class="hc-table-stats-ref-box">
        <el-table :data="tableData" border v-loading="isLoading" :span-method="objectSpanMethod" height="100%">
            <el-table-column class-name="hc-table-stats-column" align="center" width="36" :resizable="false">
                <template #header>
                    <div>分组</div>
                </template>
                <template #default="{row}">
                    <div>{{ row.name }}</div>
                </template>
            </el-table-column>
            <el-table-column label="总案卷（卷）" align="center">
                <template #default="{row}">
                    <div class="num text-orange">{{ row.num1 }}</div>
                </template>
            </el-table-column>
            <el-table-column label="已抽检（卷）" align="center">
                <template #default="{row}">
                    <div class="num text-orange">{{ row.num2 }}</div>
                </template>
            </el-table-column>
            <el-table-column label="抽检率" align="center">
                <template #default="{row}">
                    <div class="num text-green">{{ row.num3 }}</div>
                </template>
            </el-table-column>
            <el-table-column label="总抽检率" align="center">
                <template #default="{row}">
                    <div class="num xl text-blue">{{ row.num4 }}</div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import {ref, onMounted} from "vue";
import {getArrValue} from "js-fast-way"

//参数
const props = defineProps({
    projectId: {
        type: [String,Number],
        default: ''
    },
    contractId: {
        type: [String,Number],
        default: ''
    }
})

//变量
const projectId = ref(props.projectId);
const contractId = ref(props.contractId);

//渲染完成
onMounted(() => {

})

//表格数据
const isLoading = ref(false)
const tableData = ref([
    {name: '业主组', num1: 1786, num2: 210, num3: '12%', num4: '54%'},
    {name: '监理组', num1: 899, num2: 145, num3: '12%', num4: '54%'},
    {name: '施工组', num1: 3123, num2: 432, num3: '12%', num4: '54%'},
    {name: '声像组', num1: 226, num2: 11, num3: '12%', num4: '54%'},
    {name: '竣工图组', num1: 145, num2: 76, num3: '12%', num4: '54%'},
])

//处理合并
const objectSpanMethod = ({rowIndex, columnIndex}) => {
    if (columnIndex === 4) {
        if (rowIndex === 0) {
            return {
                rowspan: 5,
                colspan: 1
            }
        } else {
            return {
                rowspan: 0,
                colspan: 0
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.hc-table-stats-ref-box .num {
    font-style: italic;
    font-size: 16px;
    font-weight: bold;
    &.xl {
        font-size: 18px;
    }
}
</style>

<style lang="scss">
.hc-table-stats-ref-box {
    position: relative;
    height: 100%;
    .el-table {
        width: 100%;
        --el-table-bg-color: #F1F5F8;
        --el-table-header-bg-color: #DAE8F3;
        --el-table-header-text-color: #50545E;
        --el-table-tr-bg-color: #F1F5F8;
        --el-fill-color-lighter: #E7EEF4;
        --el-table-text-color: #666666;
        --el-table-row-hover-bg-color: initial;
        --el-table-border-color: #dbdbdb;
        .hc-table-stats-column {
            background-color: var(--el-table-header-bg-color);
            color: var(--el-table-header-text-color);
            --el-table-row-hover-bg-color: var(--el-table-header-bg-color);
            font-weight: 500;
        }
        .el-table__body-wrapper .el-scrollbar__view {
            height: 100%;
        }
        .el-table__body-wrapper .el-table__body {
            height: 100%;
        }
    }
}
</style>
