<!-- 编辑弹窗 -->
<template>
    <ele-pro-table
        ref="tableRef"
        :row-key="rowId"
        :columns="columns"
        :datasource="datasource"
        highlight-current-row
        :pagination="false"
        :tools="false"
        v-bind="$attrs"
    >
        <template v-for="(val, key) in slotArray" #[key]="{ row }">
            <slot :name="key" :row="row"></slot>
        </template>
    </ele-pro-table>
</template>

<script setup>
    import { ref, reactive, nextTick, useSlots } from 'vue';
    import request from '@/utils/request';
    import { pagePosts } from '@/api/system/post';

    const slotArray = useSlots();
    const props = defineProps({
        columns: {
            type: Array,
            default() {
                return [];
            }
        },
        rowId: {
            type: String,
            default: 'id'
        },
        pageUrl: {
            type: String
        },
        otherParams: {
            // 额外参数
            type: Object,
            default() {
                return {};
            }
        },
        fetchPage: {
            type: Function
        },
        formaterData: {
            type: Function,
            default(data) {
                return data;
            }
        }
    });

    const tableRef = ref(null);

    async function queryPage(params) {
        const res = await props.fetchPage(params);
        if (res.data.code === 200) {
            return props.formaterData(res.data);
        }
        return Promise.reject(new Error(res.data.msg));
    }

    /** 表格数据源 */
    const datasource = ({ pages, where, orders }) => {
        return queryPage({
            ...where,
            ...orders,
            ...pages,
            ...props.otherParams
        });
    };

    /** 搜索 */
    const reload = (where) => {
        tableRef.value?.reload?.({ page: 1, where });
    };

    defineExpose({
        reload
    });
</script>
