<!--
 * @Author: zwq
 * @Date: 2021-11-18 14:16:25
 * @LastEditors: zwq
 * @LastEditTime: 2025-08-14 09:33:21
 * @Description:
-->
<template>
	<div>
		<el-form
			:model="dataForm"
			:rules="dataRule"
			ref="dataForm"
			@keyup.enter.native="dataFormSubmit()"
			label-width="100px">
			<el-row :gutter="15">
				<el-col :span="12">
					<el-form-item label="出库单号" prop="deliveryCode">
						<el-input
							v-model="dataForm.deliveryCode"
							clearable
							placeholder="请输入出库单号" />
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="dataForm.deliveryType !== 3">
					<el-form-item label="货物名称" prop="productName">
						<el-select
							v-model="dataForm.productName"
							filterable
							style="display: inline-block; width: 100%"
							@change="setShowTrayType"
							placeholder="请选择货物名称"
							remote
							:remote-method="remoteMethod"
							value-key="id"
							:loading="loading">
							<el-option
								v-for="item in productArr"
								:key="item.id"
								:label="item.goodSpecificationName"
								:value="item.goodSpecificationName"></el-option>
						</el-select>
						<div style="display: inline-block; margin-left: 10px">
							<el-tag size="mini" type="warning">
								<i class="el-icon-question" />
								出空托盘请选择无产品
							</el-tag>
						</div>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="出库类型" prop="deliveryType">
						<el-radio-group
							v-model="dataForm.deliveryType"
							@input="setNeedTrayNumber">
							<el-radio :label="1">单托盘出库(空托盘)</el-radio>
							<el-radio :label="2">多托盘出库(自动包装线)</el-radio>
							<el-radio :label="3">点对点出库(工单出库)</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<div v-if="dataForm.deliveryType !== 3" style="">
					<el-col :span="12">
						<el-form-item label="所需托盘数" prop="needTrayNumber">
							<el-input-number
								style="width: 100%"
								v-model="dataForm.needTrayNumber"
								:min="dataForm.deliveryType === 2 ? 2 : 1"
								:disabled="dataForm.deliveryType === 1" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="已补托盘数" prop="alreadyOutNumber">
							<el-input-number
								style="width: 100%"
								v-model="dataForm.alreadyOutNumber"
								disabled />
						</el-form-item>
					</el-col>
					<el-col :span="12" v-if="dataForm.deliveryType === 1">
						<el-form-item
							label="发货位置"
							prop="lineEdgeLibraryCode"
							key="lineEdgeLibraryCode">
							<el-select
								v-model="dataForm.lineEdgeLibraryCode"
								filterable
								style="width: 100%"
								placeholder="请选择">
								<el-option
									v-for="item in potArr"
									:key="item.id"
									:label="item.lineEdgeLibraryCode"
									:value="item.lineEdgeLibraryCode"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12" v-if="dataForm.deliveryType === 2">
						<el-form-item label="发货区域" prop="region" key="region">
							<el-select
								style="width: 100%"
								v-model="dataForm.region"
								placeholder="请选择">
								<el-option
									v-for="item in regionArr"
									:key="item.id"
									:label="item.name"
									:value="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12" v-if="!showTrayType">
						<el-form-item
							label="货物品质"
							prop="productQuality"
							key="productQuality">
							<el-input
								v-model="dataForm.productQuality"
								clearable
								placeholder="请输入货物品质" />
						</el-form-item>
					</el-col>
					<el-col
						:span="12"
						v-if="dataForm.deliveryType === 1 && !showTrayType">
						<el-form-item label="膜卷号" prop="rollCode" key="rollCode">
							<el-input
								v-model="dataForm.rollCode"
								clearable
								placeholder="请输入膜卷号" />
						</el-form-item>
					</el-col>
					<el-col :span="12" v-if="showTrayType">
						<el-form-item label="托盘类型" key="trayType" prop="trayType">
							<el-select
								style="width: 100%"
								v-model="dataForm.trayType"
								placeholder="请选择">
								<el-option
									v-for="item in trayTypeArr"
									:key="item.id"
									:label="item.name"
									:value="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="产出工单" prop="workOrder">
							<el-input
								v-model="dataForm.workOrder"
								clearable
								placeholder="请输入工单" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="工序" prop="process">
							<el-input
								v-model="dataForm.process"
								clearable
								placeholder="请输入工序" />
						</el-form-item>
					</el-col>
				</div>
				<el-col :span="12">
					<el-form-item label="部门" prop="department">
						<el-input
							v-model="dataForm.department"
							clearable
							placeholder="请输入部门" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="申请人" prop="applicant">
						<el-input
							v-model="dataForm.applicant"
							clearable
							placeholder="请输入申请人" />
					</el-form-item>
				</el-col>
				<div v-if="dataForm.deliveryType === 3">
					<el-table
						:data="tableData"
						:header-cell-style="{
							background: '#F2F4F9',
							color: '#606266',
						}"
						border
						empty-text="暂无数据"
						style="width: 100%"
						ref="dataList">
						<el-table-column
							type="index"
							fixed="left"
							label="#"
							align="center" />
						<el-table-column prop="lineEdgeLibraryCode" label="目的码头">
							<template slot-scope="scope">
								<el-select
									v-model="scope.row.lineEdgeLibraryCode"
									filterable
									@change="(val) => setEdgeInfo(val, scope.$index)"
									style="width: 100%"
									placeholder="请选择">
									<el-option
										v-for="item in potArr"
										:key="item.id"
										:label="item.lineEdgeLibraryCode"
										:value="item.lineEdgeLibraryCode"></el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column prop="agvGroundCode" label="码头编码" width="80" />
						<el-table-column prop="region" label="区域名称" width="150">
							<template slot-scope="scope">
								<span>
									{{
										scope.row.region ? regionArr.filter(item=>{return item.id===scope.row.region})[0].name: ''
									}}
								</span>
							</template>
						</el-table-column>
						<el-table-column prop="trayCode" label="托盘编码">
							<template slot-scope="scope">
								<el-input v-model="scope.row.trayCode" readonly>
									<el-button
										slot="append"
										icon="el-icon-search"
										@click="showTray(scope.$index)" />
								</el-input>
							</template>
						</el-table-column>
						<el-table-column prop="productName" label="物料名称" />
						<el-table-column prop="productCode" label="物料编码" width="120" />
						<el-table-column prop="productQuality" label="货物品质" />
						<el-table-column prop="process" label="工序" />
						<el-table-column prop="earlyTime" label="最早时间">
							<template slot-scope="scope">
								<span>
									{{ scope.row.earlyTime?scope.row.earlyTime == 0 ? '是' : '否':'' }}
								</span>
							</template>
						</el-table-column>
						<el-table-column fixed="right" label="操作" width="50">
							<template slot-scope="scope">
								<el-button
									size="mini"
									type="text"
									@click="handleClick(scope.$index)">
									<span
										class="iconfont icon-delete delete-color"
										style="color: #f56c6c"></span>
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<!-- 表格底部加号 -->
					<el-button class="addButton" icon="el-icon-plus" @click="addNew">
						新增
					</el-button>
				</div>
			</el-row>
		</el-form>
		<el-dialog
			width="80%"
			title="选择库存托盘"
			:visible.sync="innerVisible"
			append-to-body>
			<el-form
				:model="listQuery"
				ref="queryForm"
				size="small"
				:inline="true"
				:rules="listQueryRules"
				label-width="68px">
				<el-form-item label="托盘编码" prop="trayCode">
					<el-input
						v-model="listQuery.trayCode"
						@input="$forceUpdate()"
						placeholder="请输入托盘编码"
						clearable />
				</el-form-item>
				<el-form-item label="工序" prop="process">
					<el-input
						v-model="listQuery.process"
						@input="$forceUpdate()"
						placeholder="请输入工序"
						clearable />
				</el-form-item>
				<el-form-item label="膜卷号" prop="rollCode">
					<el-input
						v-model="listQuery.rollCode"
						@input="$forceUpdate()"
						placeholder="请输入膜卷号"
						clearable />
				</el-form-item>
				<el-form-item label="产品名" prop="productName">
					<el-input
						v-model="listQuery.productName"
						@input="$forceUpdate()"
						placeholder="请输入产品名"
						clearable />
				</el-form-item>
				<el-form-item label="初判等级" prop="cpGrade">
					<el-input
						v-model="listQuery.cpGrade"
						@input="$forceUpdate()"
						placeholder="请输入初判等级"
						clearable />
				</el-form-item>
				<el-form-item label="复判等级" prop="fpGrade">
					<el-input
						v-model="listQuery.fpGrade"
						@input="$forceUpdate()"
						placeholder="请输入复判等级"
						clearable />
				</el-form-item>
				<el-form-item label="数量" prop="planQty">
					<el-input v-model="listQuery.planQty" clearable placeholder="请输入数量" />
				</el-form-item>
				<el-form-item label="当日工单" prop="todayOrder">
					<el-input
						v-model="listQuery.todayOrder"
						@input="$forceUpdate()"
						placeholder="当日工单"
						clearable />
				</el-form-item>
				<el-form-item label="入库时间" prop="createTime">
					<el-date-picker
						v-model="listQuery.createTime"
						style="width: 240px"
						value-format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						:default-time="['00:00:00', '23:59:59']" />
				</el-form-item>
				<el-form-item label="完成日期" prop="finishTime">
					<el-date-picker
						v-model="listQuery.finishTime"
						style="width: 240px"
						value-format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						:default-time="['00:00:00', '23:59:59']" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="handleQuery">
						搜索
					</el-button>
				</el-form-item>
			</el-form>
			<el-table
				:data="gridData"
				border
				v-loading="loadingGrid"
				element-loading-text="拼命加载中"
				element-loading-spinner="el-icon-loading"
				element-loading-background="rgba(0, 0, 0, 0.8)">
				<el-table-column type="index" fixed="left" label="#" align="center" />
				<el-table-column label="" width="40">
					<template slot-scope="scope">
						<i
							class="el-icon-plus"
							@click="setTray(scope.row)"
							style="color: #409eff; cursor: pointer; font-weight: bolder" />
					</template>
				</el-table-column>
				<el-table-column property="trayCode" label="托盘编码" width="80" />
				<el-table-column property="productCode" label="物料编码" width="120" />
				<el-table-column property="description" label="物料名称" />
				<el-table-column property="planQty" label="数量" width="80" />
				<el-table-column property="grade" label="货物品质" width="80" />
				<el-table-column property="cpGrade" label="初判等级" width="80" />
				<el-table-column property="fpGrade" label="复判等级" width="80" />
				<el-table-column property="inventory" label="膜卷号" width="160" />
				<el-table-column property="process" label="工序" width="80" />
				<el-table-column property="createTime" label="入库时间" width="160">
					<template v-slot="scope">
						<span>{{ parseTime(scope.row.createTime) }}</span>
					</template>
				</el-table-column>
				<el-table-column property="finishTime" label="完成日期" width="160">
					<template v-slot="scope">
						<span>{{ parseTime(scope.row.finishTime) }}</span>
					</template>
				</el-table-column>
			</el-table>
			<pagination
				:limit.sync="listQuery.pageSize"
				:page.sync="listQuery.pageNo"
				:total="listQuery.total"
				@pagination="getGridList" />
		</el-dialog>
	</div>
