<template>
    <div style="height: 100%">
        <el-table
            :data="tableData"
            style="width: 100%"
            height="100%"
            ref="tableDom"
            class="adm-multi-table"
            :row-style="{ height: '10px' }"
            border
            v-if="tableData.length > 0"
        >
            <el-table-column prop="date" label="编辑" width="80" align="center" fixed>
                <template slot-scope="scope">
                    <span class="el-icon-edit el-input__icon" style="cursor: pointer" @click="handleEdit(scope.$index, scope.row)"> </span>
                </template>
            </el-table-column>
            <el-table-column v-for="item in headersStage" :key="item.name" :label="item.name" align="center">
                <el-table-column
                    v-for="(child, index) in item.data"
                    :key="index"
                    :label="child.unit ? child.name + ' (' + child.unit + ')': child.name"
                    :prop="child.path"
                    align="center"
                >
                </el-table-column>
            </el-table-column>
        </el-table>
        <div v-else class="center">暂无数据</div>
    </div>
</template>

<script lang="ts">


import { ElTable } from "element-ui/types/table";
import { Component, Emit, Prop, Ref, Vue, Watch } from "vue-property-decorator";
@Component({
    name: "adm-multi-table",
})
export default class extends Vue {
    @Ref("tableDom") readonly tableDom!: ElTable;
    // 表格数据
    @Prop({ default: Array }) tableData?: [];
    // 表头数据
    @Prop({ default: Object }) headersStage?: {};
    // 当前页头文字
    @Prop({ default: "" }) currentHeader?: string;

    @Emit('handleCurrentEdit')
    handleEdit(index, row) {
        return row
    }


    created() {
    }

    @Watch("headersStage", { immediate: true, deep: true })
    onCurrentHeaderChange() {
        this.$nextTick(() => {
            if (this.tableDom?.doLayout)
                this.tableDom.doLayout();
        });
    }
}
</script>

<style lang="scss">
.adm-multi-table {
    .el-table__row {
        td {
            padding: 0;
        }
    }
}

.center {
    display: flex;
    justify-content: center;
    align-content: center;
    margin-top: 200px;
}
</style>

