<template>
	<view class="bg-image">
		<view class="diy-flex-row">
			<view style="flex: 3">
				<!-- 占位 -->
			</view>
			<view style="flex: 80;margin: 5rpx;">
				<view class="diy-flex-row">
					<view class="rightImageContainer" @click="cameraScanCode" style="flex: 12;padding-top: 20rpx;">
						<image style="width: 60rpx;height: 60rpx" src="/static/scan.png" />
					</view>

					<view class="uni-input-wrapper" style="flex: 60;">
						<input id="inputMatCode" class="uni-input" style="font-size: 50rpx; padding: 10rpx;"
							:placeholder="placeholderText" v-model="shelfCodeCondition" @blur="queryMatList"></input>
					</view>

					<view style="flex: 3;">
					</view>

					<view style="flex: 30;">
						<button @click="clear">清空</button>
					</view>
				</view>
			</view>
			<view style="flex: 2">
				<!-- 占位 -->
			</view>
		</view>

		<view class="diy-flex-column" style="margin-top: 5rpx;">
			<view class="diy-flex-inforow">
				<view style="width: 10rpx;"></view>
				<view style="width: 700rpx;">货架码:{{shelfCode}}</view>
			</view>
		</view>

		<view class="diy-flex-column" style="margin-top: 5rpx;">
			<view class="diy-flex-inforow">
				<view style="width: 10rpx;"></view>
				<view style="width: 700rpx;">运输状态:{{transStatusStr}}</view>
			</view>
		</view>

		<view class="diy-flex-column" style="margin-top: 5rpx;">
			<view class="diy-flex-inforow">
				<view style="width: 10rpx;"></view>
				<view style="width: 700rpx;">当前位置:{{currentLocationCode}}</view>
			</view>
		</view>

		<view class="diy-flex-column" style="margin-top: 5rpx;">
			<view class="diy-flex-inforow">
				<view style="width: 10rpx;"></view>
				<view style="width: 700rpx;">目标位置:{{destinationLocaiotnCode}}</view>
			</view>
		</view>

		<view class="diy-flex-column" style="margin-top: 5rpx;">
			<view class="diy-flex-inforow">
				<view style="width: 10rpx;"></view>
				<view style="width: 740rpx;">扫描的位置码:{{scanedShelfCode}}</view>
			</view>
		</view>

		<view style="flex: 1;">
			<view style="flex: 40;text-align: center;">
				<button style="margin: 50rpx;font-size: 40rpx;" @click="bind" size="mini">绑&nbsp;&nbsp;定</button>
				<button style="margin: 50rpx;font-size: 40rpx;background-color: red;" @click="unbind"
					size="mini">解&nbsp;&nbsp;绑</button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		recive
	} from '../../src/libs/Broadcast.js';

	import {
		unregisterReceiver
	} from '../../src/libs/Broadcast.js';

	import {
		getConfig
	} from '@/config.js';

	import {
		saveConfig
	} from '@/config.js';

	import {
		getServerIPAndPort
	} from '@/config.js';

	export default {
		data() {
			return {
				//初始化
				placeholderText: '请先扫描货架码',
				shelfCodeCondition: '',

				shelfId: 0,
				shelfCode: '',
				currentLocationId: 0,
				currentLocationCode: '',
				destinationLocationId: 0,
				destinationLocaiotnCode: '',
				transStatusStr: '',

				scanedShelfCode: '', //扫描的位置编码

				userName: '', //当前登录的用户名
			}
		},
		onShow: function() {
			this.userName = getConfig('userName', 'admin');

			const self = this; // 保存this的引用
			recive(function(res) {
				if (self.shelfId == 0) {
					self.analysisScanCode(res.data);
				} else {
					self.saveScanedShelfCode(res.data);
				}
			}, function(err) {
				console.log("Error:", JSON.stringify(err)); // 正确打印错误信息
			});
		},
		methods: {
			//摄像头扫码
			cameraScanCode() {
				uni.scanCode({
					success: (res) => {
						console.log('扫码结果:', res.result);
						if (this.shelfId == 0) {
							this.analysisScanCode(res.result);
						} else {
							this.saveScanedShelfCode(res.result);
						}
					},
					fail: (err) => {
						console.error('扫码失败:', err);
						// 处理扫码失败的情况
					}
				});
			},
			analysisScanCode: function(encodedString) {
				// 去除末尾的逗号和"..."（如果有的话）
				encodedString = encodedString.replace(/,\s*\.\.\.$/, '');
				this.shelfCodeCondition = encodedString;
				//调用接口获取当前货架信息，查看当前货架的工位绑定情况
				var serverIPAndPort = getServerIPAndPort();

				uni.request({
					url: 'http://' + serverIPAndPort +
						'/pdaShelfLocationBindUnbind/getLocationInfoByShelfCode', // 请求的接口地址
					method: 'POST', // 设置请求方式为 POST
					data: {
						"shelfCode": encodedString,
						"userName": this.userName,
						"deviceType": "PDA",
					},
					header: {
						'Content-Type': 'application/json', // 如果需要以JSON格式发送数据
					},
					success: (res) => {
						// 请求成功的回调函数
						if (res.statusCode === 200) {
							//接口返回数据为200 表示获取成功！
							if (res.data.code == 200) {
								//未查询到信息
								if (res.data.data == null || res.data.data.count == 0) {
									uni.showToast({
										title: '获取失败，请重试！',
										icon: 'none',
										duration: 1500
									});
									return;
								}
								//有物料信息
								this.shelfId = res.data.data.shelfId;
								this.shelfCode = res.data.data.shelfCode;

								this.currentLocationId = res.data.data.currentLocationId;
								this.currentLocationCode = res.data.data.currentLocationCode;
								this.destinationLocationId = res.data.data.destinationLocationId;
								this.destinationLocaiotnCode = res.data.data.destinationLocaiotnCode;
								this.transStatusStr = res.data.data.transStatusStr;
								this.scanedShelfCode = '';
								uni.showToast({
									title: '获取成功!',
									icon: 'none',
									duration: 100
								});

							} else {
								uni.showToast({
									title: '获取失败:' + res.data.message,
									icon: 'none',
									duration: 3500
								});
								this.clear();
							}

						} else {
							uni.showToast({
								title: '服务器返回错误状态码' + res.statusCode,
								icon: 'none',
								duration: 3000
							});
							this.clear();
						}
					},
					fail: (err) => {
						console.log(err.errMsg);
						// 请求失败的回调
						uni.showToast({
							title: '请求失败' + err.errMsg,
							icon: 'none',
							duration: 3000
						});
						this.clear();
					},
					complete: (event) => {
						// 请求完成的回调函数（无论成功或失败都会调用）
						console.log('请求完成', event);
					}
				});
			},
			saveScanedShelfCode: function(encodedString) {
				// 去除末尾的逗号和"..."（如果有的话）
				encodedString = encodedString.replace(/,\s*\.\.\.$/, '');
				this.scanedShelfCode = encodedString;
			},
			bind: function() {
				if (this.shelfId == 0 || this.shelfId == null) {
					uni.showToast({
						title: '请先扫描获取数据！',
						icon: 'none',
						duration: 3500
					});
					return;
				}
				if (this.scanedShelfCode == 0 || this.scanedShelfCode == null) {
					uni.showToast({
						title: '请先扫描获取位置码！',
						icon: 'none',
						duration: 3500
					});
					return;
				}
				//调用接口获取当前货架信息，查看当前货架的工位绑定情况
				var serverIPAndPort = getServerIPAndPort();
				uni.request({
					url: 'http://' + serverIPAndPort +
						'/pdaShelfLocationBindUnbind/shelfLocationBind', // 请求的接口地址
					method: 'POST', // 设置请求方式为 POST
					data: {
						"shelfId": this.shelfId,
						"shelfCode": this.shelfCode,
						"locationId": 0,
						"locationCode": this.scanedShelfCode,
						"userName": this.userName,
						"deviceType": "PDA",
					},
					header: {
						'Content-Type': 'application/json', // 如果需要以JSON格式发送数据
					},
					success: (res) => {
						// 请求成功的回调函数
						if (res.statusCode === 200) {
							//接口返回数据为200 表示获取成功！
							if (res.data.code == 200) {
								uni.showToast({
									title: '绑定成功!',
									icon: 'none',
									duration: 3000
								});
								//绑定成功
								this.analysisScanCode(this.shelfCode);
							} else {
								uni.showToast({
									title: '绑定失败:' + res.data.message,
									icon: 'none',
									duration: 4500
								});
								//this.clear();
							}

						} else {
							uni.showToast({
								title: '服务器返回错误状态码' + res.statusCode,
								icon: 'none',
								duration: 4500
							});
							this.clear();
						}
					},
					fail: (err) => {
						// 请求失败的回调函数
						uni.showToast({
							title: '请求失败:' + err.errMsg,
							icon: 'none',
							duration: 3000
						});

						this.clear();
					},
					complete: (event) => {
						// 请求完成的回调函数（无论成功或失败都会调用）
						console.log('请求完成', event);
					}
				});
			},
			//解绑
			unbind: function() {
				if (this.shelfId == 0 || this.shelfId == null) {
					uni.showToast({
						title: '请先扫描获取数据！',
						icon: 'none',
						duration: 3500
					});
					return;
				}

				//调用接口获取当前货架信息，查看当前货架的工位绑定情况
				var serverIPAndPort = getServerIPAndPort();
				uni.request({
					url: 'http://' + serverIPAndPort +
						'/pdaShelfLocationBindUnbind/shelfLocationUnBind', // 请求的接口地址
					method: 'POST', // 设置请求方式为 POST
					data: {
						"shelfId": this.shelfId,
						"shelfCode": this.shelfCode,
						"locationId": 0,
						"locationCode": this.scanedShelfCode,
						"userName": this.userName,
						"deviceType": "PDA",
					},
					header: {
						'Content-Type': 'application/json', // 如果需要以JSON格式发送数据
					},
					success: (res) => {
						// 请求成功的回调函数
						if (res.statusCode === 200) {
							//接口返回数据为200 表示获取成功！
							if (res.data.code == 200) {
								uni.showToast({
									title: '解绑成功!',
									icon: 'none',
									duration: 3000
								});
								//解绑成功
								this.analysisScanCode(this.shelfCode);
							} else {
								uni.showToast({
									title: '解绑失败:' + res.data.message,
									icon: 'none',
									duration: 4500
								});
								//this.clear();
							}

						} else {
							uni.showToast({
								title: '服务器返回错误状态码' + res.statusCode,
								icon: 'none',
								duration: 4500
							});
							this.clear();
						}
					},
					fail: (err) => {
						// 请求失败的回调函数
						uni.showToast({
							title: '请求失败:' + err.errMsg,
							icon: 'none',
							duration: 3000
						});

						this.clear();
					},
					complete: (event) => {
						// 请求完成的回调函数（无论成功或失败都会调用）
						console.log('请求完成', event);
					}
				});
			},

			//清空当前界面所有内容
			clear: function() {
				this.placeholderText = '请先扫描货架码';
				this.shelfCodeCondition = '';

				this.shelfId = 0;
				this.shelfCode = '';
				this.currentLocationId = 0;
				this.currentLocationCode = '';
				this.destinationLocationId = 0;
				this.destinationLocaiotnCode = '';
				this.transStatusStr = '';

				this.scanedShelfCode = '';
			},
		}
	}
