<template>
	<view>
		<view>
			<!-- 			<u-navbar back-text="返回" title="无单据转库" :background="background"></u-navbar> -->
			<navVar :mysNavConfig="navConfig" @onLeftClick="onLeftClick"></navVar>
		</view>
		<view style="margin: 10rpx;">
			<u-form ref="testForm">
				<!-- <u-row align="left" style="margin-left: 54rpx;margin-top: 20rpx">
					<u-col style="display: contents;"><label>组织:</label> </u-col>
					<u-col span="10"><label>{{ERPFACTORYNAME}} {{ERPFACTORY}}</label> </u-col>
				</u-row> -->
				<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> -->
					<zxzUniDataSelect filterable v-model="ERPLOCATION" :localdata="items" @change="change">
					</zxzUniDataSelect>
				</u-form-item>
				<u-form-item :border-bottom="false">
					<label>选择库位:</label>&nbsp;&nbsp;&nbsp;&nbsp;
					<!-- <uni-data-select v-model="LOCATIONNAME" :localdata="items_Location" @change="change2"></uni-data-select> -->
					<zxzUniDataSelect filterable v-model="LOCATIONNAME" :localdata="items_Location"
						@change="changeLocation"  @inputChange="getitems_LocationAll"></zxzUniDataSelect>
				</u-form-item>
				<!-- <br />
			<u-row align="left">
				<u-col span="2"><label>组织：</label> </u-col>
				<u-col span="1"><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="ScanBarCode" />
				</u-form-item>
				<u-row>
					<u-col span="3"><label style="text-align: right;">扫描行数：</label> </u-col>
					<u-col span="9"><label>{{bqts}}</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>{{bqkcs}}</label> </u-col>
				</u-row>
				<!-- <u-row v-show="false">
				<u-col span="3"><label style="text-align: right;">料号：</label> </u-col>
				<u-col span="9"><label>{{MATERIALSPECNAME}}</label> </u-col>
				<u-col span="3"><label style="text-align: right;">品名：</label> </u-col>
				<u-col span="9"><label>{{DESC_CN}}</label> </u-col>
				<u-col span="3"><label style="text-align: right;">规格：</label> </u-col>
				<u-col span="9"><label>{{SPECNAME}}</label> </u-col>
				<u-col span="3"><label style="text-align: right;">阶段：</label> </u-col>
				<u-col span="9"><label>{{PHASE}}</label> </u-col>
				<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-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">
				<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-td align="center">{{ item.AIMERPFACTORY }}</uni-td>
				<uni-td align="center">{{ item.AIMERPLOCATION }}</uni-td>
				<uni-td align="center">{{ item.AIMLOCATIONNAME }}</uni-td>
				<uni-td align="center">
					<button type="warn" @click="del(item)">删除</button>
				</uni-td>
			</uni-tr>
		</uni-table> -->
			<zb-table style="padding-bottom: 200upx;" ref="zbTable" :show-header="true" :columns="column" :stripe="true"
				:fit="true" :highlight="true" :border="true" :data="BoxListInfo" @dele="del"></zb-table>
			
			<view class="tabbar_bottom">
				<u-input v-if="false" v-model="opCode" />
				<uni-datetime-picker style="align-items: center;" type="date" :clear-icon="false" v-model="commitDate"
					@maskClick="maskClick" />
				<u-button class="btn-bottom" @click="CommitMove" type="primary" :loading="loading">确定</u-button>
			</view>
		</view>
		<u-modal :show="showModal" :title="titleModal" :content='contentModal'></u-modal>
	</view>
</template>

