<template>
    <ele-page flex-table>
        <stock-out-search @search="reload" />

        <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns">
            <template #toolbar>
                <el-button
                    type="success"
                    plain
                    v-permission="'recycleService:stockOut:export'"
                    @click="handleExportExcel"
                    :icon="DownloadOutlined"
                >
                    导出
                </el-button>
            </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 stockOutSearch from './components/stock-out-search.vue';
    import dayjs from 'dayjs';

    defineOptions({ name: 'StockOutList' });

    /** 表格列配置 */
    const columns = ref([
        {
            type: 'selection',
            columnKey: 'selection',
            width: 50,
            align: 'center',
            fixed: 'left'
        },
        {
            label: '出库单号',
            prop: 'outputCode',
            align: 'center',
            minWidth: 174
        },
        {
            label: '出库时间',
            prop: 'outputTime',
            align: 'center',
            formatter: (row) =>
                dayjs(row.outputTime).format('YYYY-MM-DD HH:mm:ss'),
            width: 160
        },
        {
            label: '员工姓名',
            prop: 'outputName',
            align: 'center',
            width: 120
        },
        { label: '仓库', prop: 'godownName', align: 'center', width: 120 },
        {
            label: '出库库位',
            prop: 'positionCode',
            align: 'center',
            minWidth: 120
        },
        { label: '订单编号', prop: 'orderId', align: 'center', width: 176 },
        { label: '物流单号', prop: 'waybillCode', align: 'center', width: 146 },
        {
            label: '退回物流',
            prop: 'refundWaybillCode',
            align: 'center',
            width: 120
        },
        { label: '不良数量', prop: 'bookNum', align: 'center', width: 100 },
        { label: '数量', prop: 'num', align: 'center', formatter: (row) => 1 },
        {
            label: '验收时间',
            prop: 'checkTime',
            align: 'center',
            formatter: (row) =>
                dayjs(row.checkTime).format('YYYY-MM-DD HH:mm:ss'),
            width: 160
        },
        {
            label: '反馈',
            prop: 'outputRemark',
            align: 'center',
            formatter: (row) => row.outputRemark || '--'
        },
        { label: '员工姓名', prop: 'outputName', align: 'center', width: 120 }
    ]);

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

    const pageConfig = reactive({
        pageUrl: '/baseinfo/godownstock/outputList',
        exportUrl: '/baseinfo/godownstock/exportOutputList',
        fileName: '出库管理',
        cacheKey: 'stockOutTable'
    });

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

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