<template>
	<view class="choosePartResult flex flex_column">
		<view class="contHead" v-if="state" :style="{background:state==1?'#066cff':'#ff5500',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" v-html="info&&info.shelfOrder&&info.shelfOrder.remindMessage||''"></view>
					<view class="messageText" v-if="redPacketData&&redPacketData.totalRewardAmount&&!showMask">
						您已获得<text>{{redPacketData.totalRewardAmount}}</text>元红包奖励，可在“更多-红包奖励”中查看
					</view>
					<!-- <view class="button-group"> -->
						<!-- <button :hover-stop-propagation="true" @click="toScan" v-if="state == 1&&partList.length" class="back" size="mini">扫码拿货</button> -->
						<!-- <button :hover-stop-propagation="true" :loading="loading" @click="onceQh" v-if="state == 1&&partList.length" class="action" size="mini">一键拿货</button> -->
						<!-- <button :hover-stop-propagation="true" @click="toSettle" v-if="state == 0" class="actionFail" size="mini">去结算</button> -->
					<!-- </view> -->
				</view>
			</view>
		</view>
		<view class="order-body">
			<view class="info partList" v-if="state == 1">
				<u-tabs :list="[{name:'货架订单',value:0},{name:'急送订单',value:1}]" :is-scroll="false" :current="current" @change="changeTab"></u-tabs>
				<view v-if="current==0">
					<view class="infoList" v-if="partList.length">
						<view class="title"><u-icon name="info-circle"></u-icon> 配件已出库，请按照指定位置取用</view>
						<view>
							{{partList.length}}款，共<text class="redText">{{totalNums}}</text>件
						</view>
					</view>
					<view v-else>
						<u-empty :src="`/static/nodata.png`" icon-size="180" text="暂无货架订单" mode="list" :margin-top="30"></u-empty>
					</view>
					<view v-for="item in partList" :key="item.id" class="flex align-center item-list">
						<view>
							<u-image :src="item.images+'?x-oss-process=image/resize,m_fixed,h_120,w_120,color_ffffff'" 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">
								X <text>{{item.totalQty}}{{item.unit||''}}</text>
							</view>
							<view class="item-head">
								<text>{{item.productCode}}</text>
								<text class="item-no">{{item.shelfPlaceCode}}</text>
							</view>
							<view class="flex" v-if="item.productTypeSn3=='543766811373752320'">
								<text style="width: 5rem;color:#999;">原厂编码：</text>
								<view style="width: 70%;flex-grow: 1;">
									<u-tag :text="item.origCode" mode="light" borderColor="#ffffff" type="warning" size="large"></u-tag>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="current==1">
					<view class="infoList" v-if="tempPartList.length">
						<view class="title"><u-icon name="info-circle"></u-icon> 请耐心等待汽配经销商进行配送</view>
						<view>
							{{tempPartList.length}}款，共<text class="redText">{{totalTempNums}}</text>件
						</view>
					</view>
					<view v-else>
						<u-empty :src="`/static/nodata.png`" icon-size="180" text="暂无急送订单" mode="list" :margin-top="30"></u-empty>
					</view>
					<view v-for="item in tempPartList" :key="item.id" class="flex align-center item-list">
						<view>
							<u-image :src="item.images+'?x-oss-process=image/resize,m_fixed,h_120,w_120,color_ffffff'" 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">
								X <text>{{item.qty}}{{item.unit||''}}</text>
							</view>
							<view class="item-head">
								<text>{{item.productCode}}</text>
								<span class="item-no" v-if="item.billState == 'WAIT_AUDIT'">待审核</span>
								<span class="item-no" v-if="item.billState == 'AUDIT_REJECT'">审核不通过</span>
								<span class="item-no" v-if="item.billState == 'WAIT_OUT_WAREHOUSE'">待收货</span>
								<span class="item-no" v-if="item.billState == 'FINISH'">已完结</span>
							</view>
							<view class="flex" v-if="item.productTypeSn3=='543766811373752320'">
								<text style="width: 5rem;color:#999;">原厂编码：</text>
								<view style="width: 70%;flex-grow: 1;">
									<u-tag :text="item.origCode" mode="light" borderColor="#ffffff" type="warning" size="large"></u-tag>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="info" v-if="info && info.shelfOrder && state == 1 && current == 0">
				<view class="infoList">
					<view class="title">单据信息</view>
					<view class="statu"></view>
				</view>
				<view class="infoList">
					<text>订单编号</text>
					<text>{{info.shelfOrder.shelfOrderNo||'--'}}</text>
				</view>
				<view class="infoList">
					<text>下单时间</text>
					<text>{{info.shelfOrder.createDate||'--'}}</text>
				</view>
				<view class="infoList">
					<text>下单人员</text>
					<text>{{info.shelfOrder.orderPersonName || '--'}}</text>
				</view>
			</view>
			<view class="info" v-if="info && info.shelfTempBill && state == 1 && current == 1">
				<view class="infoList">
					<view class="title">单据信息</view>
					<view class="statu"></view>
				</view>
				<view class="infoList">
					<text>订单编号</text>
					<text>{{info.shelfTempBill.tempNo||'--'}}</text>
				</view>
				<view class="infoList">
					<text>下单时间</text>
					<text>{{info.shelfTempBill.tempDate||'--'}}</text>
				</view>
				<view class="infoList">
					<text>下单人员</text>
					<text>{{info.shelfTempBill.personName || '--'}}</text>
				</view>
			</view>
		</view>
		<!-- 红包 -->
		<u-mask :show="showMask">
			<view class="imageWarp flex flex_column justify_center align_center" style="width:100%;height:100vh;">
				<view style="position: relative;">
					<u-image src="/pagesA/static/hb.png" width="700" height="657" @click="showMask=false"></u-image>
					<view style="font-size: 60rpx;color:#fff;position: absolute;top:50%;text-align: center;width: 100%;">
						{{redPacketData&&redPacketData.totalRewardAmount||'0.00'}} <text style="font-size: 26rpx;margin-left: 10rpx;">元</text>
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import moment from 'moment'
	import { findBySnShelfOrder, takeGoods, rewardOrderFindBySn } from '@/api/shelf'
	export default {
	   name: 'choosePartResult',
	   components: {
	   },
	   data() {
		   return {
			   loading: false,
			   info: null,
			   statusText: '',
			   statusIcon: '', // 结算状态icon
			   partList: [], // 配件列表
			   tempPartList: [], 
			   state: null,
			   current: 0,
			   shelfOrderSn: '',
			   showMask: false,
			   redPacketData: null
		   }
	   },
	   onUnload() {
		 this.$store.state.vuex_tempData = null
	   },
	   onLoad(option) { 
		  this.state = option.state
		  // 更改标题栏背景色
		  uni.setNavigationBarColor({
		  	frontColor: '#ffffff',
		  	backgroundColor: option.state==1 ? '#066cff':'#ff5500',
		  })
		  this.info = this.$store.state.vuex_tempData
	   },
	   onShow(){
		   uni.showLoading({
		   	title: '加载中...'
		   })
		   if(this.state==1){
			  this.statusText = '拿货成功';
			  this.statusIcon = 'checkmark-circle';
			  // 获取配件列表
			  this.partList = this.info.shelfOrder ? this.info.shelfOrder.shelfOrderDetailList : [];
			  this.current = this.partList.length ? 0 : 1;
			  
			  this.tempPartList = this.info.shelfTempBill ? this.info.shelfTempBill.detailList : [];
			  this.shelfOrderSn = this.info.shelfOrder ? this.info.shelfOrder.shelfOrderSn : '';
			  
			  // 是否有红包活动奖励
			  this.getOrderRedReward()
		   }else{
			  this.statusText = '拿货失败'
			  this.statusIcon = 'close-circle'
		   }
		   this.$nextTick(()=>{
			  uni.hideLoading()
		   })
	   },
	   computed: {
		   totalNums(){
			   let ret = 0
			   if(this.partList){
				   this.partList.map(item => {
				   	 ret += item.totalQty
				   })
			   }
			   return ret
		   },
		   totalTempNums(){
			   let ret = 0
			   if(this.tempPartList){
				   this.tempPartList.map(item => {
				   	 ret += item.qty
				   })
			   }
			   return ret
		   }
	   },
	   methods: {
		 back(){
			uni.navigateBack() 
		 },
		 changeTab(index){
			 this.current = index
		 },
		 // 扫码拿货
		 toScan(){
			 uni.redirectTo({
			 	url:"/pagesA/digitalShelf/scanBarcode/scanBarcode?shelfOrderSn="+this.shelfOrderSn
			 })
		 },
		 // 盘点是否有红包奖励
		 getOrderRedReward(){
			 uni.showLoading({
			 	title: "正在加载...",
				mask: true
			 })
			 rewardOrderFindBySn({orderSn:this.shelfOrderSn}).then(res => {
				 if(res.status == 200 && res.data){
				 	this.showMask = true
					this.redPacketData = res.data
				 }
				 uni.hideLoading()
			 })
		 },
		 // 一键拿货
		 onceQh(item,index){
		 	const _this = this
		 	uni.showModal({
		 		title: '提示',
		 		content: '确认一键拿货吗？',
		 		success: (ret) => {
		 		  if(ret.confirm){
		 			  _this.loading = true
		 			  takeGoods({sn:_this.shelfOrderSn}).then(res => {
						 if(res.status == 200){
							  uni.navigateBack()
							  uni.$emit("refreshOrder")
						 }
						 uni.showToast({
							title: res.message,
							icon:"none"
						 })
						 _this.loading = false
		 			  })
		 		  }
		 		}
		 	})
		 },
		 // 去结算
		 toSettle(){
			 uni.redirectTo({
			 	url:"/pagesA/digitalShelf/settlementManage/settlementManage"
			 })
		 },
		 message(title){
		 	uni.showToast({
		 		icon:'none',
		 		title: title
		 	})
		 }, 
	   }
	}
