<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>
			<br /> -->
			<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"
					:disabled="Locatiaon_state" @change="changeLocation"></zxzUniDataSelect>
			</u-form-item>
			<br />
			<u-row align="left">
				<u-col span="4"><label>组织：</label> <label>{{ERPFACTORY}}</label></u-col>
				<u-col span="4"><label>仓库：</label> <label>{{ERPLOCATION}}</label> </u-col>
				<u-col span="4"><label>货位：</label> <label>{{LOCATIONNAME}}</label></u-col>
			</u-row>
			<u-form-item>
				<p>供应商批次:</p>
				<u-input class="uni-input" v-model="SUPPLIER" :focus="focusKw" placeholder="请扫描供应商批次" :border="true"
					@confirm="confirmSupplierCharge" />
			</u-form-item>
			<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>
			<br />
			<u-row v-show='false'>
				<u-col span="3"><label style="text-align: right;">料号：</label> </u-col>
				<u-col span="9"><label>{{this.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>{{MATERIALQUANTITY}}</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>
		<view>
			<zb-table style="height: 600upx;" ref="zbTable" :show-header="true" :columns="column" :stripe="true"
				:fit="false" show-summary :highlight="true" :border="true" :data="BoxListInfo" :isShowLoadMore="true"
				@dele="dele">
			</zb-table>
		</view>
		<u-form>
			<u-form-item>
				<u-button @click="ConfirmButton" type="primary" size="mini" :disabled="disableButton"
					style="background-color: green;width: 80%;">上架确认</u-button>
			</u-form-item>
		</u-form>
	</view>
</template>

<script>
	import zxzUniDataSelect from "@/components/zxz-uni-data-select/zxz-uni-data-select.vue"
	export default {
		components: {
			zxzUniDataSelect
		},
		data() {
			return {
				column: [ //列
					// width:180
					{
						name: 'CHARGE',
						label: '批次',
						align: 'center',
						fixed: true,
						width: 180
					},
					{
						name: 'SUPPLIERCHARGE',
						label: '供应商批次',
						align: 'center',
						// fixed: true,
						width: 270
					},
					{
						name: 'MATERIALSPECNAME',
						label: '料号'
					},
					{
						name: 'DES_CN',
						label: '品名'
					},
					{
						name: 'SDK_SPEC',
						label: '规格'
					},
					{
						name: 'PHASE',
						label: '阶段',
						sorter: true
					},
					{
						name: 'ERPLOCATION',
						label: '库位'
					},
					{
						name: 'LOCATIONNAME',
						label: '货架'
					}, {
						name: 'PRELOCATIONNAME',
						label: '转换前货架'
					},
					{
						name: 'MATERIALQUANTITY',
						label: '数量',
						sorter: true
					},
					{
						name: 'MATERIALPACKINGNAME',
						label: '条码',
						width: 500
					},
					{
						name: 'operation',
						type: 'operation',
						label: '操作',
						renders: [

							{
								name: '取消',
								size: 'mini',
								type: 'warn',
								func: "dele"
							},
						]
					},
				],
				items: [],
				orgObject: {
					ERPFACTORY: '',
					DESCRIPTION: ''
				}, // 组织对象
				LocationName: '', //库位信息
				LOCATIONNAME: '',
				ERPFACTORY: JSON.parse(uni.getStorageSync('orgObject')).ERPFACTORY, //组织
				ERPLOCATION: '', //库位
				tabH: 800, //表格的宽度
				MATERIALSPECNAME: '',
				MATERIALPACKINGNAME: '', //条码
				CHARGE: '', //批次
				DESC_CN: '', //品名
				SPECNAME: '', //规格
				RECEIVEACTNO: '', //入库单号
				UNIT: '', //单位
				PHASE: '', //阶段
				SUPPLIER: '',
				QTY: '', //数量
				Locatiaon_state: false,
				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',
				loading: false,
				scanData: [], //已扫描箱
				barCode: "", //条码
				DURABLENAMECode: "", //卷芯
				focusKw: false,
				focusBarCode: false, //焦点是否被选中
				focusShipRequest: false, //默认焦点在单号
				siteName: "",
				userId: "",
				bqts: 0,
				bqkcs: 0,
				MATERIALQUANTITY: 0,
				disableButton: false,
				items_Location: []
			}
		},

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

			this.getERPLocation();
		},

		methods: {
			/**
			 * 上架提交
			 */
			ConfirmButton() {
				this.disableButton = true;
				console.log()
				let list = this.BoxListInfo;
				if (list <= 0) {
					this.disableButton = false;
					this.$showMessage("不存在需要提交的信息")
					return;
				}
				this.boxList = []
				for (var i = 0; i < list.length; ++i) {
					this.BoxListInfo[i].key = {},
						this.boxList.push(this.BoxListInfo[i])
				}
				if (this.boxList.length < 1) {
					this.disableButton = false;
					this.$showMessage("不存在需要上架的信息")
					return;
				}
				this.$MyRequest('/NoInvoice/ChangeLocation', {
					user: this.userId,
					siteName: this.siteName,
					boxList: this.boxList
				}).then(res => {
					this.disableButton = false;
					this.$showMessage(res.data.message) //执行出库后返回的消息
					this.BoxListInfo = []
					this.$nextTick(() => {
						this.MATERIALPACKINGNAME = ""
						this.focusBarCode = true
						this.focusShipRequest = false
						this.focusKw = false
						this.resetValue()
					})
					this.focusBarCode = true
					this.focusShipRequest = false
					this.focusKw = false
				}).catch(err => {
					this.disableButton = false;
					this.$showMessage(err)
					this.$nextTick(() => {
						this.MATERIALPACKINGNAME = ""
						this.focusBarCode = true
						this.focusShipRequest = false
						this.focusKw = false
					})
					this.focusBarCode = true
					this.focusShipRequest = false
					this.focusKw = false

				})
			},
			change(e) {
				this.ERPLOCATION = e.value;
				this.LOCATIONNAME = ""
				this.bqts = 0
				this.bqkcs = 0
				this.Huowei = e.Huowei
				// if (e.Huowei == 'Y') {
				// 	this.Locatiaon_state = false
				// 	this.getLocationName2();
				// } else {
				// 	this.$showMessage(e.text + "仓库没有启用货位管理")
				// 	this.Locatiaon_state = true
				// 	this.focusKw = true
				// }
				this.Locatiaon_state = false
				this.getLocationName2();

			},
			changeLocation() {
				this.bqts = 0
				this.bqkcs = 0
			},
			//获取焦点的公共方法
			getfocus(nextfocus) {
				this.initfocus()
				this[nextfocus]
				this.$nextTick(() => { //vue是数据全部修改后才进行的视图更新，哪nextTick函数就是为了拿到最新的数据，还不懂的可以去百度
					this[nextfocus] = true
				})
			},

			getERPLocation() {
				this.items = [];
				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)
					}
				});
			},
			getLocationName2() {
				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,
									Huowei: _Arr.USE_LOCATION,
								});

							}
						} else {
							this.$showMessage(res.data.message)
						}
						this.focusBarCode = true
						this.focusShipRequest = false
						this.focusKw = false
					}).catch(err => {
						this.$showMessage(err)
					});
				} else {
					this.$showMessage("请先选择仓库")
				}

			},
			getLocationName() {
				this.$MyRequest('/storage/getLocationName', {
					storageName: this.LOCATIONNAME
				}).then(res => {
					if (res.data.success) {
						var _Arr = res.data.resultObj;
						this.LOCATIONNAME = _Arr[0].STORAGENAME;
						this.ERPFACTORY = _Arr[0].ERPFACTORY;
						this.ERPLOCATION = _Arr[0].ERPLOCATION;
					} else {
						this.$showMessage(res.data.message)
					}
					this.focusBarCode = true
					this.focusShipRequest = false
					this.focusKw = false
				}).catch(err => {
					this.$showMessage(err)
				});
			},
			confirmSupplierCharge() {
				console.log("this.focusShipRequest : " + this.focusShipRequest)
				console.log("this.focusKw : " + this.focusKw)
				console.log("this.focusBarCode : " + this.focusBarCode)
				this.$nextTick(() => {
					this.MATERIALPACKINGNAME = ""
					this.focusBarCode = true
					this.focusShipRequest = false
					this.focusKw = false
				})
			},
			//取消上架操作
			dele(index) {
				this.BoxListInfo.splice(index, 1)
				this.bqts = this.BoxListInfo.length
				this.bqkcs = 0
				for (let i = 0; i < this.BoxListInfo.length; i++) {
					this.bqkcs = Number(this.bqkcs) + Number(this.BoxListInfo[i].MATERIALQUANTITY)
				}
			},
			async ScanBarCode() {
				this.focusBarCode = false
				if ((this.LOCATIONNAME == null || this.LOCATIONNAME == "") && (this.Huowei == 'Y')) {
					this.$showMessage("请选择货位！");
					this.MATERIALPACKINGNAME = ""
					this.focusBarCode = true
					return;
				}
				if (this.ERPFACTORY == null || this.ERPFACTORY == "") {
					this.$showMessage("请选择组织！");
					this.MATERIALPACKINGNAME = ""
					this.focusBarCode = true
					return;
				}
				if (this.ERPLOCATION == null || this.ERPLOCATION == "") {
					this.$showMessage("请选择仓库！");
					this.MATERIALPACKINGNAME = ""
					this.focusBarCode = true
					return;
				}
				if (this.BoxListInfo.some(box => box.MATERIALPACKINGNAME === this.MATERIALPACKINGNAME)) {
					this.$showMessage("改标签已扫描，请不要重复扫描！");
					this.$nextTick(() => {
						this.MATERIALPACKINGNAME = ""
						this.focusBarCode = true
						this.focusShipRequest = false
						this.focusKw = false
					})
					return;
				}
				var barCodeArr = this.MATERIALPACKINGNAME.split("|");
				await this.$MyRequest('/NoInvoice/getChangeLocationBarCode', {
					MATERIALPACKINGNAME: this.MATERIALPACKINGNAME,
					LocationName: this.LOCATIONNAME,
					ErpFactory: this.ERPFACTORY,
					ErpLocation: this.ERPLOCATION,
					SUPPLIERCHARGE: this.SUPPLIER,
					user: this.userId,
					siteName: 'SDK',
					MATERIALSPECNAME:barCodeArr[0]
				}).then(res => {
					console.log(res.data.success)
					if (res.data.success) {
						// this.MATERIALSPECNAME = res.data.resultObj[0].MATERIALSPECNAME
						// this.DESC_CN = res.data.resultObj[0].DESC_CN
						// this.SPECNAME = res.data.resultObj[0].DESCRIPTION
						// this.PHASE = res.data.resultObj[0].PHASE
						// this.CHARGE = res.data.resultObj[0].CHARGE
						// this.MATERIALQUANTITY = res.data.resultObj[0].MATERIALQUANTITY
						// console.log(this.MATERIALSPECNAME, this.DESC_CN, this.SPECNAME, this.PHASE, this
						// 	.CHARGE)
						// this.$showMessage(res.data.message)
						// this.bqts = this.bqts + 1
						// this.bqkcs = this.bqkcs + this.MATERIALQUANTITY
						// this.MATERIALPACKINGNAME = ""
						// this.focusBarCode = true
						this.BoxListInfo.push(res.data.resultObj[0]);
						this.bqts = this.BoxListInfo.length
						this.bqkcs = 0
						for (let i = 0; i < this.BoxListInfo.length; i++) {
							this.bqkcs = Number(this.bqkcs) + Number(this.BoxListInfo[i].MATERIALQUANTITY)
						}
						this.focusBarCode = true
						this.focusShipRequest = false
						this.focusKw = false
					} else {
						this.focusBarCode = true
						this.$showMessage(res.data.message)
						this.MATERIALPACKINGNAME = ""
						
					}
					this.$nextTick(() => {
						this.MATERIALPACKINGNAME = ""
						this.focusBarCode = true
						this.focusShipRequest = false
						this.focusKw = false
					})
				}).catch(err => {
					this.loading = false;
					this.$showMessage(err)
					this.$nextTick(() => {
						this.MATERIALPACKINGNAME = ""
						this.focusBarCode = true
						this.focusShipRequest = false
						this.focusKw = false
					})
				});
				this.focusBarCode = true
			},

			resetValue() {
				this.MATERIALPACKINGNAME = "";
				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>