<template>
    <div>
        <el-button type="primary" @click="xlsx()"> 打印入库单 </el-button>
        <el-table :data="pager.lists" border style="width: 100%; margin-top: 10px">
            <el-table-column prop="id" label="ID" />
            <el-table-column label="供应商" prop="supplier_name" show-overflow-tooltip />
            <el-table-column label="商品图片" prop="image" width="120">
                <template #default="{ row }">
                    <el-image
                        style="width: 50px; height: 50px"
                        :src="row.image"
                        :preview-teleported="true"
                    />
                </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="store_name" show-overflow-tooltip />
            <el-table-column label="单位" prop="unit_name" show-overflow-tooltip />

            <!-- <el-table-column label="采购人员" prop="buyer_name" show-overflow-tooltip width="100" /> -->
            <el-table-column label="入库数量" prop="nums" show-overflow-tooltip />
            <el-table-column label="采购价" prop="purchase" show-overflow-tooltip />
            <el-table-column label="总价" prop="total_price" show-overflow-tooltip />
        </el-table>
        <div class="flex mt-4 justify-end">
            <pagination v-if="pager.lists" v-model="pager" @change="getLists" />
        </div>
    </div>
</template>

<script lang="ts" setup name="subOrder">
import { usePaging } from '@/hooks/usePaging'
import { apiBeforehandOrderWarehousingLists } from '@/api/beforehand_order'
import { apiWarehouseOrderRentryExport } from '@/api/warehouse_order'
const order_id = ref({ id: 0 })
const warehousing_id = ref(0)

const queryParams = reactive({
    id: order_id.value.id
})
// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: apiBeforehandOrderWarehousingLists,
    params: queryParams
})
const xlsx = () => {
    if (warehousing_id.value > 0) {
        apiWarehouseOrderRentryExport({
            id: warehousing_id.value
        }).then((res) => {
            window.open(res.url, '_blank')
            ElMessage.success('导出成功')
        })
    } else {
        ElMessage.error('入库id不能为空')
    }
}
function getList(id, warehousing) {
    order_id.value.id = id
    queryParams.id = id
    getLists()
    warehousing_id.value = warehousing
}
defineExpose({
    getList
})
</script>
