<template>
    <ele-card
        :body-style="{ paddingTop: '8px', ...bodyStyle }"
        :flex-table="flexTable"
    >
        <!-- 表格 -->
        <ele-pro-table
            ref="tableRef"
            :row-key="pageConfig.rowKey || 'id'"
            :columns="columns"
            :datasource="datasource"
            :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: '/system/post/list' },
        columns: { type: Array, default: () => [] },
        bodyStyle: { type: Object, default: () => ({}) },
        flexTable: { type: Boolean, default: true }
    });
    let { proxy } = getCurrentInstance();

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

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

    async function queryPage(params) {
        let url = props.pageConfig.pageUrl || props.pageUrl;
        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 datasource = (table) => {
        let { pages, where, orders, sorter } = table;
        let initKeys = props.pageConfig.params || {};

        let tempOrders = {};
        if (orders && orders.orderByColumn) {
            tempOrders.orderType = sorter.column.columnKey;
            tempOrders.orderWay = orders.isAsc === 'ascending' ? 'asc' : 'desc';
        }

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

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

    /** 批量操作 */
    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') {
        return proxy.$http({
            url: props.pageConfig.exportUrl,
            method,
            data: params
        }); // 导出记录
    }

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

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