<template>
	<div>
		<el-dialog v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" title="批次出库" width="80%" :close-on-click-modal="false">
			<el-form ref="elForm" :model="formData" size="medium" label-width="100px">
				<el-row type="flex" justify="start" align="top" :gutter="15">
					<el-form-item label="出库单" prop="fkOutOrderId">
						<el-select v-loading="loading1" v-model="formData.fkOutOrderId" clearable :style="{width: '100%'}" filterable remote reserve-keyword placeholder="请选择出库单" :remote-method="handlerOutOrderRemoteMethod">
							<el-option v-for="(item, index) in outOrderOptions" :key="index" :label="item.shipmentNum" :value="item.shipmentNum">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="零件号" prop="partnumber">
						<el-input v-model="formData.partnumber" placeholder="请输入零件号" />
					</el-form-item>
					<el-form-item label="批次号" prop="packageCodeClient">
						<el-select allow-create v-loading="loading2" v-model="formData.packageCodeClient" clearable :style="{width: '100%'}" filterable remote reserve-keyword placeholder="请输入批次号" :remote-method="handlerPackageCodeRemoteMethod" value-key="packageCodeClient" @change="PackageCodeChange">
							<el-option v-for="(item, index) in PackageCodeOptions" :key="index" :label="item.packageCodeClient" :value="item">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label=" ">
						<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
						<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
					</el-form-item>
				</el-row>
			</el-form>
			<!-- 工具区域 -->
			<el-row :gutter="10" class="mb8">
				<el-col :span="1.5">
					<el-button type="primary" plain icon="el-icon-s-unfold" size="mini" @click="handleBatchOut">按输入的批次号将该批次全部出库</el-button>
				</el-col>
			</el-row>
			<el-table :data="dataList" v-loading="loading" ref="table" border highlight-current-row @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="50" align="center" />
				<el-table-column prop="partnumber" label="零件号" align="center" :show-overflow-tooltip="true" />
				<el-table-column prop="description" label="描述" align="center" :show-overflow-tooltip="true" />
				<el-table-column prop="packageCodeClient" label="批次号" align="center" :show-overflow-tooltip="true"  width="300"/>
				<el-table-column prop="locationCode" label="库位编号" align="center" :show-overflow-tooltip="true" />
				<el-table-column prop="goodsNumAction" label="实际库存" align="center" />
				<el-table-column prop="entryWarehouseTime" label="入库时间" align="center" :show-overflow-tooltip="true" />
				<el-table-column prop="remark" label="备注" align="center" :show-overflow-tooltip="true" />
			</el-table>
			<pagination class="mt10" background :total="total" :page.sync="formData.pageNum" :limit.sync="formData.pageSize" @pagination="getList" />
			<div slot="footer">
				<el-button type="info" @click="close">取消</el-button>
				<el-button type="primary" @click="handelConfirm" :disabled="dataList.length===0">按所勾选出库</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import {
		listWmGoodsNowProduction
	} from '@/api/wmsManagement/wmGoodsNowProduction.js'
	import {
		doPatchOutProduction
	} from '@/api/wmsManagement/wmGoodsOutProduction.js'
	import { listWmOutOrder } from '@/api/wmsManagement/wmOutOrder.js'
	export default {
		inheritAttrs: false,
		components: {},
		props: [],
		data() {
			return {
				loading: false,
				formData: {
					fkOutOrderId: "",
					partnumber: "",
					packageCodeClient: "",
					pageNum: 1,
					pageSize: 10,
				},
				// 数据列表
				dataList: [],
				// 总记录数
				total: 0,
				loading1: false,
				outOrderOptions: [],
				loading2: false,
				PackageCodeOptions: [],
				// 多选id
				selectIds: []
			}
		},
		computed: {},
		watch: {},
		created() {},
		mounted() {},
		methods: {
			onOpen() {},
			onClose() {
				this.$refs['elForm'].resetFields()
			},
			close() {
				this.$emit('update:visible', false)
				this.$emit("refresh");
				this.dataList = [];
				this.total = 0;
				this.outOrderOptions = [];
				this.PackageCodeOptions = [];
			},
			// 不关闭弹窗
			endAction(){
				// this.$refs['elForm'].resetFields()
				this.$emit("refresh");
				this.dataList = [];
				this.total = 0;
				this.outOrderOptions = [];
				this.PackageCodeOptions = [];
			},
			handelConfirm() {
				this.$refs['elForm'].validate(valid => {
					if (!valid) return
					this.handleSelectOut();
				})
			},
			// 重置查询操作
			resetQuery() {
				this.resetForm('elForm')
				this.handleQuery()
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.formData.pageNum = 1
				this.getList()
			},
			// 查询数据
			getList() {
				this.loading = true
				listWmGoodsNowProduction(this.formData).then((res) => {
					if (res.code == 200) {
						this.dataList = res.data.result
						this.total = res.data.totalNum
						this.loading = false
					}
				})
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.selectIds = selection.map((item) => item.id)
			},
			// 远程搜索工单号
			handlerOutOrderRemoteMethod(query) {
				if (query !== '') {
					const data = {
						pageNum: 1,
						pageSize: 30,
						shipmentNum: query,
						type: 1,
						status: -1
					}
					this.loading1 = true
					setTimeout(() => {
						this.loading1 = false
					}, 30000)
					listWmOutOrder(data).then((res) => {
						if (res.code == 200) {
							this.outOrderOptions = res.data.result
							this.loading1 = false
						}
					})
				} else {
					this.outOrderOptions = []
				}
			},
			// 远程搜索批次号
			handlerPackageCodeRemoteMethod(query) {
				if (query !== '') {
					const data = {
						pageNum: 1,
						pageSize: 30,
						packageCodeClient: query,
					}
					this.loading2 = true
					setTimeout(() => {
						this.loading2 = false
					}, 30000)
					listWmGoodsNowProduction(data).then((res) => {
						if (res.code == 200) {
							this.PackageCodeOptions = res.data.result
							this.loading2 = false
						}
					})
				} else {
					this.PackageCodeOptions = []
				}
			},
			PackageCodeChange(select) {
				if (select.packageCodeClient) {
					this.formData.packageCodeClient = select.packageCodeClient
				} else {
					this.formData.packageCodeClient = select
				}

			},
			// 按所选出库
			handleSelectOut() {
				const fkOutOrderId = this.formData.fkOutOrderId;
				if (fkOutOrderId === "" || fkOutOrderId === null) {
					this.$confirm("工单号未填写，是否继续？继续则执行无工单号出库！", "操作提醒").then(() => {
						this.doSelectOut();
						this.getList();
					}).catch(() => {
						return;
					})
				} else {
					this.doSelectOut();
				}
			},
			doSelectOut() {
				const fkOutOrderId = this.formData.fkOutOrderId;
				const data = {
					ids: this.selectIds,
					fkOutOrderId,
					type: 1
				}
				doPatchOutProduction(data).then((res) => {
					if (res.code === 200 || res.data === "ok") {
						this.$message.success("批量操作成功！")
						this.endAction();
					} else {
						this.$message.error(res.msg)
					}
				})
			},
			// 全部出库
			handleBatchOut() {
				const packageCodeClient = this.formData.packageCodeClient;
				const fkOutOrderId = this.formData.fkOutOrderId;
				if (packageCodeClient === "" || packageCodeClient === null) {
					this.$message.error("批次号未填写！请填写批次号！");
					return;
				}
				if (fkOutOrderId === "" || fkOutOrderId === null) {
					this.$confirm("工单号未填写，是否继续？继续则执行无工单号出库！", "操作提醒").then(() => {
						this.doBatchOut();
					}).catch(() => {
						return;
					})
				} else {
					this.doBatchOut();
				}
			},
			//全部出库执行
			doBatchOut() {
				const packageCodeClient = this.formData.packageCodeClient;
				const fkOutOrderId = this.formData.fkOutOrderId;
				const data = {
					packageCodeClient,
					fkOutOrderId,
					type: 2
				}
				doPatchOutProduction(data).then((res) => {
					if (res.code === 200 || res.data === "ok") {
						this.$message.success("批量操作成功！")
						this.endAction();
					} else {
						this.$message.error(res.msg)
					}
				})

			}
		}
	}
</script>
<style>
</style>