</script>

<style lang="less">
	page{
		height: 100%;
	}
	.choosePartResult{
		height: 100%;
		.order-body{
			flex-grow: 1;
			overflow: auto;
		}
		.contHead {
			background-color: white;
			margin-top: -20rpx;
			.statusH{
				> view{
					padding: 10upx 12%;
					font-size: 34upx;
				}
				.status-row{
					font-size: 42upx;
					margin-top: 20rpx;
					text{
						margin-left: 10rpx;
					}
				}
				.messageText{
					font-size: 30upx;
					text-align: center;
					color: #ebef09;
					text{
						color: #ff9900;
						font-size: 38upx;
					}
					padding: 10rpx 0 10rpx;
				}
				.button-group{
					padding: 20rpx 0;
					button{
						background: none;
						margin: 0 30rpx;
						border-radius: 100rpx;
						font-size: 32rpx;
					}
					.back{
						background: #fff;
						color: #0485F6;
					}
					.action{
						background: #fff;
						color: #0485F6;
					}
					.actionFail{
						background: #fff;
						color: #FF5728;
					}
				}
			}
		}
		.info{
			background-color: #FFFFFF;
			padding: 10rpx 30upx;
			font-size: 32rpx;
			margin-bottom: 20rpx;
			.infoList{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding:20rpx 0;
				border-bottom: 2rpx solid #f2f2f2;
				.title{
					color: #bf660b;
					font-size: 28rpx;
				}
				> text{
					&:first-child{
						color: #666E75;
					}
					&:last-child{
						width: 80%;
						text-align: right;
					}
				}
				.redText{
					color: red;
				}
			}
			.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;
					color: #999;
					font-size: 24rpx;
					text{
						font-size: 32rpx;
						color: #666E75;
						margin-left: 10rpx;
					}
				}
				.item-head{
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 32rpx;
					color: #666;
					margin-bottom: 10rpx;
					.item-no{
						background: rgba(3, 54, 146, 0.15);
						color: #033692;
						border-radius: 100rpx;
						padding: 2rpx 30rpx;
						margin-right: 20rpx;
						display: block;
					}
				}
			}
		}
	}
	
</style>
