<template>
	<u-mask class="productModal" :show="isShow" :mask-click-able="false">
		<view class="product-con">
			<view class="product-main">
				 <view class="p-title">
					 <text>[{{infoData.shelfPlaceCode}}]</text> {{infoData.productCode}}
				 </view>
				 <view class="p-info flex align_center">
					 <text>产品名称</text> {{infoData.productEntity.productName}}
				 </view>
				 <view class="p-info flex align_center">
				 	<text>单位</text> {{infoData.productEntity.unit}}
				 </view>
				 <view class="p-info flex align_center">
				 	<text>可用库存</text> {{infoData.qty}}
				 </view>
				 <view class="p-info flex align_center">
				 	<text>冻结库存</text>
					<view class="flex align_center">
						{{infoData.freezeQty}}
						<view v-if="infoData.freezeQty">
							<text>冻结明细</text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				 </view>
				 <view class="p-info flex align_center">
				 	<text>结算价格</text>
					<view>
						<text>{{infoData.price}}元</text>
					</view>
				 </view>
				 <view class="p-info flex align_center">
				 	<text>实际可用库存</text>
					<view>
						<view></view>
						<u-number-box v-model="infoData.checkQty" :index="infoData.id" :min="0" :max="999999"></u-number-box>
					</view>
				 </view>
			</view>
			<view class="product-footer">
				<view class="button-cancel" @click="isShow=false">取消</view>
				<view class="button-confirm" @click="handleConfirm">确定</view>
			</view>
		</view>
	</u-mask>
</template>

<script>
	export default {
		props: {
			openModal: { //  弹框显示状态
				type: Boolean,
				default: false
			},
			infoData: {
				tyoe: Object,
				default: ()=>{
					return null
				}
			},
		},
		data() {
			return {
				isShow: this.openModal, //  是否打开弹框
			}
		},
		methods: {
			// 确认
			handleConfirm(){
				if(this.infoData.checkQty){
					this.$emit('addProduct',{
						shelfSn: this.infoData.shelfSn,
						shelfPlaceSn: this.infoData.shelfPlaceSn,
						shelfPlaceCode: this.infoData.shelfPlaceCode,
						productCode: this.infoData.productCode,
						productSn: this.infoData.productSn,
						stockQty: this.infoData.stockQty,
						freezeQty: this.infoData.freezeQty,
						stockQty: this.infoData.qty,
						checkQty: this.infoData.checkQty,
						stockCheckDetailSn: this.infoData.stockCheckDetailSn || undefined,
						cost: this.infoData.cost
					})
				}else{
					uni.showToast({
						icon: "none",
						title: '请输入实际可用库存'
					})
				}
			},
		},
		watch: {
			//  父页面传过来的弹框状态
			openModal (newValue, oldValue) {
				this.isShow = newValue
			},
			//  重定义的弹框状态
			isShow (newValue, oldValue) {
				if (!newValue) {
					this.$emit('close')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.productModal{
		width: 100%;
		height: 100vh;
		font-size: 24upx;
		.text-c{
			text-align: center;
		}
		.product-con{
			width: 75%;
			margin: 25vh auto 0;
			background-color: #fff;
			border-radius: 24upx;
			.product-main{
				padding: 30upx;
				max-height: 50vh;
				overflow: auto;
				.p-title{
					padding: 15upx 20upx;
					background-color: #ededed;
					border-radius: 60upx;
					text-align: center;
					> text{
						margin-right: 15rpx;
					}
				}
				.p-info{
					padding: 20upx 10upx;
					> text{
						width: 150upx;
						color: #666;
					}
					> view{
						flex-grow:1;
						display: flex;
						justify-content: space-between;
						>view{
							> text{
								color:#55aaff;
							}
						}
					}
					border-bottom: 2rpx solid #eee;
				}
			}
			.product-footer{
				font-size: 30upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				text-align: center;
				border-top: 1upx solid #E5E5E5;
				.button-cancel{
					color: #999;
					border-right: 1upx solid #E5E5E5;
					flex-grow: 1;
					padding: 20upx 0;
				}
				.button-confirm{
					color: #2A86F4;
					flex-grow: 1;
					padding: 20upx 0;
				}
			}
		}
	}
</style>
