<template>
	<view class="stock-wrap">
		<!-- 库存查询 -->
		<view class="stock-con" v-if="$hasPermissions('M_stockQuery_mobile')">
			<u-form :model="form" ref="uForm" label-width="100">
				<u-form-item label="条形码"><u-input v-model.trim="form.productQrCode" border="bottom" placeholder="请输入条形码" input-align="right" /></u-form-item>
				<u-form-item label="产品编码"><u-input v-model.trim="form.productCode" border="bottom" placeholder="请输入产品编码" input-align="right" /></u-form-item>
				<u-form-item label="产品名称"><u-input v-model.trim="form.productName" border="bottom" placeholder="请输入产品名称" input-align="right" /></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" :custom-style="customBtnStyle" @click="handleSearch">查询</u-button>
			</view>
		</view>
		<!-- 查询结果 -->
		<view class="stockDetail-info" v-if="listData">
			<view class="info-item flex align_center justify_between">
				<view class="info-name">产品编码</view>
				<view>{{listData && listData.productCode || '--'}} <copyText :text="listData.productCode" label="产品编码"></copyText></view>
			</view>
			<view class="info-item flex align_center justify_between">
				<view class="info-name">产品名称</view>
				<view>{{listData && listData.productName || '--'}} <copyText :text="listData.productName" label="产品名称"></copyText></view>
			</view>
			<view class="info-item flex align_center justify_between">
				<view class="info-name">条形码</view>
				<view>{{listData && listData.productQrCode || '--'}} <copyText :text="listData.productQrCode" label="条形码"></copyText></view>
			</view>
			<view class="info-item flex align_center justify_between">
				<view class="info-name">库存数量</view>
				<view>{{toThousands(listData.currentStockQty||0)}}{{listData.productUnit}}</view>
			</view>
			<view class="info-item flex align_center justify_between">
				<view class="info-name">仓库/仓位</view>
				<view>{{listData && listData.putBizTypeDictValue || '--'}}</view>
			</view>
			<view class="info-item flex align_center justify_between">
				<view class="info-name">产品分类</view>
				<view>{{listData && listData.putBizTypeDictValue || '--'}}</view>
			</view>
			<view class="info-item flex align_center justify_between">
				<view class="info-name">单位</view>
				<view>{{listData && listData.putBizTypeDictValue || '--'}}</view>
			</view>
			<view class="info-item flex align_center justify_between">
				<view class="info-name">产品图片</view>
				<view>{{listData && listData.putBizTypeDictValue || '--'}}</view>
			</view>
		</view>
		
		<scanCode></scanCode>
	</view>
</template>

<script>
	import scanCode from '@/libs/scan-code.vue';
	import { dealerProductTypeList , stockList } from '@/config/api'
	import copyText from '@/pages/common/copyText.vue'
	import { toThousands } from '@/libs/tools'
	export default{
		components: { scanCode, copyText },
		data(){
			return {
				form: {
					productCode: '', //  产品编码
					productQrCode: '', // 挑选码
					productName: '', //  产品名称
					productOrigCode: '', //  原厂编码
					productBrandSn: undefined, //  产品品牌
					productTypeSn1: undefined, //  产品分类1
					productTypeSn2: undefined, //  产品分类2
					productTypeSn3: undefined, //  产品分类3
					zeroQtyFlag: false ,//  库存情况
					enableFlag: true, // 显示禁用产品
					minUnsalableDays: undefined, // 滞销天数最小值
					maxUnsalableDays: undefined // 滞销天数最大值
				},
				customBtnStyle: {  //  自定义按钮样式
					backgroundColor: '#335fb6',
					color: '#fff'
				},
				listData: null,
				toThousands
			}
		},
		onLoad() {
			var _this = this
			uni.$on('scancodedate', function(content) {
			  console.log("扫描到的内容为:", content)
			  _this.form.productQrCode = content||''
			  _this.handleSearch()
			})
		},
		onUnload() {
			uni.$off('scancodedate')
		},
		onShow() {
			// 是否默认包括禁用产品
			const a = uni.getStorageSync('productEnabledFlag-' + this.$store.state.vuex_userData.orgId)
			this.form.enableFlag = typeof a == 'boolean' ? a : true
		},
		methods: {
			$message(msg){
				uni.showToast({
					icon: 'none',
					title: msg
				})
			},
			// 表单清空
			handleClean(){
				this.form.productCode = ''
				this.form.productQrCode = ''
				this.form.productName = ''
				this.form.productOrigCode = ''
				this.form.productBrandSn = undefined
				this.form.productTypeSn1 = undefined
				this.form.productTypeSn2 = undefined
				this.form.productTypeSn3 = undefined
				this.form.zeroQtyFlag = false
				this.form.minUnsalableDays = undefined // 滞销天数最小值
				this.form.maxUnsalableDays = undefined // 滞销天数最大值
				this.listData = null
			},
			// 查询
			handleSearch(){
				let params = this.form
				params.zeroQtyFlag = params.zeroQtyFlag ? '0' : ''
				params.enableFlag = params.enableFlag ? '' : '1'
				params.pageNo = 1
				params.pageSize = 1
				console.log(params)
				stockList(params).then(res => {
					console.log(res)
					if(res.status == 200){
						this.listData = res.data.list[0]
					}
					if(this.listData.length==0){
						this.$message("没有查询到产品")
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #f8f8f8;
	}
	.stock-wrap{
		padding: 0 30upx;
		.panel-box {
			background-color: #ffffff;
			padding: 20upx 20upx;
			border-radius: 20upx;
			.item-box{
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 14px;
			}
			margin-bottom: 20upx;
		}
		.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: 30upx;
				display: flex;
				justify-content: space-between;
			}
			.form-footer-btn uni-button{
				width: 40%;
				margin: 0 auto;
				font-size: 30upx;
			}
		}
		.stockDetail-info{
			background-color: #ffffff;
			padding: 10upx 20upx 20upx;
			border-radius: 20upx;
			box-shadow: 3upx 2upx 6upx #eee;
			.info-item{
				border-bottom: 1px dashed #e4e7ed;
				padding: 20upx 0;
				.info-name{
					color: #464646;
				}
			}
		}
	}
</style>
