<template>
	<div>
		<el-card class="!border-none mb-4" shadow="never">
			<el-form class="mb-[-16px]" :model="queryParams" inline>
				<el-form-item label="订单号" prop="order_sn">
					<el-input class="w-[280px]" v-model="queryParams.order_sn" @keydown.enter="resetPage" clearable
						placeholder="请输入订单号" />
				</el-form-item>
				<el-form-item label="商品名称" prop="product_name">
					<el-input class="w-[280px]" v-model="queryParams.product_name" @keydown.enter="resetPage" clearable
						placeholder="请输入商品名称" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="resetPage">查询</el-button>
					<el-button @click="resetParams">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="!border-none" v-loading="pager.loading" shadow="never">
			<div class="mt-4">
				<el-table :data="pager.lists">
					<el-table-column label="ID" prop="id" show-overflow-tooltip />
					<el-table-column label="订单号" prop="order_sn" show-overflow-tooltip />
					<el-table-column label="商品ID" prop="product_id" show-overflow-tooltip />
					<el-table-column label="商品信息" prop="product_info" min-width="150" show-overflow-tooltip>
						<template #default="{ row }">
							<div class="flex items-center mb-2">
								<el-image class="w-[30px] h-[30px] mr-2 flex-shrink-0" :src="row.image" fit="cover"
									:preview-src-list="[row.image]" :preview-teleported="true" />
								<p class="truncate text-[12px]">{{ row.store_name }}</p>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="总金额" prop="total_price" show-overflow-tooltip />
					<el-table-column label="采购人员" prop="buyer_name" show-overflow-tooltip />
					<el-table-column label="创建时间" prop="create_time" show-overflow-tooltip />
					<el-table-column label="操作" width="120" fixed="right">
						<template #default="{ row }">
							<el-button type="primary" link @click="storeroomClick(row)">分拣入库</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="flex mt-4 justify-end">
				<pagination v-model="pager" @change="getLists" />
			</div>
		</el-card>
	</div>
	<el-dialog v-model="storeroomShow" title="分拣设置" width="600">
		<el-form ref="formRef" :model="storeroom" label-width="90px">
			<el-form-item label="仓库">
				<el-select v-model="storeroom.warehouse_id" placeholder="请选择仓库" size="large" style="width: 240px">
					<el-option v-for="item in warehouse_list" :label="item.name" :value="item.id" :key="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="采购数量" prop="buyer_nums">
				<el-input v-model="storeroom.buyer_nums" readonly />
			</el-form-item>
			<el-form-item label="分拣数量" prop="warehouse_num">
				<el-input v-model="storeroom.warehouse_num" clearable placeholder="请输入分拣数量" />
			</el-form-item>
			<el-form-item label="备注" prop="mark">
				<el-input v-model="storeroom.mark" clearable placeholder="请输入备注" :readonly="false" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="storeroomShow = false">取消</el-button>
				<el-button type="primary" @click="putInStorage" :disabled="disableClick"> 确认 </el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup name="store_order_transshipment">
	import { usePaging } from '@/hooks/usePaging'
	import { apiPurchaseProductOfferLists } from '@/api/purchase_product_offer'
	import { apiBeforehandOrderCartInfoPutInStorage } from '@/api/beforehand_order_cart_info'
	import { apiWarehouseLists } from '@/api/warehouse'
	import feedback from '@/utils/feedback'

	const warehouse_list = ref([])
	const disableClick = ref(false)
	const storeroomShow = ref(false)
	const storeroom = ref({
		id: '',
		bhoid: '',
		product_id: '',
		buyer_nums: '',
		warehouse_num: '',
		warehouse_id: '',
		mark: ''
	})
	const storeroomClick = (data : any) => {
		storeroom.value.id = data.id
		storeroom.value.bhoid = data.order_id
		storeroom.value.product_id = data.product_id
		storeroom.value.buyer_nums = data.buyer_nums
		storeroom.value.warehouse_num = ''
		storeroomShow.value = true
		apiWarehouseLists({}).then((res) => {
			warehouse_list.value = res.lists
		})
	}

	const putInStorage = () => {
		try {
			apiBeforehandOrderCartInfoPutInStorage(storeroom.value).then((res => {
				storeroomShow.value = false
				disableClick.value = false
				getLists()
			}))
		} catch (error) {
			setTimeout(() => {
				disableClick.value = false
			}, 2000)
		}
	}

	// 查询条件
	const queryParams = reactive({
		order_sort_list: 1,
		order_sn: '',
		product_name: ''
	})

	// 分页相关
	const { pager, getLists, resetParams, resetPage } = usePaging({
		fetchFun: apiPurchaseProductOfferLists,
		params: queryParams
	})

	getLists()
</script>