<template>
	<view class="orderDetail-digitalShel flex flex_column">
		<view class="contHead">
			<view class="statusH">
				<view class="flex flex_column align_center">
					<view class="status-row">
						<u-icon :name="statusIcon" size="42" color="#333"> 
						</u-icon>
						<text>{{statusText}}</text>
					</view>
					<view class="messageText">{{statusMessage}}</view>
				</view>
			</view>
			<view class="flex align-center orderTj" v-if="info">
				<view>
					<view class="redText">{{info.totalQty}}</view>
					<view>总数量</view>
				</view>
				<view>
					<view>{{info.confirmQty}}</view>
					<view>已扫码</view>
				</view>
			</view>
		</view>
		<view class="order-body">
			<!-- 头部车辆信息 -->
			<div class="flex align-center cpb_header" v-if="info">
				<div>
					<u-image :src="info.vehicleLogo" border-radius="30" width="100" height="100" bg-color="#EBEBEB" ></u-image>
				</div>
				<div class="flex flex_column justify_center align_start">
					<view class="carModel flex align-center" v-if="info.vehicleNumber" >
						<view><carNo color="#0055ff" :val="info.vehicleNumber"></carNo></view>
						<text style="margin-left: 20rpx;" v-if="info.vehicleModel">{{info.vehicleModel.split(' ')[0]}}</text>
					</view>
					 <view class="carModel flex align-center" v-if="!info.vehicleNumber" >
						<text>{{info.vehicleModel}}</text>
					 </view>
					<div class="flex align-center">
						<div>VIN码：{{info.vin||'暂无'}}</div>
						<div v-if="info.vin" class="copyText" @click="copyVin"><span>复制</span></div>
					</div>
				</div>
			</div>
			<view class="info partList" v-if="partList.length">
				<view class="infoList">
					<view class="title">配件列表</view>
					<view>
						{{partList.length}}款，共<text class="redText">{{totalNums}}</text>件
					</view>
				</view>
				<view v-for="item in partList" :key="item.productSn" class="flex align-center item-list">
					<view>
						<u-image :src="item.images" border-radius="16" width="130" height="130" bg-color="#EBEBEB" ></u-image>
					</view>
					<view>
						<view class="item-name">
						  <text>{{item.productName}}</text>
						</view>
						<view class="item-nums">
							<text>{{item.productCode}}</text>
						</view>
						<view class="item-head">
							<view>
								数量：<text class="redText">{{item.totalQty}}</text>
								已扫：<text>{{item.confirmQty}}</text>
							</view>
							<text class="item-no">{{item.shelfPlaceCode}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="info" v-if="info">
				<view class="infoList">
					<view class="title">单据信息</view>
					<view class="statu"></view>
				</view>
				<view class="infoList dju">
					<text>取货单号</text>
					<text>{{info.shelfOrderNo||'--'}}</text>
				</view>
				<view class="infoList">
					<text>下单时间</text>
					<text>{{info.shelfOrderDate||'--'}}</text>
				</view>
				<view class="infoList">
					<text>下单人员</text>
					<text>{{info.orderPersonName || '--'}}</text>
				</view>
				<view class="infoList" v-if="info.orderNo">
					<text>关联工单编号</text>
					<text>{{info.orderNo || '--'}}</text>
				</view>
			</view>
		</view>
		<view class="footer flex align_center justify_center" v-if="info">
			<u-button v-if="info.billState != 'CLOSE'&&info.settleState=='WAIT'" :throttle-time="100" @click="deleteRow" shape="circle" type="info">取消订单</u-button>
			<u-button v-if="info.billState == 'WAIT'" :throttle-time="100" @click="sanCodeRow" :custom-style="{background:'#1283d4',color:'#fff'}" shape="circle" type="success">扫码取货</u-button>
		</view>
	</view>
</template>

<script>
	import carNo from '@/components/carNo.vue'
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import moment from 'moment'
	import { findBySnShelfOrder, cancelShelfOrder } from '@/api/shelf.js'
	import clipboard from "@/js_sdk/dc-clipboard/clipboard.js"
	export default {
	   name: 'orderDetail-digitalShel',
	   components: {
		uniIcons,
		carNo
	   },
	   data() {
		   return {
			   info: null,
			   statusText: '',
			   statusIcon: '', // 结算状态icon
			   statusMessage: '',
			   partList: [], // 配件列表
			   shelfOrderSn: null
		   }
	   },
	   onReady() {
	   },
	   onLoad(option) { 
		  this.shelfOrderSn = option.shelfOrderSn
	   },
	   onShow() {
	   	this.getDetail()
	   },
	   computed: {
		   totalNums(){
			   let ret = 0
			   this.partList.map(item => {
				   ret += item.totalQty
			   })
			   return ret
		   }
	   },
	   methods: {
		   // 复制
		   copyVin(){
			clipboard.setText(this.info.vin);
			uni.showToast({
				icon: 'none',
				title: 'vin码已复制成功'
			})
		   },
		 message(title){
		 	uni.showToast({
		 		icon:'none',
		 		title: title
		 	})
		 }, 
		 // 打开扫描取货
		 sanCodeRow () {
			 uni.navigateTo({
				url:"/pages/digitalShelf/scanBarcode/scanBarcode?shelfOrderSn="+this.shelfOrderSn
			 })
		  },
		  // 获取详情
		  getDetail(){
			  findBySnShelfOrder({sn: this.shelfOrderSn}).then(res => {
				  console.log(res,'++++++++')
				  if(res.status == 200){
					  this.info = res.data
					  this.partList = res.data.shelfOrderDetailList || []
					  if(this.info.billState == 'WAIT'){
						  this.statusText = '待取货'
						  this.statusIcon = 'hourglass-half-fill'
						  this.statusMessage = '请及时安排，以免逾期'
					  }
					  if(this.info.billState == 'FINISH'){
						  this.statusText = '已取货'
						  this.statusIcon = 'checkmark-circle'
						  this.statusMessage = ''
					  }
					  if(this.info.billState == 'CLOSE'){
						  this.statusText = '已取消'
						  this.statusIcon = 'close-circle'
						  this.statusMessage = ''
					  }
				  }
			  })
		  },
		  // 删除
		  delOrder(){
		  	cancelShelfOrder({
		  		sn: this.shelfOrderSn
		  	}).then(res => {
		  		console.log(res)
		  		if(res.status == 200){
					uni.navigateBack()
					uni.$emit("refreshOrder")
		  		}
		  		this.message(res.message)
		  	})
		  },
		  // 确认取消取货单
		  deleteRow () {
		    let _this = this
		    uni.showModal({
		  		title: '提示',
		  		content: '确认取消取货单吗？',
		  		success: (ret) => {
		  		  if(ret.confirm||ret.index==0){
		  			  _this.delOrder()
		  		  }
		  		}
		    })
		  },
	   }
	}
</script>

<style lang="less">
	page{
		height: 100%;
	}
	.orderDetail-digitalShel{
		height: 100%;
		.redText{
			color: #FB1E1E;
		}
		.order-body{
			flex-grow: 1;
			overflow: auto;
			.cpb_header{
				margin-top: 20rpx;
				background-color: #FFFFFF;
				padding: 30rpx 15rpx;
				> div{
					padding: 0 10rpx;
					&:first-child{
						padding-right: 10rpx;
						align-items: center;
					}
					> div{
						&:first-child{
							padding-right: 20rpx;
							flex-grow: 1;
							color: #818b94;
							font-size: 24rpx;
						}
					}
				}
				.copyText{
					background-color: #EBEBEB;
					border-radius: 100rpx;
					padding: 0 20rpx;
					color: #033692;
					font-size: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 20rpx;
				}
				.carTits{
					font-size: 32rpx;
					font-weight: bold;
					color: #222222;
					line-height: normal;
					margin-bottom: 10rpx;
					flex-grow: 1;
				}
				.qhbtns{
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 20rpx;
					color: #0485F6;
					border:2rpx solid #0485F6;
					border-radius: 50rpx;
					background: rgba(88, 177, 255, 0.2);
					width: 200rpx;
					height: 36rpx;
					margin-left: 10rpx;
				}
			}
			.partList{
				margin-top: 20rpx;
			}
		}
		.contHead {
			.statusH{
				> view{
					padding: 10upx 12%;
					font-size: 34upx;
				}
				.status-row{
					font-size: 42upx;
					text{
						margin-left: 10rpx;
					}
				}
				.messageText{
					font-size: 30upx;
					text-align: center;
					text{
						color: #ffaa00;
					}
					padding: 10rpx 0;
				}
			}
			.orderTj{
				padding: 0 20rpx 20rpx;
				background-color: #fff;
				> view{
					text-align: center;
					border-right: 2rpx solid #eee;
					width: 50%;
					color: #666E75;
					.redText{
						color: #FB1E1E;
					}
					&:last-child{
						border: 0;
					}
					> view{
						color: #666E75;
						&:first-child{
							font-size: 56rpx;
						}
					}
				}
				border-radius: 20rpx 20rpx 0 0;
			}
		}
		.info{
			background-color: #FFFFFF;
			padding: 10rpx 30upx;
			font-size: 32rpx;
			margin-bottom: 20rpx;
			.infoList{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 2rpx solid #f2f2f2;
				&:last-child{
					border: none;
				}
				.title{
					font-weight: bold;
				}
				> text{
					&:first-child{
						color: #666E75;
					}
				}
			}
			.item-list{
				border-bottom: 2rpx solid #f2f2f2;
				&:last-child{
					border: none;
				}
				> view{
					padding: 20rpx 0;
					&:first-child{
						margin-right: 20rpx;
						margin-top: 18rpx;
					}
					&:last-child{
						flex-grow: 1;
					}
				}
				.item-name{
					word-wrap: break-word;
					font-size: 32rpx;
					color: #333;
					font-weight: bold;
					margin-top: 10rpx;
				}
				.item-nums{
					padding: 10rpx 0;
					text{
						font-size: 32rpx;
						color: #222222;
					}
				}
				.item-head{
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #666;
					> view{
						&:first-child{
							font-size: 28rpx;
							text{
								margin-right: 30rpx;
							}
						}
					}
					.item-no{
						font-size: 28rpx;
						background: rgba(3, 54, 146, 0.15);
						color: #033692;
						border-radius: 100rpx;
						padding: 2rpx 30rpx;
						margin-right: 20rpx;
						display: block;
					}
				}
			}
		}
		.footer{
			padding: 20upx 60upx;
			background: #FFFFFF;
			button{
				&:after{
					border: 0;
				}
				color: #585858;
				font-size: 32rpx;
				margin: 0 20rpx;
				width: 320rpx;
			}
		}
	}
	
</style>
