<template>
    <ele-card
        :body-style="{ paddingTop: '8px', ...bodyStyle }"
        :flex-table="flexTable"
    >
        <!-- 表格 -->
        <ele-pro-table
            ref="tableRef"
            :row-key="pageConfig.rowKey || 'id'"
            :columns="columns"
            :datasource="finalDatasource"
            :show-overflow-tooltip="true"
            v-model:selections="selections"
            highlight-current-row
            :export-config="{ fileName: pageConfig.fileName }"
            :cache-key="pageConfig.cacheKey"
            border
            v-bind="$attrs"
        >
            <template v-for="(val, key) in slotArray" #[key]="{ row }">
                <slot :name="key" :row="row"></slot>
            </template>
        </ele-pro-table>
    </ele-card>
</template>

<script setup>
    import { ref, getCurrentInstance, useSlots } from 'vue';
    import { ElMessageBox } from 'element-plus/es';
    import { EleMessage } from 'ele-admin-plus/es';
    import { useDictData } from '@/utils/use-dict-data';
    import { download, toFormData, checkDownloadRes } from '@/utils/common';

    const slotArray = useSlots();

    let props = defineProps({
        pageConfig: {
            type: Object,
            default: () => ({
                cacheKey: 'recycleOrderTable',
                fileName: '回收订单查询',
                rowKey: 'id'
            })
        },
        pageUrl: { type: String, default: '' },
        columns: { type: Array, default: () => [] },
        bodyStyle: { type: Object, default: () => ({}) },
        flexTable: { type: Boolean, default: true },
        sortFunction: { type: Function },
        datasource: { type: Function }
    });
    let { proxy } = getCurrentInstance();

    /** 表格实例 */
    const tableRef = ref(null);

    /** 表格选中数据 */
    const selections = ref([]);

    async function queryPage(params) {
        let url = props.pageConfig.pageUrl || props.pageUrl;
        if (!url) {
            return Promise.reject(new Error('请配置页面URL'));
        }
        const res = await proxy.$http.get(url, { params });
        if (res.data.code === 200) {
            return res.data;
        }
        return Promise.reject(new Error(res.data.msg));
    }

    /** 表格数据源 */
    const whereCache = ref({});
    const defaultDatasource = (table) => {
        let { pages, where, orders, sorter } = table;
        let initKeys = props.pageConfig.params || {};
        whereCache.value = where;

        let tempOrders = {};
        console.log('orders', orders);
        if (orders && orders.orderByColumn) {
            tempOrders.orderType = sorter.column.columnKey;
            tempOrders.orderWay = orders.isAsc === 'ascending' ? 'asc' : 'desc';
        }
        // 兼容激活码排序
        if (props.sortFunction) {
            tempOrders = props.sortFunction(orders);
        }

        return queryPage({ ...initKeys, ...where, ...tempOrders, ...pages });
    };

    const finalDatasource = (table) => {
        if (props.datasource) {
            return props.datasource(table);
        }
        return defaultDatasource(table);
    };

    /** 搜索 */
    const reload = (where = {}) => {
        let data =
            where && where.search
                ? { page: 1, where }
                : { where: { ...whereCache.value, ...where } };
        delete data.where?.search;
        delete data.where?.isReset;
        tableRef.value?.reload?.(data);
    };

    /** 批量操作 */
    const operatBatch = ({ method, row, url, title, data = {} }) => {
        const rows = row == null ? selections.value : [row];
        if (!rows.length) {
            EleMessage.error('请至少选择一条数据');
            return;
        }
        title = title || '是否确认当前操作？';
        ElMessageBox.confirm(title, '提示', {
            type: 'warning',
            draggable: true
        })
            .then(() => {
                const loading = EleMessage.loading({
                    message: '请求中..',
                    plain: true
                });
                proxy.$http[method](url, data)
                    .then((res) => {
                        if (res.data.code === 200) {
                            EleMessage.success('操作成功');
                            reload();
                        } else {
                            EleMessage.error(res.data.msg);
                        }
                        loading.close();
                    })
                    .catch((e) => {
                        loading.close();
                        EleMessage.error(e.message);
                    });
            })
            .catch(() => {});
    };

    /// 导出数据
    async function exportPage(params, name, method = 'POST') {
        const res = await proxy.$http({
            url: props.pageConfig.exportUrl,
            method,
            data: toFormData(params),
            responseType: 'blob'
        });
        await checkDownloadRes(res);
        download(
            res.data,
            name ? `${name}_${Date.now()}.xlsx` : `post_${Date.now()}.xlsx`
        );
    }

    //导出数据 进导出记录
    function exportRecord(params, method = 'POST') {
        let data = method === 'POST' ? { data: params } : { params };
        return proxy.$http({
            url: props.pageConfig.exportUrl,
            method,
            ...data
        }); // 导出记录
    }

    /** 导出数据 */
    const exportData = (name, method = 'POST') => {
        const loading = EleMessage.loading({
            message: '请求中..',
            plain: true
        });
        tableRef.value?.fetch?.(({ where, orders }) => {
            let initKeys = props.pageConfig.params || {};
            console.log('where', where);
            console.log('orders', orders);
            console.log('initKeys', initKeys);

            exportRecord({ ...where, ...orders, ...initKeys }, method)
                .then((res) => {
                    if (res.data.code === 200) {
                        EleMessage.success('操作成功,请前往导出记录下载');
                    } else {
                        EleMessage.error(res.data.msg);
                    }
                    loading.close();
                })
                .catch((e) => {
                    loading.close();
                    EleMessage.error(e.message);
                });
        });
    };

    function messageBoxConfirm({ message, fetch }) {
        ElMessageBox.confirm(message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '关闭',
            type: 'warning'
        }).then(() => {
            fetch().then((res) => {
                if (res.data.code === 200) {
                    EleMessage.success('操作成功');
                    reload();
                } else {
                    EleMessage.error(res.data.msg);
                }
            });
        });
    }

    function getSelections() {
        console.log(selections.value, 'selections.value');
        return selections.value;
    }

    function setSelectedRows(rows) {
        selections.value = rows;
        // Also try to toggle if table instance is available and supports it,
        // ensuring visual sync if v-model isn't enough for pre-load
        if (tableRef.value?.toggleRowSelection) {
            rows.forEach((row) => {
                tableRef.value.toggleRowSelection(row, true);
            });
        }
    }

    function clearSelection() {
        selections.value = [];
        tableRef.value?.clearSelection?.();
    }

    defineExpose({
        reload,
        exportData,
        operatBatch,
        getSelections,
        setSelectedRows,
        clearSelection,
        messageBoxConfirm
    });
</script>
