<template>
	<u-mask class="stockModal" :show="isShow" :mask-click-able="false">
		<view class="modal-con">
			<view class="modal-title">以下产品库存不足<br/>确认继续补货吗？</view>
			<scroll-view scroll-y class="modal-main">
				<view class="modal-box" v-for="(item, index) in list" :key="index">
					<view class="modal-p-header">
						<view class="modal-p-code">{{item.product&&item.product.code?item.product.code:'--'}}</view>
						<view class="modal-p-num">
							库存<text class="txt-red">{{item.stockQty||item.stockQty==0?item.stockQty:'--'}}</text>/
							补货<text class="txt-main">{{item.qty||(item.confirmQty||item.confirmQty==0?item.confirmQty:'--')}}</text>
							{{item.product&&item.product.unit?item.product.unit:'--'}}</view>
					</view>
					<view class="modal-p-footer">{{item.product&&item.product.name?item.product.name:'--'}}</view>
				</view>
			</scroll-view>	
			<view class="modal-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
			},
			list: { //  库存不足产品信息
				type: Array,
				default: () => {
					return []
				}
			},
			params: {
			  type: Object,
			  default: () => {
			    return {}
			  }
			}
		},
		data() {
			return {
				isShow: this.openModal, //  是否打开弹框
			}
		},
		methods: {
			// 确认
			handleConfirm(){
				this.$emit('confirm', this.params)
			}
		},
		watch: {
			//  父页面传过来的弹框状态
			openModal (newValue, oldValue) {
				this.isShow = newValue
			},
			//  重定义的弹框状态
			isShow (newValue, oldValue) {
			  if (!newValue) {
			    this.$emit('close')
			  }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.stockModal{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		.modal-con{
			width: 78%;
			margin: 40% auto 0;
			background-color: #fff;
			border-radius: 24upx;
			.modal-title{
				text-align: center;
				font-size: 28upx;
				color: #000;
				padding: 30upx 30upx 0;
			}
			.modal-main{
				padding: 30upx 20upx 40upx;
				box-sizing: border-box;
				height: 400upx;
				overflow: hidden;
				.modal-box{
					padding: 20upx 0;
					border-top: 1upx dashed #E5E5E5;
					.modal-p-header{
						display: flex;
						justify-content: space-between;
						align-content: center;
						color: #999999;
						margin-bottom: 20upx;
						.modal-p-num{
							.txt-red{
								color: red;
							}
							.txt-main{
								color: #000;
							}
						}
					}
				}
			}
			.modal-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>
