<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-column label="操作" fixed="right">
				<template #default="{ row }">
					<el-button type="primary" link @click="deleteFunc(row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="flex mt-4 justify-end">
			<pagination v-if="pager.lists" v-model="pager" @change="getLists" />
		</div>
	</div>
	<el-dialog v-model="resetWarehouseShow" title="重置数量" width="600">
		<el-form :model="resetWarehouseData" label-width="90px">
			<el-form-item label="商品名称" prop="store_name">
				<el-input v-model="resetWarehouseData.store_name" clearable :readonly="false" disabled />
			</el-form-item>
			<el-form-item label="数量" prop="nums">
				<el-input v-model="resetWarehouseData.nums" clearable :readonly="false" placeholder="请输入数量" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="resetWarehouseShow = false">取消</el-button>
				<el-button type="primary" @click="resetWarehouse"> 确认 </el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup name="subOrder">
	import { usePaging } from '@/hooks/usePaging'
	import { apiBeforehandOrderWarehousingLists } from '@/api/beforehand_order'
	import { apiWarehouseOrderRentryExport } from '@/api/warehouse_order'
	import { apiWarehouseProductSetNums, apiWarehouseProductDelete } from '@/api/warehouse_product'

	const order_id = ref({ id: 0 })
	const warehousing_id = ref(0)
	const resetWarehouseShow = ref(false)

	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不能为空')
		}
	}
	const resetWarehouseData = ref({
		id: '',
		store_name: '',
		nums: ''
	})
	const resetWarehouseClick = (data : any) => {
		resetWarehouseShow.value = true
		resetWarehouseData.value.id = data.id
		resetWarehouseData.value.store_name = data.store_name
		resetWarehouseData.value.nums = data.nums
	}
	
	const deleteFunc = (id) => {
		apiWarehouseProductDelete({id}).then((res) => {
			getLists()
		})
	}
	//重置出库商品数量
	const resetWarehouse = (data : any) => {
		if (resetWarehouseData.value.id <= 0) {
			ElMessage.error('id不能为空')
			return false
		}
		apiWarehouseProductSetNums(resetWarehouseData.value).then((res) => {
			resetWarehouseShow.value = false
			getLists()
		})
	}
	function getList(id, warehousing) {
		order_id.value.id = id
		queryParams.id = id
		getLists()
		warehousing_id.value = warehousing
	}
	defineExpose({
		getList
	})
</script>