<template>
	<view style="margin: 10rpx;">
		<u-navbar back-text="返回" title="成品入库" :background="background"></u-navbar>
		<u-form ref="testForm">
			<u-form-item :border-bottom="false">
				<label>扫描货位:</label>&nbsp;&nbsp;&nbsp;&nbsp;
				<u-input :border="true" placeholder="请扫描货位条码" :focus="focusBarCode" v-model="LocationName"
					@confirm="getLocationName" />
			</u-form-item>
			<u-form-item :border-bottom="false">
				<label>选择仓库:</label>&nbsp;&nbsp;&nbsp;&nbsp;
				<uni-data-select v-model="ERPLOCATION" :localdata="items" @change="change"></uni-data-select>
				<label>选择库位:</label>&nbsp;&nbsp;&nbsp;&nbsp;
				<uni-data-select v-model="LOCATIONNAME" :localdata="items_Location" @change="change2"></uni-data-select>
			</u-form-item>
			<br />
			<u-row align="left">
				<u-col span="2"><label>组织：</label> </u-col>
				<u-col span="2"><label>{{ERPFACTORY}}</label> </u-col>
				<u-col span="2"><label>仓库：</label> </u-col>
				<u-col span="2"><label>{{ERPLOCATION}}</label> </u-col>
				<u-col span="2"><label>货位：</label> </u-col>
				<u-col span="2"><label>{{LOCATIONNAME}}</label> </u-col>
			</u-row>
			<br />
			<u-form-item :border-bottom="false">
				<p>扫描条码:</p>
				<u-input :border="true" v-model="MATERIALPACKINGNAME" placeholder="请扫描条码" :focus="focusBarCode"
					@confirm="ScanFGBarCode" />
			</u-form-item>
			<br />
			<u-row>
				<u-col span="3"><label>入库单：</label> </u-col>
				<u-col span="9"><label>{{RECEIVEACTNO}}</label> </u-col>
			</u-row>
			<br />
			<u-row>
				<u-col span="3"><label style="text-align: right;">料号：</label> </u-col>
				<u-col span="9"><label>{{MATERIALSPECNAME}}</label> </u-col>
			</u-row>
			<br />
			<u-row>
				<u-col span="3"><label style="text-align: right;">品名：</label> </u-col>
				<u-col span="9"><label>{{DESC_CN}}</label> </u-col>
			</u-row>
			<br />
			<u-row>
				<u-col span="3"><label style="text-align: right;">规格：</label> </u-col>
				<u-col span="9"><label>{{SPECNAME}}</label> </u-col>
			</u-row>
			<br />
			<u-row>
				<u-col span="3"><label style="text-align: right;">阶段：</label> </u-col>
				<u-col span="9"><label>{{PHASE}}</label> </u-col>
			</u-row>
			<br />
			<u-row>
				<u-col span="3"><label style="text-align: right;">批次：</label> </u-col>
				<u-col span="9"><label>{{CHARGE}}</label> </u-col>
			</u-row>
		</u-form>
		<br />
		<uni-table ref="BoxList" border stripe type="false">
			<uni-tr>
				<uni-th align="center">标签</uni-th>
				<uni-th align="center">批次</uni-th>
				<uni-th align="center">品名</uni-th>
				<uni-th align="center">料号</uni-th>
				<uni-th align="center">规格</uni-th>
				<uni-th align="center">阶段</uni-th>
				<uni-th align="center">数量</uni-th>
				<uni-th align="center">组织</uni-th>
				<uni-th align="center">仓库</uni-th>
				<uni-th align="center">货位</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in BoxListInfo" :key="index">
				<!-- :style="getStyle(index)"-->
				<!--:style="{ backgroundColor: item.color === 0 ? 'white' : 'blue' }" -->
				<uni-td align="center">{{ item.MATERIALPACKINGNAME}}</uni-td>
				<uni-td align="center">{{ item.CHARGE}}</uni-td>
				<uni-td align="center">{{ item.DESC_CN}}</uni-td>
				<uni-td align="center">{{ item.MATERIALSPECNAME }}</uni-td>
				<uni-td align="center">{{ item.SPECNAME }}</uni-td>
				<uni-td align="center">{{ item.PHASE }}</uni-td>
				<uni-td align="center">{{ item.MATERIALQUANTITY }}</uni-td>
				<uni-td align="center">{{ item.ERPFACTORY }}</uni-td>
				<uni-td align="center">{{ item.ERPLOCATION }}</uni-td>
				<uni-td align="center">{{ item.LOCATIONNAME }}</uni-td>
			</uni-tr>
		</uni-table>
		<u-button @click="FGStockIn" type="primary" :loading="loading">确定</u-button>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				LocationName: '', //库位信息
				LOCATIONNAME: '',
				ERPFACTORY: '', //组织
				ERPLOCATION: '', //库位
				tabH: 800, //表格的宽度
				MATERIALSPECNAME: '',
				MATERIALPACKINGNAME: '', //条码
				CHARGE: '', //批次
				DESC_CN: '', //品名
				SPECNAME: '', //规格
				RECEIVEACTNO: '', //入库单号
				UNIT: '', //单位
				PHASE: '', //阶段
				QTY: '', //数量
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				}, //返回按钮的样式
				colors: ['#007aff', '#4cd964', '#dd524d'],
				styleType: 'button',
				current: 0,
				BoxListInfo: [], //后端传回来的绑定表格的数据
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'text',
				loading: false,
				scanData: [], //已扫描箱
				barCode: "", //条码
				DURABLENAMECode: "", //卷芯
				focusBarCode: false, //焦点是否被选中
				focusShipRequest: true, //默认焦点在单号
				siteName: "",
				userId: "",
				items: [],
				items_Location:[],
			}
		},

		mounted() {
			this.tabH = this.$GetRemainingHeight(4, 0); //定义表格的高度
			let that = this
			uni.getStorage({
				key: "sitename",
				success(res) {
					that.siteName = res.data
				}
			})
			uni.getStorage({
				key: "userid",
				success(res) {
					that.userId = res.data
				}
			})
			this.getERPLocation();
		},

		methods: {
			change(e) {
				this.ERPLOCATION = e;
				this.getLocationName();
			},
			//获取焦点的公共方法
			getfocus(nextfocus) {
				this.initfocus()
				this[nextfocus]
				this.$nextTick(() => { //vue是数据全部修改后才进行的视图更新，哪nextTick函数就是为了拿到最新的数据，还不懂的可以去百度
					this[nextfocus] = true
				})
			},
			getERPLocation() {
				this.items=[];
				this.$MyRequest('/api/storage/getERPLocation', {
					ERPFACTORYNAME: '101'
				}).then(res => {
					if (res.data.success) {
						for (let i = 0; i < res.data.resultObj.length; i++) {
							var _Arr = res.data.resultObj[i];
							this.items.push({
								text: _Arr.DESCRIPTION,
								value: _Arr.ERPLOCATIONNAME
							});
						}
					} else {
						this.$showMessage(res.data.message)
					}
				});
			},
			getLocationName() {
				this.items_Location=[]
				if (this.ERPLOCATION != '') {
					this.$MyRequest('/api/storage/getLocationNameForERPLocation', {
						ERPLocation: this.ERPLOCATION
					}).then(res => {
						if (res.data.success) {
							for (let i = 0; i < res.data.resultObj.length; i++) {
								var _Arr = res.data.resultObj[i];
								this.items_Location.push({
									text: _Arr.DESCRIPTION,
									value: _Arr.STORAGENAME
								});
								
							}
						} else {
							this.$showMessage(res.data.message)
						}
						this.focusBarCode = true
						this.focusShipRequest = false
					}).catch(err => {
						this.$showMessage(err)
					});
				}else{
					this.$showMessage("请先选择仓库")
				}

			},

			async ScanFGBarCode() {
				this.focusBarCode = false
				if (this.BoxListInfo.some(box => box.MATERIALPACKINGNAME === this.MATERIALPACKINGNAME)) {
					this.$showMessage("改标签已扫描，请不要重复扫描！");
					this.focusBarCode = true
					return;
				}
				
				await this.$MyRequest('/FGStockIn/getBarCode', {
					MATERIALPACKINGNAME: this.MATERIALPACKINGNAME
				}).then(res => {
					if (res.data.success) {
						var _Arr = res.data.resultObj;
						this.MATERIALPACKINGNAME = _Arr[0].MATERIALPACKINGNAME;
						this.CHARGE = _Arr[0].CHARGE;
						this.MATERIALSPECNAME = _Arr[0].MATERIALSPECNAME;
						this.SPECNAME = _Arr[0].SPECNAME;
						this.DESC_CN = _Arr[0].DESC_CN;
						this.PHASE = _Arr[0].PHASE;
						//this.BoxListInfo = _Arr;
						if (this.RECEIVEACTNO == "") {
							this.createActNo();
						}
						this.createBoxInfo();
					} else {
						this.$showMessage(res.data.message)
					}
					this.focusBarCode = true
					this.focusShipRequest = false
				}).catch(err => {
					this.$showMessage(err)
					this.focusBarCode = true
					this.focusShipRequest = false
				});
			},

			async createActNo() {
				await this.$MyRequest('/FGStockIn/createActNo', {
					//MATERIALPACKINGNAME: this.MATERIALPACKINGNAME
				}).then(res => {
					if (res.data.success) {
						console.log(res.data.resultObj + "*****************************")
						var _Arr = res.data.resultObj;
						this.RECEIVEACTNO = _Arr[0].ReceiveActNo;
					} else {
						this.$showMessage(res.data.message)
					}
					this.focusBarCode = true
					this.focusShipRequest = false
				}).catch(err => {
					this.$showMessage(err)
				});
			},

			async createBoxInfo() {
				if (this.RECEIVEACTNO == "") {
					this.$showMessage("入库单号为空")
					return;
				}
				await this.$MyRequest('/FGStockIn/createBoxInfo', {
					//MATERIALPACKINGNAME: this.MATERIALPACKINGNAME
					// String materialPackingName = materialPacking.getMaterialPackingName();
					// 	String receiveActNo = materialPacking.getReceiveActNo();
					// 	String user = materialPacking.getUser();
					// 	String locationName = materialPacking.getLocationName();
					// 	String erpFactory = materialPacking.getErpFactory();
					// 	String erpLocation = materialPacking.getErpLocation();
					MATERIALPACKINGNAME: this.MATERIALPACKINGNAME,
					RECEIVEACTNO: this.RECEIVEACTNO,
					MATERIALSPECNAME: this.MATERIALSPECNAME,
					locationName: this.LOCATIONNAME,
					erpFactory: this.ERPFACTORY,
					erpLocation: this.ERPLOCATION,
					user: '101867'
				}).then(res => {
					if (res.data.success) {
						var _Arr = res.data.resultObj;
						this.MATERIALPACKINGNAME = "";
						this.getActBindBox();
					} else {
						this.$showMessage(res.data.message)

					}
					this.focusBarCode = true
					this.focusShipRequest = false
				}).catch(err => {
					this.$showMessage(err)
				});
			},


			async getActBindBox() {
				if (this.RECEIVEACTNO == "") {
					this.$showMessage("入库单号为空")
					return;
				}
				await this.$MyRequest('/FGStockIn/getActBindBox', {
					RECEIVEACTNO: this.RECEIVEACTNO,
				}).then(res => {
					if (res.data.success) {
						var _Arr = res.data.resultObj;
						this.BoxListInfo = _Arr;
					} else {
						this.$showMessage(res.data.message)
					}
					this.focusBarCode = true
					this.focusShipRequest = false
				}).catch(err => {
					this.$showMessage(err)
				});
			},
			/**
			 * 入库审核
			 */
			FGStockIn() {
				if (this.BoxListInfo.length > 0) {
					this.loading = true;
					if (this.RECEIVEACTNO == "") {
						this.$showMessage("入库单号为空")
						this.loading = false;
						return;
					}
					this.$MyRequest('/FGStockIn/FGStockIn', {
						RECEIVEACTNO: this.RECEIVEACTNO
					}).then(res => {
						if (res.data.success) {
							this.loading = false;
							this.resetValue();
							this.$showMessage(res.data.message)
						} else {
							this.loading = false;
							this.$showMessage(res.data.message)
						}
						this.focusBarCode = true
						this.focusShipRequest = false
					}).catch(err => {
						this.loading = false;
						this.$showMessage(err)
					});
				} else {
					this.$showMessage("入库数量为空！")
				}
			},

			resetValue() {
				this.MATERIALPACKINGNAME = "";
				this.LocationName = "";
				this.ERPFACTORY = "";
				this.ERPLOCATION = "";
				this.BoxListInfo = [];
				this.RECEIVEACTNO = "";
				this.MATERIALSPECNAME = "";
				this.PHASE = "";
				this.SPECNAME = "";
				this.DESC_CN = "";
				this.CHARGE = "";
				THIS.LOCATIONNAME = "";
			}
		}
	}
</script>

<style lang="scss">
	switch {
		color: #FFCC33;
	}

	/* 基础样式 */
	.picker {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		/* 根据需要调整宽度 */
	}

	.row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		/* 行与行之间的间距 */
	}

	.col {
		flex: 1;
		/* 使得每列占据相等的空间 */
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	label {
		// font-weight: bold;
		/* 标签加粗 */
		margin-bottom: 5px;
		/* 标签和值之间的间距 */
	}

	.value {
		/* 值的样式，可以根据需要调整 */
	}
</style>
