<template>
	<view class="orderDetail-digitalShel flex flex_column">
		<view class="contHead" :style="{background:state!= 'error'&&state!= 'AUDIT_REJECT'&&state!='CANCEL' ? '#066cff':'#f34503',color:'#fff'}">
			<view class="statusH">
				<view class="flex flex_column align_center">
					<view class="status-row">
						<u-icon :name="statusIcon" size="42" color="#fff"> 
						</u-icon>
						<text>{{statusText}}</text>
					</view>
					<view class="messageText"><text>{{statusMessage}}</text></view>
				</view>
			</view>
		</view>
		<view class="order-body">
			<view class="info partList" v-if="partList.length" style="max-height: 50vh;overflow: auto;">
				<view class="infoList">
					<view class="title">
						产品列表
					</view>
					<view v-if="info">
						共<text class="cText">{{info.totalCategory}}</text>款
					</view>
				</view>
				<view v-for="(item,dix) in partList" :key="item.id" class="item-list-box">
					<view class="item-list flex">
						<view style="height: 160rpx;width: 160rpx;">
							<u-image :src="item.product.images+'?x-oss-process=image/resize,p_50'" border-radius="16" width="160" height="160" bg-color="#EBEBEB" ></u-image>
						</view>
						<view>
							<view class="item-name">
							  <text>{{item.product.productName}}</text>
							</view>
							<view class="item-nums" v-if="item.product&&item.product.origCode">
								<text style="color: #00aaff;">{{item.product.origCode}}</text>
							</view>
							<view class="item-nums" v-if="item.product&&item.product.code">
								<text>{{item.product.code}}</text>
							</view>
							<view class="item-head">
								<view class="flex align_center">
									<view class="price-txt">￥<text>{{item.priceStr[0]}}</text>.{{item.priceStr[1]}}</view>
									<view class="flex align_center rebate-tag" v-if="item.promoProductType=='TICKET_PRODUCT'">
										返<text>{{item.resultValue}}</text>元
									</view>
									<view class="flex align_center rebate-tag" v-if="item.promoProductType=='REGULAR_PRODUCT'">
										买{{item.conditionValue}}赠{{item.resultValue}}
									</view>
									<view class="flex align_center tejia-tag" v-if="item.promoProductType=='SPECIAL_PRODUCT'">
										特价<text>￥{{item.priceOrig}}</text>
									</view>
								</view>
								<view>
									X <text class="cText">{{item.qty}}</text>{{item.product&&item.product.unit||''}}
								</view>
							</view>
						</view>
					</view>
					<!-- 赠品 -->
					<view class="item-list flex gift-box" v-if="item.giftObj">
						<view style="height: 120rpx;width: 120rpx;margin-left: 40rpx;">
							<u-image :src="item.giftObj.product.images+'?x-oss-process=image/resize,p_50'" border-radius="16" width="120" height="120" bg-color="#EBEBEB" ></u-image>
						</view>
						<view>
							<view class="item-name flex align_center">
							  <view class="flex align_center rebate-tag">
							  	赠品
							  </view>
							  <text class="ellipsis-one">{{item.giftObj.product.productName}}</text>
							</view>
							<view class="item-nums ellipsis-one" v-if="item.giftObj.product&&item.giftObj.product.origCode">
								<text style="color: #666;">{{item.giftObj.product.origCode}}</text>
							</view>
							<view class="item-nums ellipsis-one" v-if="item.giftObj.product&&item.giftObj.product.code">
								<text>{{item.giftObj.product.code}}</text>
							</view>
							<view class="item-head">
								<view class="flex align_center"></view>
								<view>
									X <text class="cText">{{item.giftObj.qty}}</text>{{item.giftObj.product&&item.giftObj.product.unit||''}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 分页 -->
				<view class="product-pages" v-if="totalPages>1">
					<uni-pages-nav :totalPages="totalPages" :showShadow="false" :currentPage="pageNo" @pagechanged="getRow"></uni-pages-nav>
				</view>
			</view>
			<view class="info" v-if="info">
				<view class="infoList gray-text" v-if="info.totalTicketGiveAmount">
					<text>代金券</text>
					<text class="cText">￥{{Number(info.totalTicketGiveAmount).toFixed(2)}}</text>
				</view>
				<view class="infoList gray-text" v-if="info.totalSpecialGiveAmount">
					<text>总优惠</text>
					<text class="cText">￥{{Number(info.totalSpecialGiveAmount).toFixed(2)}}</text>
				</view>
				<view class="infoList">
					<text>总金额</text>
					<view class="price-txt">￥<text>{{Number(info.totalAmount).toFixed(2)}}</text></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.purchaseNo||'--'}}</text>
				</view>
				<view class="infoList">
					<text>下单时间</text>
					<text>{{info.purchaseDate||'--'}}</text>
				</view>
				<view class="infoList">
					<text>下单人员</text>
					<text>{{info.purchaserName || '--'}}</text>
				</view>
			</view>
		</view>
		<view class="footer flex align_center justify_center" v-if="info">
			<u-button v-if="info.billStatus == 'WAIT_AUDIT'" shape="circle" type="error" plain @click="cancelOrder(info)">取消订单</u-button>
			<u-button v-if="info.billStatus == 'WAIT_RECEIVE'" shape="circle" type="primary" @click="receiveOrder(info)">确认收货</u-button>
		</view>
	</view>
