<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"
                    :formatter="formatContent"
                    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?: any;
    // 当前页头文字
    @Prop({ default: "" }) currentHeader?: string;

    @Emit("handleCurrentEdit")
    handleEdit(index: number, row: any) {
        return row;
    }

    get haderInfoMap() {
        if (this.headersStage?.dictStages?.data?.length) {
            const haderInfoMap: any = {};
            this.headersStage.dictStages.data.forEach((item: any) => {
                haderInfoMap[item.path] = item;
            });
            console.log(haderInfoMap);
            return haderInfoMap;
        } else {
            return {};
        }
    }

    /**
     * 表格特殊内容格式化处理
     */
    private formatContent(row: any, column: any, cellValue: any) {
        const info = this.haderInfoMap[column.property];
        if (info && cellValue) { //有值且获取到表头信息
            const dataSource = info?.dataSource ? info.dataSource : [];
            if (info.dataType === "ENUM" || info.dataType === "BOOLEAN") { //内容为单选枚举和布尔类型 
                const text = dataSource.find((item: any) => {
                    return item.code === cellValue;
                })?.name;
                return text;
            } else if (info.dataType === "MENUM" && cellValue instanceof Array && cellValue.length) { //内容为多选枚举且值为数组
                const textList = dataSource.map((item: any) => {
                    if (
                        cellValue.find((value: string) => {
                            return item?.code === value;
                        })
                    ) {
                        return item?.name;
                    }
                }).filter((item: any) => item).join(",");
                return textList;
            } else {
                return cellValue;
            }
        }
        return cellValue;
    }

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

    @Watch("tableData", { immediate: true, deep: true })
    handleTableData(o: any, n: any) {
        this.$nextTick(() => {
            console.log(o, n);
            // this.tableData = this.tableData
        });
    }
}
</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>

