<template>
	<view class="orderDetail-digitalShel flex flex_column">
		<view class="contHead">
			<view class="statusH">
				<view class="flex flex_column align_center" v-if="pageInfo&&pageInfo.billState=='WAIT_CHECK'">
					<view class="status-row">
						<u-icon name="hourglass-half-fill" size="48" color="#333"> </u-icon>
						<text>待入库</text>
					</view>
					<view style="width: 100%;">
						<view class="messageText"><text>配送发送：</text>{{pageInfo&&pageInfo.dispatchTypeValue?pageInfo.dispatchTypeValue:'--'}}</view>
						<view class="messageText"><text>出库备注：</text>{{pageInfo&&pageInfo.remarks?pageInfo.remarks:'--'}}</view>
					</view>
				</view>
				<view class="flex flex_column align_center" v-else>
					<view class="status-row">
						<u-icon name="checkmark-circle" size="48" color="#2196F3"> </u-icon>
						<text style="color: #2196F3;">已入库</text>
					</view>
					<view style="width: 100%;">
						<view class="messageText"><text>入库人员：</text>{{pageInfo&&pageInfo.confirmPersonName?pageInfo.confirmPersonName:'--'}}</view>
						<view class="messageText"><text>入库时间：</text>{{pageInfo&&pageInfo.putStockTime?pageInfo.putStockTime:'--'}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order-body">
			<view class="info partList">
				<!-- <view class="infoList">
					<view class="title">配件列表</view>
					<view>
						2款，共<text class="redText">11</text>件
					</view>
				</view> -->
				<view v-for="item in partList" :key="item.id" class="flex align-center item-list">
					<view>
						<u-image border-radius="16" width="130" height="130" bg-color="#EBEBEB" :src="item.images"></u-image>
					</view>
					<view>
						<view class="item-name">
						  <text>{{item.productName||'--'}}</text>
						</view>
						<view class="item-nums">
							<text>{{item.productCode||'--'}}</text>
						</view>
						<view class="flex align_center" v-if="item.productTypeSn3=='543766811373752320'" style="margin-top: 5px;">
							<text class="item-detail-text">原厂编码：</text>
							<view style="width: 50%;flex-grow: 1;">
								<u-tag :text="item.origCode" mode="light" borderColor="#ffffff" type="warning" size="large"></u-tag>
							</view>
						</view>
						<view class="item-nums flex align-center justify_end">
							<view v-if="pageInfo&&pageInfo.billState=='FINISH'">
								<text>入库数量：{{item.putQty||item.putQty==0?item.putQty:'--'}}</text>
							</view>
							<view v-else>
								<text>待入库数量：{{item.confirmQty||item.confirmQty==0?item.confirmQty:'--'}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from 'moment'
	import { findShelfReplenishBill } from '@/api/shelf.js'
	export default {
	   name: 'orderDetail-digitalShel',
	   components: {
	   },
	   data() {
		   return {
			   info: null,
			   statusText: '',
			   statusIcon: '', // 结算状态icon
			   partList: [], // 配件列表
			   pageInfo:null
		   }
	   },
	   onReady() {
	   	 
	   },
	   onLoad(option) {
		   console.log(option,option.sn)
		  let sn = option.sn
		  this.getPageInfo(sn)
	   },
	   computed: {
	   },
	   methods: {
		// 复制
		copyVin(){
			uni.setClipboardData({
				data: this.vinNumber||'',
			})
		},
		 message(title){
		 	uni.showToast({
		 		icon:'none',
		 		title: title
		 	})
		 }, 
		 // 查询详情
		 getPageInfo(val){
			uni.showLoading({
				title: "正在加载..."
			})
			findShelfReplenishBill({sn:val}).then(res=>{
				if(res.status==200){
					this.pageInfo=res.data||null
					this.partList=res.data.clzReplenishBillDetailApiEntityList||[]
				}
				uni.hideLoading()
			})
		 }
	   }
	}
</script>

<style lang="less">
	page{
		height: 100%;
		background-color: #F8F8F8;
	}
	.orderDetail-digitalShel{
		width: 100%;
		height: 100%;
		.redText{
			color: #FB1E1E;
		}
		.order-body{
			flex-grow: 1;
			overflow: auto;
		}
		.contHead {
			.statusH{
				> view{
					padding: 20upx 5%;
					font-size: 34upx;
				}
				.status-row{
					font-size: 42upx;
					text{
						margin-left: 10rpx;
					}
					margin-bottom: 20rpx;
				}
				.messageText{
					font-size: 30upx;
					padding: 10rpx 0;
					color: #666;
					text{
						color: #333;
					}
				}
			}
		}
		.info{
			padding: 0 30upx;
			font-size: 32rpx;
			.infoList{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 2rpx solid #f2f2f2;
				&:last-child{
					border: 0;
				}
				.title{
					font-weight: bold;
				}
				> text{
					&:first-child{
						color: #666E75;
					}
				}
			}
			.item-list{
				background-color: #FFFFFF;
				border-bottom: 2rpx solid #f2f2f2;
				padding: 25rpx;
				margin-bottom: 20rpx;
				border-radius: 20rpx;
				box-shadow: 2rpx 3rpx 5rpx #eee;
				&:last-child{
					border: none;
				}
				> view{
					&:first-child{
						margin-right: 20rpx;
					}
					&:last-child{
						flex-grow: 1;
					}
				}
				.item-name{
					word-wrap: break-word;
					font-size: 28rpx;
					color: #333;
					font-weight: bold;
					margin-top: 10rpx;
				}
				.item-nums{
					text{
						font-size: 28rpx;
						color: #666;
					}
				}
			}
		}
		.footer{
			padding: 20upx 30upx;
			background: #FFFFFF;
			uni-button{
				&:after{
					border: 0;
				}
				width: 100%;
				color: #585858;
				font-size: 32rpx;
			}
		}
	}
	
</style>