</template>

<script>
	import { purchaseQueryDetailPage,purchaseCancel,purchaseReceive } from '@/api/purchase.js'
	export default {
	   name: 'procureDetailOrder',
	   data() {
		   return {
			   loading: false,
			   info: null,
			   statusText: '',
			   statusIcon: '', // 结算状态icon
			   statusMessage: '请耐心等待汽配经销商进行配送',
			   partList: [], // 配件列表
			   state: 'success',
			   pageNo:1,
			   pageSize: 30,
			   total: 0,
			   purchaseSn: null
		   }
	   },
	   onLoad(option) { 
		   uni.setNavigationBarTitle({
		   	title: '采购订单详情'
		   })
		   // 从采购单列表来
		  if(option.purchaseSn){
			  this.state = option.state
			  this.purchaseSn = option.purchaseSn
			  const stateText = {'WAIT_AUDIT':'待审核','AUDIT_REJECT':'审核不通过','WAIT_OUT_WAREHOUSE':'待收货','FINISH':'已完结','CANCEL':'已取消'}
			  this.statusText = stateText[option.state]
			  this.statusIcon = option.state == 'FINISH' ? 'checkmark-circle' : 'hourglass'
			  this.info = this.$store.state.vuex_tempData
			  this.statusMessage = option.state == 'FINISH' || option.state == 'AUDIT_REJECT' || option.state == 'CANCEL' ? '' : '请耐心等待汽配经销商进行配送'
			  // 获取明细
			  this.getDetailList()
		  }else{
			  const data = this.$store.state.vuex_tempData
			  if(data){
				  this.info = data
				  this.state = data.billStatus
				  this.purchaseSn = data.purchaseSn
				  // 获取明细
				  this.getDetailList()
			  }
			  this.statusText = '提交成功'
			  this.statusIcon = 'checkmark-circle'
		  } 
		  
		  // 更改标题栏背景色
		  uni.setNavigationBarColor({
		  	frontColor: '#ffffff',
		  	backgroundColor: this.state!= 'error'&&this.state!= 'AUDIT_REJECT'&&this.state!= 'CANCEL' ? '#066cff':'#f34503',
		  })
	   },
	   onUnload() {
			this.$store.state.vuex_tempData = null
	   },
	   computed: {
		   totalPages(){
			   return Math.ceil(this.total / this.pageSize)
		   }
	   },
	   methods: {
		 getRow(pageNo){
			this.pageNo = pageNo
			this.getDetailList()
		 },
		 getDetailList(){
		   uni.showLoading({
		   	title: '加载中'
		   })
		   purchaseQueryDetailPage({purchaseSn: this.purchaseSn,pageNo:this.pageNo,pageSize:this.pageSize}).then(res => {
				if(res.status == 200){
					this.partList = res.data ? res.data.list : []
					// 是否有赠品
					const giftList = this.partList.filter(item => item.promoProductType == 'GIFT_PRODUCT')
					// 正品
					this.partList = this.partList.filter(item => item.promoProductType !== 'GIFT_PRODUCT')
					this.partList.map(item=>{
					  // 关联赠品
					  item.giftObj = giftList.find(gift => gift.purchaseDetailParentSn  == item.purchaseDetailSn)
					  item.priceStr = Number(item.price).toFixed(2).toString().split('.')
					})
					this.total = res.data ? res.data.count : 0
				}
				// 滚动到顶部
				this.$nextTick(()=>{
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300
					});
					uni.hideLoading()
				})
		   }) 
		 },
		 message(title){
		 	uni.showToast({
		 		icon:'none',
		 		title: title
		 	})
		 },
		 // 取消订单
		 cancelOrder(item){
		 	let _this = this
		 	uni.showModal({
		 		title: '提示',
		 		content: '确定取消订单吗？',
		 		success: function (res) {
		 			if (res.confirm) {
		 				purchaseCancel({purchaseSn:_this.purchaseSn}).then(res => {
		 					if (res.status == 200) {
		 						_this.message('取消成功')
								uni.$emit('refreshOrder')
								uni.navigateBack()
		 					} else {
		 						_this.message(res.message)
		 					}
		 				})
		 			}
		 		}
		 	});
		 },
		 // 确认收货
		 receiveOrder(item){
		 	let _this = this
		 	uni.showModal({
		 		title: '提示',
		 		content: '确定收货吗？',
		 		success: function (res) {
		 			if (res.confirm) {
		 				purchaseReceive({purchaseSn:_this.purchaseSn}).then(res => {
		 					if (res.status == 200) {
		 						_this.message('收货成功')
								uni.$emit('refreshOrder')
		 						uni.navigateBack()
		 					} else {
		 						_this.message(res.message)
		 					}
		 				})
		 			}
		 		}
		 	});
		 },
	   }
	}
