<template>
	<view>
		<u-navbar back-text="返回" title="调拨出库确认" :background="background"></u-navbar>
		<u-form ref="testForm">
			<u-form-item :border-bottom="false">
				<p>单号:</p>
				<u-select v-model="dlistShow" mode="single-column" value-name="id" :list="dlist"
					@confirm="selShipRequestName" confirm-text="确认选择" class="single-out" />
				<u-input :focus="focusShipRequest" :border="true" v-model="ShipRequestName" placeholder="请输入单号"
					@confirm="serachMaterialList" />
				<u-button @click="selectShipRequestName" type="primary" size="mini">选择单号</u-button>
			</u-form-item>
			<u-form-item :border-bottom="false">
				<p>条码:</p>
				<u-input :border="true" v-model="barCode" placeholder="请扫描条码" :focus="focusBarCode"
					@confirm="confirmBarcode" />
			</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-form>
		<!-- fit 列的宽度是否自撑开 -->
		<view>
			<zb-table
			style="height: 600upx;"
			ref="zbTable"
			:show-header="true"
			:columns="column"
			:stripe="true"
			:fit="false" 
			show-summary
			:highlight="true"
			:border="true"
			:data="BoxInfoList"
			:isShowLoadMore="true"
			:cell-style="cellStyleFn"
			@pullUpLoading="pullUpLoading"
			@edit="buttonEdit"
			@dele="dele"
			:pullUpLoading="pullUp"
			></zb-table>
		</view>
		<uni-load-more class="font-more" iconType="auto" :status="moreStatus" v-show="BoxInfoList.length && totalAll < pageSize" />
		<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>
	export default {
		data() {
			return {
				column:[ //列
					 // width:180
					{ name: 'CHARGE', label: '批次',align:'center',fixed:true,width:180},
					{ name: 'MATERIALSPECNAME', label: '料号'},
					{ name: 'DES_CN', label: '品名'},
					{ name: 'SDK_SPEC', label: '规格' },
					{ name: 'PHASE', label: '阶段',sorter:true },
					{ name: 'ERPLOCATION', label: '库位' },
					{ name: 'LOCATIONNAME', label: '货架' },
					{ name: 'MATERIALQUANTITY', label: '系统数量',sorter:true},
					{ name: 'MATERIALQUANTITY2', label: '发货数量',sorter:true},
					{ name: 'ISCHECK', label: '确认标识' },
					{ name: 'MATERIALPACKINGNAME', label: '条码',width:50},
					{ name: 'operation', type:'operation',label: '操作',renders:[
					              {
					                name:'编辑',
									size:'mini',
					                func:'edit' // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
					              },
					              {
					                name:'取消',
									size:'mini',
					                type:'warn',
					                func:"dele"
					              },
					            ]},
				],
				disableButton : false,
				pageNum: 1, // 页数
				pageSize: 8, // 条数
				total: 0, //每页总数
				totalAll:0,
				bqts : 0,
				bqkcs : 0,
				moreStatus:'more', // 上拉加载更多  more加载前 loading加载中	no-more没有更多数据
				flag: true, // 上拉加载开关 防止一次触底查询多次问题,防止数据查完后触底还调接口问题
				dlist: [{
					id: '',
					label: ''
				}], //选择内容
				dlistShow: false, //是否显示选择框				
				BoxInfoList: [],
				boxList : [],
				ShipRequestName: "",
				shipRequestType: "",
				barCode: "",
				userId: "",
				siteName: "",
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				focusBarCode: false, //焦点是否被选中
				focusShipRequest: true, //默认焦点在单号
			}
		},
		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
				}
			})
		},
		methods: {
			// 编辑发货数量
			buttonEdit(index, row) {
				// 打开编辑对话框，或者直接修改 this.tableData[index]
				console.log(this.BoxInfoList[row])
				if (this.BoxInfoList[row].ISCHECK != 'Y') {
					this.$showMessage("未备货标签不能修改发货数量")
					return
				}
				this.showInputDialog(row)
			},
			
			/**取消备货
			 * @param {Object} index
			 * @param {Object} row
			 */
			dele (index, row) {
				this.BoxInfoList[row].ISCHECK = 'N'
				this.BoxInfoList[row].MATERIALQUANTITY2 = this.BoxInfoList[row].MATERIALQUANTITY
			},
				
			  // 显示弹窗输入框
			showInputDialog(row) {
			      uni.showModal({
			        title: '请完成发货数量填写',
			        content: '',
			        editable:true,//是否显示输入框
					placeholderText:'请输入数量',//输入框提示内容
			        confirmText: '确认',
			        cancelText: '取消',
			        success: (res) => {
			          if (res.confirm) {
			            console.log('输入的内容：', res.content);
						if (Number(this.BoxInfoList[row].MATERIALQUANTITY) >= Number(res.content)) {
							this.BoxInfoList[row].MATERIALQUANTITY2 = res.content;
						} else {
							this.$showMessage("发货数量不能大于标签数量")
						}
			          }
			        } 
			      });
			    },
			// 设置是否审核的颜色状态
			cellStyleFn({row, column, rowIndex, columnIndex}) {
				return {backgroundColor: row.ISCHECK == 'Y' ? 'yellowgreen' : 'white'}
			},
			// 上拉刷新
			pullUp(done) {
				if(this.flag) {
					// this.moreStatus = 'loading' //加载中时的状态 转圈
					this.serachMaterialList()
					done('')
					this.moreStatus = 'more'
				}else {
					this.moreStatus = 'no-more'
					done('ok')
				}
			},
			pullUpLoading(){
				// this.$refs.zbTable.pullUpCompleteLoading('ok')	
			},
			selShipRequestName(e) {
				this.BoxInfoList = []
				this.pageNum = 1
				this.ShipRequestName = e[0].value;
				this.serachMaterialList();
			},
			serachMaterialList() {
				this.$MyRequest('/invoice/getShipReservedBoxInfo', {
					ShipRequestName: this.ShipRequestName,
					pageSize: this.pageSize,
					pageNum: this.pageNum
				}).then(res => {
					// 开始
					this.flag = true
					if (res.data.success) {
						const result = res.data.resultObj.list || [];
						const totalAll = res.data.resultObj.total;
						this.BoxInfoList = this.BoxInfoList.concat(result);
						if (result.length == 0 && this.pageNum == 1) {
							this.flag = false
						} else {
							this.pageNum += 1
							this.total = result ? result.length : 0
							console.log(this.total,this.pageSize)
							if (this.total < this.pageSize) {
								this.flag = false	
							}
						}
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						});
					}
					this.focusBarCode = true
					this.focusShipRequest = false
				}).catch(err => {
					this.$showMessage(err)
				})
			},
			tableRowStyleName({
				row
			}) {
				if (row.ISCHECK == 'Y') {
					return 'background-color: yellowgreen;';
				}
			},
			selectShipRequestName() {
				this.dlist = [];
				this.$MyRequest('/invoice/getShipList', {
					ShipRequestName: this.ShipRequestName,
					shipRequestType: "4Y"
				}).then(res => {
					if (res.data.success) {
						for (var i = 0; i < res.data.resultObj.length; i++) {
							console.log(res.data.resultObj[i].SHIPREQUESTNAME)
							this.dlist.push({
								id: res.data.resultObj[i].SHIPREQUESTNAME,
								label: res.data.resultObj[i].SHIPREQUESTNAME
							});

						}
						this.dlistShow = true;
					} else {
						this.$showMessage(res.data.message)
					}

				}).catch(err => {
					this.$showMessage(err)
				})
			},
			confirmBarcode() {
				let list = this.BoxInfoList;
				console.log(list)
				var errcount  = 0;
			    var LbarCode = this.barCode;
				this.focusBarCode = false;
				for (var i = 0; i < list.length; ++i) {
				console.log(this.BoxInfoList[i]['MATERIALPACKINGNAME']  + "***" + LbarCode)
					if (this.BoxInfoList[i]['MATERIALPACKINGNAME'] === LbarCode) {
						this.BoxInfoList[i]['ISCHECK'] = "Y"
						//this.barCode = ""
						//this.set(this.barCode,"")
					} else {
						console.log(this.BoxInfoList[i]['MATERIALPACKINGNAME']  + "****"   + LbarCode)
						errcount ++ 
					}
				}
				if (errcount == list.length) {
					this.$showMessage("标签不在发货范围内")
				}
				this.$nextTick(() =>{
					this.barCode = ""
					this.focusBarCode = true
					this.focusShipRequest = false
				})
				this.bqts = 0
				this.bqkcs = 0
				for (let i = 0; i < this.BoxInfoList.length; i++) {
					if (this.BoxInfoList[i]['ISCHECK'] == "Y") {
						this.bqts++
						this.bqkcs = this.bqkcs + parseFloat(this.BoxInfoList[i]['MATERIALQUANTITY2'])
					}
				}
				
			},
			ConfirmButton() {
				this.disableButton = true;
				console.log()
				let list = this.BoxInfoList;
				if (list <= 0) {
					this.disableButton = false;
					this.$showMessage("不存在需要提交的信息")
					return;
				}
				this.boxList = []
				for (var i = 0; i < list.length; ++i) {
					var judge = this.BoxInfoList[i]['ISCHECK']
					if (judge != "Y") {
					} else {
						this.boxList.push(this.BoxInfoList[i])
					}
				}
				if (this.boxList.length < 1) {
					this.disableButton = false;
					this.$showMessage("不存在需要出库的信息")
					return;
				}
				this.$MyRequest('/invoice/commitShipRequestName', {
					ShipRequestName: this.ShipRequestName,
					shipRequestType : "4Y",
					user: this.userId,
					siteName: this.siteName,
					boxList: this.boxList
				}).then(res => {
					this.disableButton = false;
					this.$showMessage(res.data.message) //执行出库后返回的消息
					this.focusShipRequest = true //获取焦点，好继续扫描
					this.focusBarCode = false
					this.BoxInfoList = []
					this.ShipRequestName = ""
				}).catch(err => {
					this.disableButton = false;
					//this.BoxInfoList = []; //请空条码
					this.focusShipRequest = true
					this.$showMessage(err)
					
				})
			}


		}
	}
</script>
<style>
	.single-out {
		pointerEvents: "none"
	}
	
</style>