<template>
	<view style="margin: 10rpx;">
		<u-navbar back-text="返回" title="库存查询" :background="background"></u-navbar>
		<view style="margin: 20rpx;">
			<checkbox-group @change="bh">
				<label>
					<checkbox value="cb" style="padding-right: 25rpx;" /> <text>查询条件</text>
				</label>
			</checkbox-group>
		</view>
		<u-form ref="testForm" >
			<u-row align="left" style="margin-left: 54rpx;margin-top: 20rpx" v-if="false">
				<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" v-if="bhShow">
				<label>选择仓库:</label>&nbsp;&nbsp;&nbsp;&nbsp;
				<zxzUniDataSelect filterable v-model="ERPLOCATION" :localdata="items" @change="change">
				</zxzUniDataSelect>
			</u-form-item>
			<u-form-item :border-bottom="false" v-if="bhShow">
				<label>选择库位:</label>&nbsp;&nbsp;&nbsp;&nbsp;
				<zxzUniDataSelect filterable v-model="LOCATIONNAME" :localdata="items_Location"></zxzUniDataSelect>
			</u-form-item>
			<u-form-item :border-bottom="false" v-if="bhShow">
				<p>输入物料 : </p>
				<u-input  @input="getSdkInfo" v-model="LMATERIALSPECNAME" placeholder="请输入物料" />
			</u-form-item>
			<u-form-item class="item2" v-if="bhShow">
				<p>SDK规格:</p>
				<zxzUniDataSelect @change="getMATERIALSPECNAME" filterable v-model="sdk_id" :localdata="sdkList">
				</zxzUniDataSelect>
			</u-form-item>
			<u-form-item :border-bottom="false" v-if="bhShow">
				<p>输入品名 : </p>
				<u-input v-model="DESC_CN" placeholder="请输入品名" />
			</u-form-item>
			<u-form-item :border-bottom="false" >
				<p>扫描条码:</p>
				<u-input :border="true" v-model="MATERIALPACKINGNAME" placeholder="请扫描条码" :focus="focusBarCode"
					@confirm="ScanFGBarCode" />
			</u-form-item>
		</u-form>
		<br />
		<u-button @click="ScanFGBarCode" type="primary" :loading="loading">查询</u-button>
		<br />
		<u-row>
			<u-col span="3"><label>标签数量：</label> </u-col>
			<u-col span="2"><label>{{MATERIALPACKINGQTY}}</label> </u-col>
			<u-col span="3"><label style="text-align: right;">数量总和：</label> </u-col>
			<u-col span="4"><label>{{QTYNUMBER}}</label> </u-col>
		</u-row>
		<br />
		<view class="card-list">
			<view class="card" v-for="(item, index) in BoxListInfo" :key="index">
				<!-- 卡片内容，同上 -->
				<view class="card-content">
					<div>
						<text class="card-description"> 批次:   {{ item.CHARGE }}   品质状态:  {{ item.OQARESULT }}</text>
					</div>
					<div>
						<text class="card-description"> 料号:  {{ item.MATERIALSPECNAME }}</text>
						<!-- <text class="card-description"> 规格:  {{ item.DESCRIPTION }}</text> -->
						<text class="card-description"> 阶段:  {{ item.PHASE }}</text>
						<text class="card-description"> SDK规格:  {{ item.SPECNAME }}</text>
					</div>
					<div>
						<text class="card-description"> 品名:  {{ item.DESC_CN }}</text>
					</div>
					<div>
						<text class="card-description"> 实际规格:  {{ item.TRUEGG }}     备货单号:  {{ item.SHIPREQUESTNAME }}</text>
					</div>
					<div>
						<text class="card-description"> 仓库:  {{ item.ERPLOCATION }}</text>
					</div>
					<div>
						<text class="card-description"> 货位:  {{ item.LOCATIONNAME }}</text>
					</div>
					<div>
						<text class="card-description"> 数量:  {{ item.MATERIALQUANTITY }}  {{ item.UNIT }}  锁定状态: {{item.HOLDSTATE}} </text>
					</div>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import zxzUniDataSelect from "@/components/zxz-uni-data-select/zxz-uni-data-select.vue"
	export default {
		components: {
			zxzUniDataSelect
		},
		data() {
			return {
				sdk_id:'',
				sdkList:[],
				orgObject: {
					ERPFACTORY: '',
					DESCRIPTION: ''
				}, // 组织对象
				datamodel: '',
				bhShow: false,
				LocationName: '', //库位信息
				LMATERIALSPECNAME: '', //输入物料信息
				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: '', //阶段
				QTY: '', //数量
				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: "", //卷芯
				focusBarCode: true, //焦点是否被选中
				focusShipRequest: true, //默认焦点在单号
				siteName: "",
				userId: "",
				items: [],
				items_Location: [],
				MATERIALPACKINGQTY: '',
				QTYNUMBER: '',
			}
		},

		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.getERPLocation();
		},

		methods: {
			getMATERIALSPECNAME() {
				if (!this.LMATERIALSPECNAME) {
					this.$showMessage("请输入物料！")
					return;
				}
			},
			getSdkInfo() {
				this.sdkList = []
				this.$MyRequest('/label/getSDKSPEC', {
					materialSpecName: this.LMATERIALSPECNAME
				}).then((res) => {
					// this.sdkListAll = res.resultObj;
					// this.locatioNFilter('1')
					this.sdkList = res.data.resultObj;
				})
			},
			bh(e) {
				let value = e.detail.value[0]
				console.log(value)
				if (value == 'cb') {
					this.bhShow = true
				} else {
					this.bhShow = false
				}
			},
			change(e) {
				this.ERPLOCATION = e.value;
				this.LOCATIONNAME = ""
				this.getLocationName();
			},
			//获取焦点的公共方法
			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)
					}
				});
			},
			getLocationName() {
				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
								});

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

			},

			ScanFGBarCode() {				
				// console.log(1231321)
				if(!this.MATERIALPACKINGNAME) {
					if(!this.ERPLOCATION && !this.LOCATIONNAME && !this.LMATERIALSPECNAME && !this.DESC_CN && !this.sdk_id) {
						this.$showMessage("查询条件不能都为空!")
						this.BoxListInfo = []
						return;
					}
				}
				
				this.focusBarCode = false;
				this.BoxListInfo = [];
				this.$MyRequest('/invoice/getMaterialQuery', {
					MATERIALPACKINGNAME: this.MATERIALPACKINGNAME,
					ERPLOCATION: this.ERPLOCATION,
					LOCATIONNAME: this.LOCATIONNAME,
					MATERIALSPECNAME: this.LMATERIALSPECNAME,
					DESC_CN: this.DESC_CN,
					SDK_ID: this.sdk_id
				}).then(res => {
					if (res.data.success) {
						this.BoxListInfo = res.data.resultObj;
						this.MATERIALPACKINGQTY = this.BoxListInfo.length
						this.QTYNUMBER = 0
						for (let i = 0; i < this.BoxListInfo.length; i++) {
							this.QTYNUMBER = parseFloat(this.QTYNUMBER) + (parseFloat(this.BoxListInfo[i]
								.MATERIALQUANTITY == '' ? '0' : this.BoxListInfo[i].MATERIALQUANTITY))
						}
					} else {
						try {
							Vue.prototype.$playFail()
						} catch (e) {}
						this.$showMessage(res.data.message)
					}
					this.$nextTick(() => {
						this.MATERIALPACKINGNAME = ""
						this.focusBarCode = true
						this.focusShipRequest = false
					})
				}).catch(err => {
					try {
						Vue.prototype.$playFail()
					} catch (e) {}
					this.$showMessage(err)
					this.$nextTick(() => {
						this.MATERIALPACKINGNAME = ""
						this.focusBarCode = true
						this.focusShipRequest = false
					})

				});
			},



			getActBindBox() {
				if (this.RECEIVEACTNO == "") {
					this.$showMessage("入库单号为空")
					return;
				}
				this.$MyRequest('/FGStockIn/getActBindBox', {
					RECEIVEACTNO: this.RECEIVEACTNO,
				}).then(res => {
					if (res.data.success) {
						var _Arr = res.data.resultObj;
						this.BoxListInfo = _Arr;
					} else {
						this.$showMessage(res.data.message)
					}
					this.focusBarCode = true
					this.focusShipRequest = false
				}).catch(err => {
					this.$showMessage(err)
				});
			},


			resetValue() {
				this.MATERIALPACKINGNAME = "";
				this.BoxListInfo = [];
				this.RECEIVEACTNO = "";
				this.MATERIALSPECNAME = "";
				this.PHASE = "";
				this.SPECNAME = "";
				this.DESC_CN = "";
				this.CHARGE = "";
			}
		}
	}
</script>

<style lang="scss">
	switch {
		color: #FFCC33;
	}
.card-description {  
    margin: 8px; /* 使用margin代替<br/>来添加垂直间距 */  
}  

// .card-list {
// 	  background-color: #aaaa00; /* 卡片背景色 */  
// }
.card {  
    margin-bottom: 16px; /* 卡片之间的间距 */  
    padding: 12px; /* 卡片内部的内边距 */  
    background-color: #aaaa7f; /* 卡片背景色 */  
    border-radius: 8px; /* 卡片边框圆角 */  
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 卡片阴影效果 */  
}
	/* 基础样式 */
	.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>