</script>

<style lang="less">
	page{
		height: 100%;
	}
	.orderDetail-digitalShel{
		height: 100%;
		.redText{
			color: #FB1E1E;
			margin: 0 10rpx;
		}
		.cText{
			color: #666;
			margin: 0 6rpx;
			font-size: 14px;
		}
		.gray-text{
			text{
				font-size: 14px;
				color: #999;
			}
		}
		.order-body{
			flex-grow: 1;
			overflow: auto;
			.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: 28upx;
					text-align: center;
					text{
						color: #f3e781;
					}
					padding: 20rpx 0;
				}
			}
		}
		.price-txt{
			color: red;
			display: flex;
			align-items: baseline;
			font-size: 12px;
			text{
				font-size: 32rpx;
			}
		}
		.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{
						color: #ff9808;
						font-size: 24upx;
					}
				}
				> text{
					&:first-child{
						color: #666E75;
					}
				}
			}
			.item-list-box{
				border-bottom: 2rpx solid #f2f2f2;
			}
			.item-list{
				padding: 20rpx 0;
				&:last-child{
					border: none;
				}
				> view{
					&:first-child{
						margin-right: 20rpx;
						position: relative;
						overflow: hidden;
						width: 160rpx;
						height: 160rpx;
						border-radius: 6px;
						border: 1px solid #eee;
					}
					&:last-child{
						flex-grow: 1;
						width: 60%;
					}
				}
				.item-name{
					word-wrap: break-word;
					font-size: 28rpx;
					color: #333;
					font-weight: bold;
				}
				.item-nums{
					text{
						font-size: 28rpx;
						color: #666;
					}
				}
				.item-head{
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #666;
					margin-top: 5px;
					> view:last-child{
						font-size: 24rpx;
						text{
							margin: 0 10rpx;
							font-size: 28rpx;
						}
					}
				}
				.rebate-tag{
					background: #ffe7df;
					color: #E91E63;
					padding: 2px 5px;
					font-size: 10px;
					border-radius: 3px;
					margin-left: 6px;
				}
				.tejia-tag{
					color: #E91E63;
					margin-left: 6px;
					font-size: 12px;
					text{
						font-size: 12px;
						color: #999;
						margin-left: 5px;
						text-decoration: line-through;
					}
				}
			}
		}
		.gift-box.item-list{
			.item-name{
				color: #666;
				font-size: 12px;
				font-weight: normal;
			}
			.item-nums{
				text{
					color: #666;
					font-size: 12px;
				}
			}
			.rebate-tag{
				margin-left: 0;
				margin-right: 5px;
			}
			.ellipsis-one{
				flex-grow: 1;
				width:80%;
			}
		}
		.footer{
			padding: 20upx 60upx;
			background: #FFFFFF;
			button{
				&:after{
					border: 0;
				}
				color: #585858;
				font-size: 32rpx;
				margin: 0 20rpx;
			}
		}
	}
	
</style>