</template>

<script>
import basicAdd from '../mixins/basic-add';
import {
	createDelivery,
	updateDelivery,
	getDelivery,
	getCode,
	createDeliveryList,
  checkGoods
} from '@/api/oth/delivery';
import { getPage } from '@/api/oth/rollMessage';
import { getLineList } from '@/api/asrs/warehouseStorehouse';
import { getGoodSpecificationPage } from '@/api/asrs/goodSpecification';

const regionArr = [
	{ name: '其他', id: 7 },
	{ name: '一次分切5线', id: 24 },
	{ name: '一次分切6线', id: 25 },
	{ name: '一次分切7线', id: 26 },
	{ name: '一次分切8线', id: 27 },
	{ name: '涂覆区域', id: 29 },
	{ name: '二次分切', id: 28 },
	{ name: '自动包装区', id: 21 },
	{ name: '手动包装区', id: 23 },
	{ name: '一次分拣区', id: 22 },
	{ name: '二次分拣区', id: 20 },
];
export default {
	mixins: [basicAdd],
	data() {
		return {
			urlOptions: {
				isGetCode: true,
				codeURL: getCode,
				codeName: 'deliveryCode',
				createURL: createDelivery,
				updateURL: updateDelivery,
				infoURL: getDelivery,
				getOption: true,
			},
			dataForm: {
				id: undefined,
				deliveryCode: undefined,
				productName: undefined,
				deliveryType: 1,
				needTrayNumber: 1,
				alreadyOutNumber: 0,
				status: 2,
				lineEdgeLibraryCode: null,
				productQuality: null,
				rollCode: null,
				trayType: null,
				workOrder: null,
				department: null,
				applicant: null,
				process: null,
			},
			listQuery: {
				warehouseId: '1698950657556340737',
				trayCode: null,
				process: null,
				rollCode: null,
				productName: null,
				cpGrade: null,
				fpGrade: null,
				todayOrder: null,
				todayOrder: null,
				pageSize: 10,
				pageNo: 1,
				total: 1,
			},
			listQueryRules: {
				planQty: [
					{ pattern: /^\d+$/, message: '请输入有效的数字', trigger: 'blur' },
				],
			},
			tableData: [{}],
			regionArr,
			potArr: [],
			productArr: [],
			gridData: [],
			innerVisible: false,
			loadingGrid: false,
			showTrayType: false,
			trayIndex: null,
			trayTypeArr: [
				{ id: 1, name: '6臂' },
				{ id: 2, name: '12臂' },
			],
			loading: false,
			dataRule: {
				deliveryCode: [
					{ required: true, message: '出库单号不能为空', trigger: 'blur' },
				],
				productQuality: [
					{ required: true, message: '货物品质不能为空', trigger: 'blur' },
				],
				lineEdgeLibraryCode: [
					{ required: true, message: '发货位置不能为空', trigger: 'change' },
				],
				productName: [
					{ required: true, message: '货物名称不能为空', trigger: 'change' },
				],
				region: [
					{ required: true, message: '发货区域不能为空', trigger: 'change' },
				],
				trayType: [
					{ required: true, message: '托盘类型不能为空', trigger: 'change' },
				],
				department: [
					{ required: true, message: '部门不能为空', trigger: 'blur' },
				],
				applicant: [
					{ required: true, message: '申请人不能为空', trigger: 'blur' },
				],
			},
		};
	},
	methods: {
		getArr() {
			this.showTrayType = false;
			this.dataForm.rollCode = null;
			this.dataForm.trayType = null;
			getLineList({ warehouseId: this.bId }).then((response) => {
				this.potArr = response.data;
			});
		},
		remoteMethod(query) {
			if (query !== '') {
				this.loading = true;
				const params = {
					pageSize: 100,
					pageNo: 1,
					goodSpecificationName: query,
					// warehouseId: this.warehouseId,
				};
				getGoodSpecificationPage(params).then((response) => {
					this.loading = false;
					this.productArr = response.data.list;
				});
			} else {
				this.productArr = [];
			}
		},
		setEdgeInfo(val, index) {
			const info = this.potArr.find((item) => item.lineEdgeLibraryCode === val);
			this.tableData[index].agvGroundCode = info.agvGroundCode;
			this.tableData[index].region = info.region;
		},
		setNeedTrayNumber(val) {
			if (val === 1) {
				this.dataForm.needTrayNumber = 1;
				this.dataForm.region = null;
				if (this.dataForm.productName !== '无产品') {
					this.showTrayType = false;
				} else {
					this.showTrayType = true;
				}
			} else if (val === 2) {
				this.dataForm.needTrayNumber = 2;
				this.dataForm.lineEdgeLibraryCode = null;
				this.showTrayType = true;
			} else if (val === 3) {
				this.tableData = [{}];
			}
		},
		setShowTrayType(val) {
			if (val === '无产品') {
				this.showTrayType = true;
			} else {
				this.showTrayType = false;
			}
		},
		showTray(index) {
			this.trayIndex = index;
			this.innerVisible = true;
			this.listQuery = {
				warehouseId: '1698950657556340737',
				pageSize: 10,
				pageNo: 1,
				total: 1,
			};
			this.getGridList();
		},
		getGridList() {
			this.loadingGrid = true;
			getPage(this.listQuery).then((response) => {
				this.loadingGrid = false;
				this.gridData = response.data.list;
				this.listQuery.total = response.data.total;
			});
		},
		setTray(val) {
			const params = {
				containerCode: val.containerCode,
				warehouseId: this.bId,
			};
			checkGoods(params).then((res) => {
				if (res == 0) {
					this.innerVisible = false;
					this.$set(this.tableData[this.trayIndex], 'trayCode', val.trayCode);
					this.$set(
						this.tableData[this.trayIndex],
						'productName',
						val.description
					);
					this.$set(
						this.tableData[this.trayIndex],
						'productCode',
						val.productCode
					);
					this.$set(
						this.tableData[this.trayIndex],
						'productQuality',
						val.grade
					);
					this.$set(this.tableData[this.trayIndex], 'process', val.process);
					this.$set(this.tableData[this.trayIndex], 'earlyTime', 0);
				} else {
					this.$confirm('该货物不是完成日期最早货物，是否选择出库?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					})
						.then(() => {
							this.innerVisible = false;
							this.$set(
								this.tableData[this.trayIndex],
								'trayCode',
								val.trayCode
							);
							this.$set(
								this.tableData[this.trayIndex],
								'productName',
								val.description
							);
							this.$set(
								this.tableData[this.trayIndex],
								'productCode',
								val.productCode
							);
							this.$set(
								this.tableData[this.trayIndex],
								'productQuality',
								val.grade
							);
							this.$set(this.tableData[this.trayIndex], 'process', val.process);
							this.$set(this.tableData[this.trayIndex], 'earlyTime', 1);
						})
						.catch(() => {
							return;
						});
				}
			});
		},
		//dialog查询
		handleQuery() {
			this.listQuery.pageNo = 1;
			this.listQuery.pageSize = 10;
			this.listQuery.trayCode = this.listQuery.trayCode || null;
			this.listQuery.process = this.listQuery.process || null;
			this.listQuery.rollCode = this.listQuery.rollCode || null;
			this.listQuery.productName = this.listQuery.productName || null;
			this.listQuery.cpGrade = this.listQuery.cpGrade || null;
			this.listQuery.fpGrade = this.listQuery.fpGrade || null;
			this.listQuery.todayOrder = this.listQuery.todayOrder || null;
			this.listQuery.planQty = this.listQuery.planQty || null;
			this.listQuery.startTime = this.listQuery.createTime
				? this.listQuery.createTime[0]
				: null;
			this.listQuery.endTime = this.listQuery.createTime
				? this.listQuery.createTime[1]
				: null;
			this.listQuery.startfinshTime = this.listQuery.finishTime
				? this.listQuery.finishTime[0]
				: null;
			this.listQuery.endfinshTime = this.listQuery.finishTime
				? this.listQuery.finishTime[1]
				: null;
			this.getGridList();
		},
		// 每页数
		sizeChangeHandle(val) {
			this.listQuery.pageSize = val;
			this.listQuery.pageNo = 1;
			this.getGridList();
		},
		// 当前页
		currentChangeHandle(val) {
			this.listQuery.pageNo = val;
			this.getGridList();
		},
		addNew() {
			const obj = {};
			this.tableData.push(obj);
		},
		handleClick(index) {
			this.tableData.splice(index, 1);
		},
		// 表单提交
		dataFormSubmit() {
			this.$refs['dataForm'].validate((valid) => {
				if (!valid) {
					return false;
				}
				// 点对点
				if (this.dataForm.deliveryType === 3) {
					let cancel = false;
					this.tableData.forEach((item) => {
						item.deliveryCode = this.dataForm.deliveryCode;
						item.department = this.dataForm.department;
						item.applicant = this.dataForm.applicant;
						item.warehouseId = this.bId;
						item.deliveryType = 3;
						item.needTrayNumber = 1;
						if (!item.lineEdgeLibraryCode || !item.trayCode) {
							cancel = true;
							this.$modal.msgWarning('目的码头或托盘编码不能为空!');
						}
					});
					if (cancel) return;
					createDeliveryList(this.tableData).then((response) => {
						if (response.data === -1) {
							this.$modal.msgWarning('排、列、层不能重复');
						} else if (response.data === 0) {
							this.$modal.msgWarning('名称或编码不能重复');
						} else {
							this.$modal.msgSuccess('新增成功');
							this.visible = false;
							this.$emit('refreshDataList');
						}
					});
					return;
				}
				// 添加的提交
        this.dataForm.warehouseId = '1698950657556340737'
				this.urlOptions.createURL(this.dataForm).then((response) => {
					if (response.data === -1) {
						this.$modal.msgWarning('排、列、层不能重复');
					} else if (response.data === 0) {
						this.$modal.msgWarning('名称或编码不能重复');
					} else {
						this.$modal.msgSuccess('新增成功');
						this.visible = false;
						this.$emit('refreshDataList');
					}
				});
			});
		},
	},
};
</script>
<style scoped>
.addButton {
	width: 100%;
	height: 35px;
	border-top: none;
	color: #0b58ff;
	border-color: #ebeef5;
	border-radius: 0;
}
.addButton:hover {
	color: #0b58ff;
	border-color: #ebeef5;
	background-color: #fff;
}
.addButton:focus {
	border-color: #ebeef5;
	background-color: #fff;
}
</style>
