<!--
 * @Author: ch
 * @Date: 2022-03-31 17:53:43
 * @LastEditors: ch
 * @LastEditTime: 2022-03-31 20:43:19
 * @Description: file content
-->
<template>
	<view class="status">
		<image class="status--icon" :src="ctxCon.icon"></image>
		<view class="status--name">{{ctxCon.name}}</view>
		<view class="status--desc">{{ctxCon.tips}}</view>
	</view>
</template>
<script>
import {DictOrderStatus } from '@/common/dicts/order'
import Enum from "@/common/plugins/enum"
export default {
	props : {
		orderInfo : {
			type : Object,
			default : {}
		}
	},
	data(){
		return {
			ctxData : {
				awaitPay : {name:'待付款', tips:'', icon: require('@/static/order/fk.png')},
				close : {name:'交易关闭' , tips:'关闭原因', icon: require('@/static/order/qx.png')},
				awaitSend : {name:'等待发货', tips:'您的包裹整装待发', icon: require('@/static/order/fh.png')},
				finishSend : {name:'已发货', tips:'您的包裹正向您飞来', icon: require('@/static/order/fh.png')},
				finishReceiving : {name:'已收货', icon: require('@/static/order/fh.png')},
				end : {name:'交易成功', icon: require('@/static/order/cg.png')},
			},
			ctxCon : {},
			secondNum : 0
		}
	},
	mounted(){
		
	},
	watch : {
		orderInfo(nVal){
			this.ctxCon = this.ctxData[this.statusKey];
			if(this.statusKey === 'awaitPay'){
				let expireTime = (new Date(this.orderInfo.expireTime)).getTime(),
				curTime = (new Date(this.orderInfo.serverTime)).getTime(),
				second = Math.floor((expireTime - curTime) / 1000);
				this.secondNum = second > 0 ? second : 0;
				this.timer()
			}else if(this.statusKey === 'close'){
				this.ctxCon.tips = this.orderInfo.closeReason;
			}
		}
	},
	computed:{
		// 从字典表获取状态key
		statusKey (){
			return DictOrderStatus[this.orderInfo.orderStatus].value
		}
	},
	methods:{
		/**
		 * 待付款的计时器
		 */
		timer(){
			if(this.secondNum == 0){
				this.$emit('close');
				return;
			}
			this.secondNum--;
			let minute = parseInt(this.secondNum / 60);
			let second = parseInt(this.secondNum % 60);
			this.ctxCon.tips = `剩余${minute > 0 ? `${minute}分` : ''} ${second}秒`;
			// console.log(this.ctxCon.tips);
			setTimeout(()=>this.timer(),1000)
		}
	}
}
</script>
<style lang="scss" scoped>

.status{
	padding: 30rpx 60rpx 0;
	position: relative;
	&--icon{
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		right: 60rpx;
		top: 10rpx;
	}
	&--name{
		font-size: 36rpx;
		margin-bottom: 20rpx;
	}
	&--desc{
		font-size: 28rpx;
		color: #999;
		margin-bottom: 48rpx;
	}
}
</style>