</script>

<style>
	.uni-input-wrapper {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: nowrap;
		background-color: #FFFFFF;
	}

	.mini-btn {
		margin-right: 10rpx;
	}

	.bg-image {
		background-image: url('/static/background.png');
		/* 背景图片路径 */
		background-size: cover;
		/* 背景图片覆盖整个元素 */
		background-position: center;
		/* 背景图片居中 */
		height: 100%;
		/* 视图高度设置为100% */
		width: 100%;
		/* 视图宽度设置为100% */
		position: fixed;
		/* 视图定位为固定 */
		top: 0;
		left: 0;
		/* z-index: -1; */
	}

	.diy-flex-row {
		display: flex;
		flex-direction: row;
		margin-top: 15rpx;
		margin-bottom: 15rpx;
		font-size: 50rpx;
	}

	.diy-flex-column {
		display: flex;
		flex-direction: column;
	}

	.diy-flex-inforow {
		display: flex;
		flex-direction: row;
		font-size: 40rpx;
		font-weight: 500;
		margin-top: 8rpx;
		margin-bottom: 8rpx;
	}

	.scroll-view {
		height: 75vh;
	}

	.popup-content {
		padding: 20px;
		background-color: rgba(0, 0, 0, 1);
		background-color: white;
		z-index: 2;
		border-radius: 20rpx;
	}


	.input-item {
		margin-bottom: 5rpx;
		display: flex;
		align-items: center;
		/* 让内部元素垂直居中 */
	}

	.input-item label {
		display: inline-block;
	}

	.input-item input {
		display: inline-block;
		background: wheat;
		width: 280rpx;
	}

	.button-group {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.button-group button {
		margin-top: 20rpx;
		padding: 10rpx 10rpx;
		border: none;
		border-radius: 5px;
		background-color: #007AFF;
		color: #fff;
		cursor: pointer;
	}


	.cardNoStocktaking {
		border: 3rpx solid black;
		border-radius: 15rpx;
		margin: 8rpx;
		padding: 8rpx;
		background-color: beige;
	}

	.cardYesStocktaking {
		border: 3rpx solid black;
		border-radius: 15rpx;
		margin: 8rpx;
		padding: 8rpx;
		background-color: seagreen;
	}
</style>