<template>
	<u-mask class="productModal" :show="isShow" :mask-click-able="false">
		<view class="product-con" v-if="infoData">
			<view class="product-head">
				<view>
					修理厂提交以下订单，但未取货，请联系修理厂处理
				</view>
			</view>
			<scroll-view class="product-main" scroll-y>
				<view class="product-main-list">
					<view class="p-h1">
						<text>下单时间</text>
						<text>下单人员</text>
						<text>数量</text>
					</view>
					 <view class="p-row" v-for="item in list" :key="item.id">
						  <text>{{item.orderDate}}</text>
						  <text>{{item.orderPersonName}}</text>
						  <text>{{item.totalQty}}</text>
					 </view>
				</view>
			</scroll-view>
			<view class="product-footer">
				<view class="button-cancel" @click="isShow=false">关闭</view>
			</view>
		</view>
	</u-mask>
</template>

<script>
	import { queryWaitListByShelfSn } from '@/api/stockCheck'
	export default {
		props: {
			openModal: { //  弹框显示状态
				type: Boolean,
				default: false
			},
			infoData: {
				tyoe: Object,
				default: ()=>{
					return null
				}
			},
		},
		data() {
			return {
				isShow: this.openModal, //  是否打开弹框
				list: []
			}
		},
		methods: {
			// 获取列表数据
			getList(){
				queryWaitListByShelfSn({
					shelfSn: this.infoData.shelfSn,
					productSn:this.infoData.productSn,
				}).then(res => {
					if(res.status == 200){
						this.list = res.data||[]
					}
				})
			}
		},
		watch: {
			//  父页面传过来的弹框状态
			openModal (newValue, oldValue) {
				this.isShow = newValue
			},
			//  重定义的弹框状态
			isShow (newValue, oldValue) {
				if (!newValue) {
					this.$emit('close')
				}else{
					this.getList()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.productModal{
		width: 100%;
		height: 100%;
		.product-head{
			font-size: 22rpx;
			padding: 30upx 30upx 15upx;
			color: #666;
			font-weight: bold;
		}
		.product-con{
			width: 580rpx;
			margin: 18vh auto 0;
			background-color: #fff;
			border-radius: 22upx;
			.product-main{
				padding: 0 30upx 20upx 30upx;
				font-size: 22upx;
				height: 40vh;
				width: 520rpx;
				.product-main-list{
					> view{
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: 1upx solid #E5E5E5;
						padding: 15upx 0;
						> text{
							text-align: center;
							width: 33%;
						}
						&:last-child{
							border:0;
						}
					}
				}
				.p-h1{
					color: #999;
				}
			}
			.product-footer{
				font-size: 24upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				text-align: center;
				border-top: 1upx solid #E5E5E5; 
				.button-cancel{
					color: #00aaff;
					flex-grow: 1;
					padding: 20upx 0;
				}
			}
		}
	}
</style>
