<template>
	<view class="choosePartResult flex flex_column">
		<view class="contHead" :style="{background:state==1?'#1283d4':'#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.remindMessage||''"></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">请在货架上按照指定位置拿取配件</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 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>
					</view>
				</view>
				<view v-if="current==1">
					<view class="infoList" v-if="tempPartList.length">
						<view class="title">请耐心等待汽配经销商进行配送</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 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>
					</view>
				</view>
			</view>
			<view class="info" v-if="info && info.shelfOrder && state == 1">
				<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>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import moment from 'moment'
	import { findBySnShelfOrder, takeGoods } from '@/api/shelf'
	export default {
	   name: 'choosePartResult',
	   components: {
		uniIcons,
	   },
	   data() {
		   return {
			   loading: false,
			   info: null,
			   statusText: '',
			   statusIcon: '', // 结算状态icon
			   partList: [], // 配件列表
			   tempPartList: [], 
			   state: null,
			   current: 0,
			   shelfOrderSn: ''
		   }
	   },
	   onLoad(option) { 
		  this.info = option.data?JSON.parse(decodeURIComponent(option.data)):null
		  this.state = option.state
		  if(option.state==1){
			  this.statusText = '提交成功'
			  this.statusIcon = 'checkmark-circle'
			  // 获取配件列表
			  this.partList = this.info.shelfOrder ? this.info.shelfOrder.shelfOrderDetailList : []
			  this.tempPartList = this.info.shelfTempBill ? this.info.shelfTempBill.detailList : [],
			  this.shelfOrderSn = this.info.shelfOrder ? this.info.shelfOrder.shelfOrderSn : ''
			  this.current = this.partList.length ? 0 : 1
		  }else{
			  this.statusText = '提交失败'
			  this.statusIcon = 'close-circle'
		  }
		  
		  // 更改标题栏背景色
		  uni.setNavigationBarColor({
		  	frontColor: '#ffffff',
		  	backgroundColor: option.state==1 ? '#1283d4':'#ff5500',
		  })
	   },
	   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:"/pages/digitalShelf/scanBarcode/scanBarcode?shelfOrderSn="+this.shelfOrderSn
			 })
		 },
		 // 一键取货
		 onceQh(){
			 this.loading = true
			 takeGoods({sn:this.shelfOrderSn}).then(res => {
				 if(res.status == 200){
					 uni.navigateBack()
				 }
				 uni.showToast({
				 	title: res.message,
				 	icon:"none"
				 })
				 this.loading = false
			 })
		 },
		 // 去结算
		 toSettle(){
			 uni.redirectTo({
			 	url:"/pages/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;
					text{
						margin-left: 10rpx;
					}
				}
				.messageText{
					font-size: 30upx;
					text-align: center;
					text{
						color: #ffaa00;
					}
					padding: 10rpx 0;
				}
				.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: #999;
					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;
					.item-no{
						background: rgba(3, 54, 146, 0.15);
						color: #033692;
						border-radius: 100rpx;
						padding: 2rpx 30rpx;
						margin-right: 20rpx;
						display: block;
					}
				}
			}
		}
	}
	
</style>