<script>
	import {
		getOpCode
	} from '@/common/api.js';
	import { cals } from '@/utils/cal'
	import navVar from "@/components/navBar/navBar.vue"
	import zxzUniDataSelect from "@/components/zxz-uni-data-select/zxz-uni-data-select.vue"
	export default {
		components: {
			zxzUniDataSelect,
			navVar
		},
		data() {
			return {
				items_LocationAll:[],
				commitDate: '',
				opCode: '',
				showModal: false,
				titleModal: "提示",
				contentModal: '是否确定返回?',
				navConfig: {
					navPadding: false,
					isHome: false,
					navPadding: true,
					navFixed: true,
					bgImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))',
					isCustomFn: true,
					navTitle: {
						text: "无单据转库",
						color: "rgb(96, 98, 102)",
						fontSize: "14px", // px upx rpx
						fontWeight: "normal", // blod
					},
					leftText: {
						text: "返回",
						color: "rgb(96, 98, 102)",
						fontSize: "14px", // px upx rpx
						fontWeight: "", // blod
					},
					leftIconPath: '../../../static/img/back.png'
				},
				column: [ //列
					{
						name: 'MATERIALPACKINGNAME',
						label: '标签',
						align: 'center',
						// fixed: true,
						// width: 210
					},
					{
						name: 'CHARGE',
						label: '批次'
					},
					{
						name: 'DESC_CN',
						label: '品名'
					},
					{
						name: 'MATERIALSPECNAME',
						label: '料号'
					},
					{
						name: 'SPECNAME',
						label: '规格'
					},
					{
						name: 'PHASE',
						label: '阶段'
					},
					{
						name: 'MATERIALQUANTITY',
						label: '数量'
					},
					{
						name: 'ERPFACTORY',
						label: '组织'
					},
					{
						name: 'ERPLOCATION',
						label: '仓库'
					},
					{
						name: 'LOCATIONNAME',
						label: '货位'
					},
					{
						name: 'AIMERPFACTORY',
						label: '目标组织'
					},
					{
						name: 'AIMERPLOCATION',
						label: '目标仓库'
					},
					{
						name: 'AIMLOCATIONNAME',
						label: '目标货位'
					}, {
						name: 'operation',
						type: 'operation',
						label: '操作',
						renders: [{
							name: '删除',
							size: 'mini',
							type: 'warn',
							func: "dele"
						}, ]
					},
				],
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				}, //返回按钮的样式
				orgObject: {
					ERPFACTORY: '',
					DESCRIPTION: ''
				}, // 组织对象
				LOCATIONNAME: '',
				ERPFACTORY: JSON.parse(uni.getStorageSync('orgObject')).ERPFACTORY, //组织
				ERPFACTORYNAME: JSON.parse(uni.getStorageSync('orgObject')).DESCRIPTION, //组织名称
				ERPLOCATION: '', //库位
				tabH: 800, //表格的宽度
				MATERIALSPECNAME: '',
				MATERIALPACKINGNAME: '', //条码
				CHARGE: '', //批次
				DESC_CN: '', //品名
				SPECNAME: '', //规格
				RECEIVEACTNO: '', //入库单号
				UNIT: '', //单位
				bqts: 0,
				bqkcs: 0,
				PHASE: '', //阶段
				QTY: '', //数量
				colors: ['#007aff', '#4cd964', '#dd524d'],
				styleType: 'button',
				current: 0,
				BoxListInfo: [], //后端传回来的绑定表格的数据
				colorIndex: 0,
				activeColor: '#007aff',
				loading: false,
				scanData: [], //已扫描箱
				barCode: "", //条码
				DURABLENAMECode: "", //卷芯
				focusBarCode: false, //焦点是否被选中
				focusShipRequest: true, //默认焦点在单号
				siteName: "",
				userId: "",
				items: [],
				items_Location: [],
				privilege: "0",
				barCodeArr1: "",
				MATERIALPACKINGNAME1: "",
			}
		},

		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
				}
			})
			uni.getStorage({
				key: "orgObject",
				success(res) {
					that.orgObject = res.data && JSON.parse(res.data)
				}
			})
			this.getERPLocation();
			this.getTimeData();
			// let Things = 20
			// for (var i = 0; i < Things; i++) {
			// 	this.BoxListInfo.push({aa:"1"}) 
			// }	
		},

		methods: {
			getTimeData() {
				var year = new Date().getFullYear(); //年
				if (year < 1900) year = year + 1900;
				var month = new Date().getMonth() + 1; //月
				if (month < 10) month = '0' + month;
				var day = new Date().getDate(); //日
				if (day < 10) day = '0' + day;
				const calendar1 = year + '-' + month + '-' + day
				this.commitDate = calendar1
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
			},
			onLeftClick() {
				uni.showModal({
					title: this.titleModal, // 模态框标题
					content: this.contentModal, // 模态框内容
					showCancel: true, // 是否显示取消按钮，默认为true
					cancelText: '取消', // 取消按钮的文字
					confirmText: '确定', // 确定按钮的文字
					success(res) {
						if (res.confirm) {
							uni.navigateBack({
								delta: 1 // 返回的页面数，如果 delta 大于现有页面数，则返回到首页
						 });
							console.log('用户点击了确定');
							// 执行确认后的逻辑
						} else if (res.cancel) {
							console.log('用户点击了取消');
							// 执行取消后的逻辑
						}
					}
				})
			},
			del(index, row) {
				this.bqkcs = this.bqkcs - index.MATERIALQUANTITY
				this.BoxListInfo.splice(row, 1)
				this.bqts = this.bqts - 1
				this.$showMessage("删除成功")
			},
			change(e) {
				this.ERPLOCATION = e.value;
				this.LOCATIONNAME = ""
				this.getLocationName();
			},
			//获取焦点的公共方法
			getfocus(nextfocus) {
				this.initfocus()
				this[nextfocus]
				this.$nextTick(() => { //vue是数据全部修改后才进行的视图更新，哪nextTick函数就是为了拿到最新的数据，还不懂的可以去百度
					this[nextfocus] = true
				})
			},
			changeLocation(e) {
				// this.BoxListInfo = [];
			},
			getERPLocation() {
				this.items = [];
				this.BoxListInfo = [];
				this.$MyRequest('/api/storage/getERPLocation', {
					ERPFACTORYNAME: this.ERPFACTORY
				}).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 = []
				this.BoxListInfo = [];
				if (this.ERPLOCATION != '') {
					this.$MyRequest('/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_LocationAll.push({
									text: _Arr.DESCRIPTION,
									value: _Arr.STORAGENAME
								});
								this.getitems_LocationAll('');
							}
						} else {
							this.$showMessage(res.data.message)
						}
						this.focusBarCode = true
						this.focusShipRequest = false
					}).catch(err => {
						this.$showMessage(err)
					});
				} else {
					this.$showMessage("请先选择仓库")
				}

			},
			getitems_LocationAll(query){
				console.log(query + "&&&&&&&&&&&&&&")
				var arr = this.items_LocationAll.filter(item => {
					return (item.text.includes(query)) || (item.value.includes(query))
				})
				if(arr.length > 50){
					this.items_Location = arr.slice(0,50)
				} else {
					this.items_Location = arr
				}
				console.log(this.items_Location)
			},
			async ScanBarCode() {
				if (this.privilege == "0") {
					this.focusBarCode = false
					if (this.BoxListInfo.some(box => box.MATERIALPACKINGNAME === this.MATERIALPACKINGNAME)) {
						this.$showMessage("改标签已扫描，请不要重复扫描！");
						this.$nextTick(() => {
							this.MATERIALPACKINGNAME = ""
							this.focusBarCode = true
							this.focusShipRequest = false
						})
						try {
							Vue.prototype.$playFail()
						} catch (e) {}
						return;
					}

					if (this.ERPFACTORY == null || this.ERPFACTORY == "") {
						this.$showMessage("请选择组织！");
						this.$nextTick(() => {
							this.MATERIALPACKINGNAME = ""
							this.focusBarCode = true
							this.focusShipRequest = false
						})
						try {
							Vue.prototype.$playFail()
						} catch (e) {}
						return;
					}
					if (this.ERPLOCATION == null || this.ERPLOCATION == "") {
						this.$showMessage("请选择仓库！");
						this.$nextTick(() => {
							this.MATERIALPACKINGNAME = ""
							this.focusBarCode = true
							this.focusShipRequest = false
						})
						try {
							Vue.prototype.$playFail()
						} catch (e) {}
						return;
					}
					// if (this.LOCATIONNAME == null || this.LOCATIONNAME == "") {
					// 	this.$showMessage("请选择货位！");
					// 	this.$nextTick(() => {
					// 		this.MATERIALPACKINGNAME = ""
					// 		this.focusBarCode = true
					// 		this.focusShipRequest = false
					// 	})
					// 	try {
					// 		Vue.prototype.$playFail()
					// 	} catch (e) {}
					// 	return;
					// }
					var barCodeArr = this.MATERIALPACKINGNAME.split("|");
					this.barCodeArr1 = barCodeArr[0];
					this.MATERIALPACKINGNAME1 = this.MATERIALPACKINGNAME;
				}
				// console.log(this.barCodeArr1)
				let a = uni.getStorageSync('userid')
				await this.$MyRequest('/location/AnalyStockBarCode', {
					MATERIALPACKINGNAME: this.MATERIALPACKINGNAME1,
					erpFactory: this.ERPFACTORY,
					erpLocation: this.ERPLOCATION,
					storageName: this.LOCATIONNAME,
					user: this.privilege + a,
					MATERIALSPECNAME: this.barCodeArr1
				}).then(res => {
					console.log(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;

						if (!this.BoxListInfo.length || !this.BoxListInfo.filter((item) => item
								.MATERIALPACKINGNAME == _Arr[0].MATERIALPACKINGNAME).length) {
							this.BoxListInfo.push(_Arr[0])
							this.bqts++
							this.bqkcs = (cals.add(this.bqkcs, _Arr[0].MATERIALQUANTITY)).toNumber()
						}
						this.$nextTick(() => {
							this.MATERIALPACKINGNAME = ""
							this.focusBarCode = true
							this.focusShipRequest = false
						})
						this.privilege = "0";
						try {
							Vue.prototype.$playSuccess()
						} catch (e) {}
					} else {
						if ('烤箱' == res.data.message.substring(0, 2)) {
							uni.showModal({
								title: '是否跳过烤箱',
								content: res.data.message.substring(2),
								cancelText: '取消',
								confirmText: '确定',
								success: function(res) {
									var that = this;
									if (res.confirm) {
										that.privilege = "1";
										that.ScanBarCode();
									} else if (res.cancel) {
										that.$nextTick(() => {
											that.MATERIALPACKINGNAME = ""
											that.focusBarCode = true
											that.focusShipRequest = false
										})
										that.privilege = "0";
										that.$showMessage(res.data.message);
									}
								}.bind(this)
							});
						} else {
							this.$nextTick(() => {
								this.MATERIALPACKINGNAME = ""
								this.focusBarCode = true
								this.focusShipRequest = false
							})
							this.$showMessage(res.data.message)
							this.privilege = "0";
							try {
								Vue.prototype.$playFail()
							} catch (e) {}
						}
					}
				}).catch(err => {
					this.$nextTick(() => {
						this.MATERIALPACKINGNAME = ""
						this.focusBarCode = true
						this.focusShipRequest = false
					})
					this.$showMessage(err)
					this.privilege = "0";
					try {
						Vue.prototype.$playFail()
					} catch (e) {}
				});
				this.privilege = "0";
			},
			/**
			 * 库位移动审核
			 */
			CommitMove() {
				console.log(this.commitDate)
				this.loading = true;
				// console.log(this.userId)
				// console.log(this.BoxListInfo)
				// return;
				this.BoxListInfo.map(item => {
					if (item.hasOwnProperty("key")) {
						delete item.key
					}
				})
				getOpCode({
					opcode: this.opCode,
					user: this.userId
				}).then((res) => {
					this.$MyRequest('/location/CommitMove1', {
						body: this.BoxListInfo,
						user: this.userId,
						time: this.commitDate,
						opcode: this.opCode,
					}).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)
					});
				})

			},

			resetValue() {
				this.opCode = "";
				this.MATERIALPACKINGNAME = "";
				this.BoxListInfo = [];
				this.RECEIVEACTNO = "";
				this.MATERIALSPECNAME = "";
				this.PHASE = "";
				this.SPECNAME = "";
				this.DESC_CN = "";
				this.CHARGE = "";
				this.bqts = 0;
				this.bqkcs = 0;
			}
		}
	}
</script>
<style>
	.btn-bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
	}
</style>
<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>
