<template>
	<view style="margin: 10rpx;">
		<u-navbar back-text="返回" title="换绑批次" :background="background"></u-navbar>
		<u-form ref="testForm">
			<u-form-item :border-bottom="false">
				<p>扫描二维码:</p>
				<u-input :border="true" v-model="MATERIALPACKINGNAME" placeholder="请扫描条码" :focus="focusPakcingName"
					@confirm="GetSupplierChargeByPakingname" />
			</u-form-item>
			<u-form-item>
				<p>供应商批次(旧):</p>
				<u-input class="uni-input" v-model="SUPPLIEROLD" :focus="focusOld" placeholder="当前供应商批次" :border="true" disabled />
			</u-form-item>
			
			<u-form-item>
				<p>供应商批次(新):</p>
				<u-input class="uni-input" v-model="SUPPLIERNEW" :focus="focusNew" placeholder="请扫描供应商批次" :border="true"
					@confirm="confirmNewSupplierCharge" />
			</u-form-item>
			<u-row>
				<u-col span="5"><label style="text-align: right;">扫描新供应商行数：{{bqts}}</label> </u-col>
			</u-row>
			<br />
		</u-form>
		<view>
			<zb-table style="height: 320upx;" ref="zbTable" :show-header="true" :columns="column" :stripe="true"
				:fit="false"  :highlight="true" :border="true" :data="BoxListInfo" @dele="dele">
			</zb-table>
		</view>
		<view class="tabbar_bottom">
			<uni-datetime-picker style="align-items: center;" type="date" :clear-icon="false" 
			v-model="commitDate" @maskClick="maskClick" />
		<u-button class="btn-bottom" @click="ConfirmButton" type="primary" :disabled="disableButton">确认换绑</u-button>
		</view>
	</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: 'MATERIALPACKINGNAME',//CHARGE
						label: '批次',
						align: 'center',
						// fixed: true,
						width: 180
					},
					{
						name: 'SUPPLIERCHARGE', //SUPPLIERCHARGE
						label: '供应商批次',
						align: 'center',
						// fixed: true,
						width: 270
					},
					{
						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, //组织
				ERPFACTORYNAME: JSON.parse(uni.getStorageSync('orgObject')).DESCRIPTION, //组织名称
				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: [], //后端传回来的绑定表格的数据
				BoxListInfoMiddle: [],   //更新表格用
				colorIndex: 0,
				activeColor: '#007aff',
				loading: false,
				scanData: [], //已扫描箱
				barCode: "", //条码
				DURABLENAMECode: "", //卷芯
				focusPakcingName:false,
				focusOld: false,
				focusNew: false,
				siteName: "",
				userId: "",
				bqts: 0,
				bqkcs: 0,
				commitDate:'',
				MATERIALQUANTITY: 0,
				disableButton: false,
				items_Location: [],
				SUPPLIEROLD: '',
				SUPPLIERNEW: '',
				SUPPLIERNEWMIDDLE: ''
			}
		},

		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.orgObject = JSON.parse(uni.getStorageSync('orgObject'))
			this.getTimeData();
			
		},

		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);
			},
			/**
			 * 上架提交
			 */
			ConfirmButton () {
				this.disableButton = true;
				let boxList = []
				for (var i = 0; i < this.BoxListInfo.length; ++i) {
					this.BoxListInfo[i].key = {sitename : 'SDK'  ,  materialpackingname : this.BoxListInfo[i].MATERIALPACKINGNAME}
					boxList.push(this.BoxListInfo[i])
				}
				if (boxList.length < 1) {
					this.disableButton = false;
					this.$showMessage("不存在需要换绑的信息")
					return;
				}
				this.$MyRequest('/api/NoInvoice/ChangeSupplierCharge', {
					boxList: boxList,
					commitDate : this.commitDate,
					user : this.userId
				}).then(res => {
					this.disableButton = false;
					this.$showMessage(res.data.message) 
					this.BoxListInfo = []
					this.bqts = 0
					this.$nextTick(() => {
						this.focusPakcingName = true
						this.focusNew = false								
					})
					this.focusPakcingName = true
					this.focusNew = false	
				}).catch(err => {
					this.disableButton = false;
					this.$showMessage(err)
					this.$nextTick(() => {
						this.focusPakcingName = true
						this.focusNew = false	
					})
					this.focusPakcingName = true
					this.focusNew = false	
				})
			},
			
			
			//获取焦点的公共方法
			getfocus(nextfocus) {
				this.initfocus()
				this[nextfocus]
				this.$nextTick(() => { //vue是数据全部修改后才进行的视图更新，哪nextTick函数就是为了拿到最新的数据，还不懂的可以去百度
					this[nextfocus] = true
				})
			},

			
			//取消上架操作	
			dele(index) {
				this.BoxListInfo.splice(index, 1)
				this.bqts = this.BoxListInfo.length
			},
			
			 
			GetSupplierChargeByPakingname() {
				
					if (this.BoxListInfo.some(box => box.MATERIALPACKINGNAME === this.MATERIALPACKINGNAME)) {
						this.$showMessage("该标签已扫描，请不要重复扫描！");
						this.$nextTick(() => {
							this.MATERIALPACKINGNAME = ""
							this.focusBarCode = true
							this.focusShipRequest = false
						})
						this.$playFail()
						return;
					}
					var barCodeArr = this.MATERIALPACKINGNAME.split("|");
					// 470110856|1|C|75mm*1000m|SHBP01JT1202305240009|20230524|11|75
					if (barCodeArr.length < 7) {
						this.$showMessage("条码规则不符合需求!")
						this.$nextTick(() => {
							this.MATERIALPACKINGNAME = ""
							this.focusBarCode = true
							this.focusShipRequest = false
						})
						this.$playFail()
						return;
					}
				this.$MyRequest('/api/NoInvoice/getSupplierChargeByPakingname', {
					MATERIALPACKINGNAME: this.MATERIALPACKINGNAME,
				}).then(res => {
					console.log(res.data.success)
					if (res.data.success) {
						this.BoxListInfo.push(res.data.resultObj[0]);
						console.log(res.data.resultObj[0])
						this.SUPPLIEROLD = res.data.resultObj[0].SUPPLIERCHARGE
						try {
							Vue.prototype.$playSuccess()
						} catch (e) {}
						this.$nextTick(() => {
							this.focusPakcingName = false
							this.focusNew = true
						})
					} else {
						this.$showMessage(res.data.message)
						this.MATERIALPACKINGNAME = ""
						try {
							Vue.prototype.$playFail()
						} catch (e) {}
						this.$nextTick(() => {
							this.focusPakcingName = true
							this.focusNew = false
						})
						
					}
					
				}).catch(err => {
					this.loading = false;
					this.$showMessage(err)
					this.$nextTick(() => {
						this.MATERIALPACKINGNAME = ""
						this.focusPakcingName = true
						this.focusNew = false
					})
					try {
						Vue.prototype.$playFail()
					} catch (e) {}
				});
			},
			
			confirmNewSupplierCharge() {
				if(this.MATERIALPACKINGNAME !== null && this.SUPPLIEROLD !== null) {
					// this.SUPPLIERNEWMIDDLE = this.SUPPLIEROLD
					try {
						Vue.prototype.$playSuccess()
					} catch (e) {}
					this.BoxListInfoMiddle = [...this.BoxListInfo];
					this.BoxListInfo = []
					for (var i = 0; i < this.BoxListInfoMiddle.length; ++i) {
						if(this.BoxListInfoMiddle[i].MATERIALPACKINGNAME === this.MATERIALPACKINGNAME) {
							this.BoxListInfoMiddle[i].SUPPLIERCHARGE = this.SUPPLIERNEW
							this.bqts = this.BoxListInfoMiddle.length
							this.BoxListInfo = this.BoxListInfoMiddle
						}
					}
				}
				this.$nextTick(() => {
					this.focusPakcingName = true
					this.focusNew = false
					this.MATERIALPACKINGNAME = ""
					this.SUPPLIEROLD = ""
					this.SUPPLIERNEW = ""
				})
			},
	
			resetValue() {
				this.MATERIALPACKINGNAME = "";
				this.BoxListInfo = [];
				this.RECEIVEACTNO = "";
				this.MATERIALSPECNAME = "";
				this.PHASE = "";
				this.SPECNAME = "";
				this.DESC_CN = "";
				this.CHARGE = "";
				THIS.LOCATIONNAME = "";
			}
		}
	}
</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>