<template>
	<view class="stock-wrap">
		<!-- 库存查询 -->
		<view class="stock-con" v-if="$hasPermissions('M_stockQuery_mobile')">
			<u-form :model="form" ref="uForm" label-width="80">
				<u-form-item label="条形码"><u-input v-model.trim="form.productQrCode" placeholder="请扫描或输入条形码" input-align="left" /></u-form-item>
				<u-form-item label="产品编码"><u-input v-model.trim="form.productCode" placeholder="请输入产品编码" input-align="left" /></u-form-item>
				<u-form-item label="产品名称"><u-input v-model.trim="form.productName" placeholder="请输入产品名称" input-align="left" /></u-form-item>
			</u-form>
			<view class="form-footer-btn">
				<u-button size="medium" shape="circle" hover-class="none" @click="handleClean">清空</u-button>
				<u-button size="medium" hover-class="none" shape="circle" :loading="loading" :custom-style="customBtnStyle" @click="handleSearch">查询</u-button>
			</view>
		</view>
		<view class="p-body" v-if="listData.length">
			<uni-table border emptyText="暂无数据" :loading="loading" >
				<!-- 表头行 -->
				<uni-tr>
					<uni-td width="25%" align="center">产品编码</uni-td>
					<uni-td width="25%" align="center">可用库存</uni-td>
					<uni-td width="25%" align="center">冻结库存</uni-td>
					<uni-td width="25%" align="center">仓库/仓位</uni-td>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="item in listData" :key="item.productSn" @click="toDetail(item)">
					<uni-td width="25%" align="center">{{item.productCode||'-'}}</uni-td>
					<uni-td width="25%" align="center">{{item.currentQty}}</uni-td>
					<uni-td width="25%" align="center">{{item.freezeQty}}</uni-td>
					<uni-td width="25%" align="center">{{item.warehouseName}}/<view>{{item.warehouseLocationName}}</view></uni-td>
				</uni-tr>
			</uni-table>
		</view>
		
		<scanCode></scanCode>
	</view>
</template>

<script>
	import scanCode from '@/libs/scan-code.vue';
	import { dealerProductTypeList , stockDetailList } from '@/config/api'
	import { playAudio, toThousands } from '@/libs/tools.js'
	export default{
		components: { scanCode },
		data(){
			return {
				form: {
					productCode: '', //  产品编码
					productQrCode: '', // 条形码
					productName: '', //  产品名称
					enableFlag: true,
					zeroQtyFlag: false,
					minCurrentQty: 1
				},
				customBtnStyle: {  //  自定义按钮样式
					backgroundColor: '#335fb6',
					color: '#fff'
				},
				listData: [],
				toThousands,
				loading: false
			}
		},
		onLoad() {
			var _this = this
			uni.$on('scancodedate', function(content) {
			  console.log("扫描到的内容为:", content)
			  _this.form.productQrCode = content||''
			  if(content){
				  _this.form.productCode = ''
				  _this.form.productName = ''
				  _this.handleSearch()
			  }else{
				  _this.$message("扫描失败，请重试！")
				  playAudio('error')
			  }
			})
		},
		onUnload() {
			uni.$off('scancodedate')
		},
		methods: {
			$message(msg){
				uni.showToast({
					icon: 'none',
					title: msg
				})
			},
			// 表单清空
			handleClean(){
				this.form.productCode = ''
				this.form.productQrCode = ''
				this.form.productName = ''
				this.listData = []
			},
			// 查询
			handleSearch(){
				if(this.form.productQrCode||this.form.productCode||this.form.productName){
					let params = {
						minCurrentQty:1,
						dealerProduct: {
							"qrCode": this.form.productQrCode,
							"code": this.form.productCode,
							"name": this.form.productName
						},
						pageNo: 1,
						pageSize: 100
					} 
					console.log(params)
					this.loading = true
					stockDetailList(params).then(res => {
						console.log(res)
						if(res.status == 200){
							this.listData = res.data.list
						}else{
							this.listData = []
						}
						if(this.listData.length==0){
							this.$message('没有查询到产品')
						}
						 
						this.loading = false
					})
				}else{
					this.$message("请输入查询条件")
					playAudio('warn')
				}
			},
			toDetail(item){
				this.$store.state.vuex_tempData = item
				uni.navigateTo({
					url: "/pages/stock/stockDetail"
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #f8f8f8;
	}
	.stock-wrap{
		.stock-con{
			background-color: #ffffff;
			padding: 20upx;
			border-radius: 20upx;
			.stock-tit{
				font-weight: bold;
				.u-line{
					display: inline-block;
					width: 6upx;
					height: 30upx;
					vertical-align: bottom;
					margin: 0 10upx;
					border-radius: 5upx;
				}
				border-bottom: 1px solid #eee;
			}
			.form-footer-btn{
				margin: 20upx 30upx;
				display: flex;
				justify-content: space-between;
			}
			.form-footer-btn uni-button{
				width: 40%;
				margin: 0 auto;
				font-size: 30upx;
			}
		}
		.p-body{
			background-color: #ffffff;
			padding: 10upx 20upx;
			border-radius: 20upx;
			margin-top: 20upx;
			height: 60vh;
			overflow: auto;
		}
	}
</style>
