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

        <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns">
            <template #toolbar>
                <el-button
                    type="success"
                    plain
                    v-permission="'recycleService:stockIn:export'"
                    @click="handleExportExcel"
                    :icon="DownloadOutlined"
                >
                    导出
                </el-button>
            </template>

            <template #action="{ row }">
                <el-button
                    type="primary"
                    link
                    @click="handleDetail(row)"
                    v-permission="'recycleService:stockIn:detail'"
                >
                    详情
                </el-button>
            </template>
        </common-table>

        <stock-in-detail ref="detailRef" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import { DownloadOutlined } from '@/components/icons';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import stockInSearch from './components/stock-in-search.vue';
    import stockInDetail from './components/stock-in-detail.vue';
    import dayjs from 'dayjs';

    defineOptions({ name: 'StockInList' });

    /** 表格列配置 */
    const columns = ref([
        {
            type: 'selection',
            columnKey: 'selection',
            width: 50,
            align: 'center',
            fixed: 'left'
        },
        {
            label: '入库单号',
            prop: 'inputCode',
            align: 'center',
            minWidth: 174
        },
        {
            label: '入库时间',
            prop: 'inputTime',
            align: 'center',
            formatter: (row) =>
                dayjs(row.inputTime).format('YYYY-MM-DD HH:mm:ss'),
            width: 160
        },
        { label: '仓库', prop: 'godownName', align: 'center', width: 120 },
        {
            label: '入库库位',
            prop: 'positionCode',
            align: 'center',
            minWidth: 120
        },
        { label: '订单数量', prop: 'orderNum', align: 'center', width: 100 },
        { label: '反馈', prop: 'inputRemark', align: 'center', minWidth: 200 },
        { label: '员工姓名', prop: 'inputName', align: 'center', width: 120 },
        {
            columnKey: 'action',
            label: '操作',
            width: 120,
            align: 'center',
            slot: 'action'
        }
    ]);

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

    const pageConfig = reactive({
        pageUrl: '/baseinfo/godownstock/inputList',
        exportUrl: '/baseinfo/godownstock/exportInputList',
        fileName: '入库管理',
        cacheKey: 'stockInTable'
    });

    /** 详情组件实例 */
    const detailRef = ref(null);

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

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

    // 查看详情
    function handleDetail(row) {
        detailRef.value?.open(row);
    }
</script>
