<template>
	<view style=" ">
		<uni-drawer ref="showRight" mode="left" :mask-click="true" :width="340">
			<view style="height:100vh;display:flex;flex-direction:column;">
				<view class="" style=" display:flex; background-color:#007AFF ;
				flex-direction: row;
				align-items: center;
				
				justify-content: center;
				">
					<view class="uni-flex" style="
					color: #fff; 
					padding: 20rpx;
					font-size: 35rpx;">
						先进先出查询
					</view>
					<view class="" @click="closeDrawer" style="position: fixed; color: #fff; font-size: 35rpx;right: 0; padding-right: 15rpx;">
						关闭
					</view>
				</view>

				<scroll-view v-if="true"   style="height: calc(100vh - 180rpx)" scroll-y="true"  >
					<!-- <button @click="closeDrawer" type="primary">关闭Drawer</button> -->
					<!-- <view v-for="item in 110" :key="item">可滚动内容 {{ item }}</view> -->
					<view class="" style="margin: 10rpx; font-size: 35rpx;">
						物料号：
					</view>
					<view style=" margin: 10rpx; display: flex; align-items: center;">
						<uni-easyinput class="uni-mt-5" prefixIcon="search" v-model="itemCode" placeholder="请输入物料号"
							@clear="clearItemCode" ></uni-easyinput>
						<!-- <view>查询</view> -->
						<!-- <button  style="height: 80rpx; align-items: center; text-align: center;" type="primary" size="mini" >查询</button> -->
					</view>

					<view class="" style="margin: 10rpx; margin-top: 20rpx; font-size: 35rpx;">
						仓库：
					</view>
					<view style=" margin: 10rpx; display: flex; align-items: center;">
						<uni-easyinput class="uni-mt-5" prefixIcon="search" v-model="warehouseCode" placeholder="请输入仓库"
							 ></uni-easyinput>
					</view>

					<view v-for="(item, index) in itemCodeResult" :key="index" @click="selectItemCode(item)">
						<view class="" style="font-size: 30rpx; margin: 20rpx;">
							<view class="">
								({{index+1}}) 物料代码 : {{item.code}}
							</view>
							<view class="">
								名称 : {{item.name}}
							</view>
							<view class="">
								描述1 : {{item.desc1}}
							</view>
							<view class="">
								描述2 : {{item.desc1}}
							</view>
						</view>
						<view class="split_line"></view>
					</view>
					<scroll-view  v-if="tableData.length>0"
					
					:scroll-x="true"
					:scroll-y="true"
						style=" width: 340px; display: flex; align-items: center;  justify-content: center; ">
						
							<uni-table border stripe emptyText="暂无更多数据">
								<!-- 表头行 -->
								<uni-tr>
									<!-- <uni-th  align="left">批次</uni-th>
									<uni-th  align="left">库位</uni-th>
									<uni-th  align="left">状态</uni-th>
									<uni-th  align="left">数量</uni-th>
									<uni-th  align="left">单位</uni-th> -->
									<uni-th width="60" align="left">批次</uni-th>
									<uni-th width="60" align="left">库位</uni-th>
									<uni-th width="60" align="left">状态</uni-th>
									<uni-th width="100" align="left">数量</uni-th>
									<uni-th width="60" align="left">单位</uni-th>
								</uni-tr>
								<!-- 表格数据行 -->
								<uni-tr v-for="(item, index) in tableData" :key="index">
									<uni-td>{{item.batch}}</uni-td>
									<uni-td>{{item.locationCode}}</uni-td>
									<uni-td>{{statusDesc(item.inventoryStatus)}}</uni-td>
									<uni-td>{{item.totalQty}}</uni-td>
									<uni-td>
									<uom :uom="uom"></uom>
									</uni-td>
								</uni-tr>

							</uni-table>
							<!-- <view class="uni-flex"   style=" flex-direction: column; position: fixed; bottom: 0;  margin-bottom: 100rpx; background-color: #fff; width: 100%; align-items: center;" >
								<view class="" style="width: 100%; display: flex;  justify-content: center; font-size: 32rpx;margin-top: 10rpx;margin-bottom: 10rpx;">
									<view class="" >当前页：{{ current }}，总数：{{ total }}条，每页：{{ pageSize }}
								</view>
								
								</view>
								<uni-pagination :current="current" :total="total" :show-icon="true"
									@change="change" />
							</view> -->


					</scroll-view>

				</scroll-view>

				<button @click="query" type="primary" style="padding-left: 20rpx; width: 100%;">查询</button>
			</view>

		</uni-drawer>
		<comMessage ref="comMessage"></comMessage>
	</view>
