<template>
    <ele-page flex-table>
        <location-order-search @search="reload" />

        <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns">
            <template #toolbar>
                <el-button
                    type="success"
                    plain
                    v-permission="'recycleService:locationOrder:export'"
                    @click="handleExportExcel"
                    :icon="DownloadOutlined"
                >
                    导出
                </el-button>
            </template>
            <template #picture="{ row }">
                <el-image
                    style="width: 80px; height: 100px"
                    fit="cover"
                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                />
            </template>
        </common-table>
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import { DownloadOutlined } from '@/components/icons';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import locationOrderSearch from '@/views/recycleService/locationOrder/components/location-order-search.vue';
    import request from '@/utils/request';

    defineOptions({ name: 'LocationOrderList' });

    /** 表格列配置 */
    const columns = ref([
        { type: 'index', width: 70, label: '序号', align: 'center' },
        { label: '仓库名称', prop: 'godownName', align: 'center' },
        {
            label: '库位编码',
            prop: 'positionCode',
            align: 'center',
            minWidth: 140
        },
        { label: '订单编号', prop: 'orderId', align: 'center' },
        {
            label: '物流编号',
            prop: 'waybillCode',
            align: 'center',
            minWidth: 180
        },
        { label: '数量', prop: 'num', align: 'center', formatter: (row) => 1 },
        { label: '不良数量', prop: 'badNum', align: 'center' },
        {
            label: '验货时间',
            prop: 'auditFinishTime',
            align: 'center',
            minWidth: 120
        }
    ]);

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

    const pageConfig = reactive({
        pageUrl: '/baseinfo/godownposition/postionOrderList',
        exportUrl: '/baseinfo/godownposition/postionOrderExport',
        fileName: '库位订单',
        cacheKey: 'locationOrderTable'
    });

    //刷新表格
    function reload(where) {
        pageRef.value?.reload(where);
    }

    //导出excel
    function handleExportExcel() {
        pageRef.value?.exportData('库位订单');
    }
</script>
