<template>
    <order-page
        ref="pageRef"
        :pageConfig="pageConfig"
        permissionKey="completed"
        :propColumns="columns"
    >
        <template #toolbar>
            <el-button
                type="success"
                plain
                class="ele-btn-icon"
                :icon="DownloadOutlined"
                v-permission="'recycleOrder:completed:export'"
                @click="exportData"
            >
                导出订单明细
            </el-button>
        </template>
    </order-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import { DownloadOutlined } from '@/components/icons';
    import OrderPage from '@/views/recycleOrder/components/order-page-all.vue';

    defineOptions({ name: 'RecycleOrderCompleted' });

    /** 页面组件实例 */
    const pageRef = ref(null);

    const pageConfig = reactive({
        pageUrl: '/order/orderInfo/done/pageList',
        exportUrl: '/order/orderInfo/done/export',
        fileName: '已完成订单',
        cacheKey: 'recycleOrderCompletedTable'
    });

    //导出数据
    function exportData() {
        pageRef.value?.exportData('已完成订单');
    }

    /** 表格列配置 */
    const columns = ref([
        {
            type: 'selection',
            columnKey: 'selection',
            width: 50,
            align: 'center',
            fixed: 'left'
        },
        {
            label: '单号',
            prop: 'orderNumber',
            slot: 'orderNumber',
            minWidth: 230
        },
        { label: '客户', prop: 'customer', slot: 'customer', minWidth: 360 },
        { label: '金额', prop: 'amount', slot: 'amount', minWidth: 160 },
        {
            label: '状态',
            prop: 'status',
            slot: 'status',
            width: '166'
        },
        { label: '时间', prop: 'time', slot: 'time', minWidth: 210 },
        { label: '备注', prop: 'remarks', slot: 'remarks' },
        { label: '售后', prop: 'refundStatusName' },
        {
            columnKey: 'action',
            label: '操作',
            width: 182,
            align: 'center',
            slot: 'action',
            hideInPrint: true,
            hideInExport: true,
            fixed: 'right'
        }
    ]);
</script>