</template>

<script>
	import {
		getBasicItemByCodeSenior,
		getBalanceByBusinessType,
		getBasicItemByCode
	} from '@/api/request2.js';

	import {
		getInventoryStatusStyle,
		getInventoryStatusName
	} from '@/common/directory.js';
	
	import uom from '@/mycomponents/qty/uom.vue'

	export default {
		components: {uom},

		data() {
			return {
				itemCode: "",
				itemCodeResult: [],
				current: 1,
				total: 18,
				tableData: [],
				warehouseCode:"",
				areaCode:"",
				uom:""
			}
		},
		props: {
			// detail: {
			// 	type: Object,
			// 	default: {}
			// },
			businessTypeCode: {
				type: String,
				default: ""
			}
		},
		watch: {

		},
		methods: {
			statusStyle: function(val) {
				return getInventoryStatusStyle(val);
			},
			statusDesc(value) {
				return getInventoryStatusName(value)
			},
			change() {

			},
			showErrorMessage(message) {
				this.$refs.comMessage.showErrorMessage(message, res => {
					if (res) {

					}
				});
			},
			selectItemCode(item) {
				this.itemCode = item.code
				this.itemCodeResult = []
				this.getBalanceByBusiness(this.itemCode, this.businessTypeCode)
			},
			clearItemCode() {
				this.itemCode = ""
				this.itemCodeResult = []
				this.tableData = []
			},
			onConfirmItemCode() {
				if (!this.itemCode) {
					this.showErrorMessage("物料号为空,请先输入物料号")
					return;
				}
				this.tableData = []
				uni.showLoading({
					title: "加载中",
					mask: true
				})

				getBasicItemByCodeSenior(this.itemCode).then(res => {
					if (res.data && res.data.list.length > 0) {
						if (res.data.list.length == 1) {
							this.itemCode = res.data.list[0].code
							this.getBalanceByBusiness(this.itemCode, this.businessTypeCode)
						} else {
							uni.hideLoading()
							this.itemCodeResult = res.data.list
						}
					} else {
						uni.hideLoading()
						this.showErrorMessage("未查找到物料[" + this.itemCode + "]")
					}

				}).catch(error => {
					uni.hideLoading()
					this.showErrorMessage(error)
				})
			},
			getBalanceByBusiness(itemCode, businessType) {
				var params = {
					itemCode: itemCode,
					businessType: businessType,
					inOrOut: "out"
				}
				getBalanceByBusinessType(params).then(res => {
					uni.hideLoading()
					if (res.data && res.data.length > 0) {
						this.tableData = res.data
					} else {
						this.showErrorMessage("系统异常:按" + res.msg + "未查找到库存")
					}

				}).catch(error => {
					uni.hideLoading()
					this.showErrorMessage(error)
				})
			},

			showDrawer() {
				this.$refs.showRight.open();
			},
			closeDrawer() {
				this.$refs.showRight.close();
			},
			query(){
				if(this.itemCode==""){
					this.showErrorMessage("物料代码为空,请输入物料代码")
					return;
				}
				
				if(this.warehouseCode==""){
					this.showErrorMessage("仓库代码为空,请输入仓库代码")
					return;
				}
				uni.showLoading({
					title:"查询中",
					mask:true
				})
				this.uom=""
				getBasicItemByCode(this.itemCode).then(res=>{
					if(res.data&&res.data.list.length==1){
						this.uom =res.data.list[0].uom
						this.queryBalance()
					}else {
						uni.hideLoading()
						this.showErrorMessage("未查询到物料号"+[this.itemCode]+"的信息")
					}
				}).catch(error=>{
					uni.hideLoading()
					this.showErrorMessage(error)
				})
				
				
			},
			queryBalance(){
				var params ={
					itemCode: this.itemCode,
					warehouseCode:this.warehouseCode,
					businessType: this.businessTypeCode,
					inOrOut: "out"
				}
				getBalanceByBusinessType(params).then(res => {
					uni.hideLoading()
					if (res.data && res.data.length > 0) {
						this.tableData = res.data
					} else {
						this.showErrorMessage("系统异常:按" + res.msg + "未查找到库存")
					}
				
				}).catch(error => {
					uni.hideLoading()
					this.showErrorMessage(error)
				})
			}
			
			
		}
	}
</script>

<style>
</style>