<template>
    <Table ref="table" resizable :class="className" v-bind="$attrs">
        <template v-for="value in columnDatas" :key="value.key">
            <TableColumn
                :title="value.name"
                :sortable="value.sortable"
                :width="value.width"
                :group="value.group"
                :multiple="value.multiple"
                :min-width="value.minWidth"
                :fixed="value.fixed"
                :class-name="value.className"
                :ignore="value.ignore"
                :align="value.align"
            >
                <template v-if="value.tooltip" #title>
                    <span :title="value.name">{{ value.name }}</span>
                    <Tooltip :content="value.tooltip">
                        <i
                            class="ion-ios-help-outline m-l-5 m-r-5"
                            style="vertical-align: text-bottom;"
                        ></i>
                    </Tooltip>
                </template>
                <template #template="[data, index]">
                    <slot :name="value.key" v-bind="data" :item="data" :index="index"></slot>
                    <template v-if="!$slots[value.key]">
                        {{ data[value.key] }}{{ value.suffix }}
                    </template>
                </template>
            </TableColumn>
        </template>
        <template v-if="$slots['empty']" v-slot:empty>
            <slot name="empty"></slot>
        </template>
    </Table>
</template>
<script setup>
import { onMounted, ref, } from 'vue';
import {Table, TableColumn,Tooltip} from '@king-design/vue';
import  lodash from 'lodash-es';

const props = defineProps({
    columns: {
        type: Object,
        default: () => ({}) 
    },
});
const columnDatas = ref([]);

const getColumnDatas = () => {
    const keys = Object.keys(props.columns);
    const datas = keys.map(key => ({ key, ...props.columns[key] }));
    return datas.filter(({ show }) => show);
}

onMounted(() => {
    columnDatas.value = getColumnDatas()
});
</script>

<style scoped lang="less">
.app-table {
    &-edit {
        margin-right: 10px;
    }
    &-paginBox {
        display: flex;
        justify-content: flex-end;
        margin: 20px 0px;
    }
    &-total {
        flex: 1;    
    }
     &-pagin {
        text-align: right;
        flex: 2;
        margin-left: auto;
    }
}
</style>
