<!--
 * @Author: ch
 * @Date: 2022-03-31 17:53:43
 * @LastEditors: ch
 * @LastEditTime: 2022-04-19 18:12:04
 * @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>
export default {
	props : {
		data : {
			type : Object,
			default : {}
		}
	},
	data(){
		return {
			ctxData : {
				"1" : {
					name:'请等待商家处理', tips:'', icon: require('@/static/order/cg.png')},
				"2" : {name:'退款关闭' , tips:'', icon: require('@/static/order/qx.png')},
				"3" : {name:'请寄回商品，并填写物流信息', tips:'', icon: require('@/static/order/cg.png')},
				"4" : {name:'快递已发出，等待商家收货', tips:'您的包裹正在退回的路上', icon: require('@/static/order/cg.png')},
				"5" : {name:'快递已收货，等待商家退款', tips:'',icon: require('@/static/order/cg.png')},
				"6" : {name:'退款成功', tips: '退款将于7个工作日内原路返回，注意查收',icon: require('@/static/order/cg.png')},
				"7" : {name:'退款关闭', tips: '', icon: require('@/static/order/qx.png')},
			},
			ctxCon : {
				name : '--',
				icon: require('@/static/order/cg.png')
			}
		}
	},
	watch:{
		data(newData){
			if(newData){
				this.setCtxCon();
			}
		}
	},
	computed:{
	},
	methods:{
		/**
		 * 根据当前状态显示不同文案
		 */
		setCtxCon(){
			const {refundStatus, handleExpireTime, returnExpireTime, refundExpireTime, closeReason} = this.data;
				this.ctxCon = this.ctxData[refundStatus];
				switch(refundStatus){
					case 1 :
						this.ctxCon.tips = `您的申请已经提交，还剩${this.calcTimer(handleExpireTime)}`;
						break;
					case 3 :
						this.ctxCon.tips = `还剩${this.calcTimer(returnExpireTime)}`;
						break;
					case 5 :
						this.ctxCon.tips = `若商家未及时处理，退款将在${this.calcTimer(refundExpireTime)}后自动退回`;
						break;
					case 2 :
					case 7 :
						this.ctxCon.tips = closeReason;
						break;
					default :
						break;
						
				}
		},
		/**
		 * 计算距下个节点处理时间
		 */
		calcTimer (time){
			const expireTime = (new Date(time)).getTime();
			const curTime = (new Date(this.data.serverTime)).getTime();
			// const curTime = (new Date('2022-4-16 15:22:00')).getTime();
			const minute = parseInt((expireTime - curTime) / 60000);
			const day = parseInt(Math.floor(minute / 1440));
			const hour = parseInt(Math.floor((minute - day * 1440) / 60));
			const m = parseInt(Math.floor(minute - ((day * 24 + hour) * 60)));
			return `${day ? `${day}天${hour}时${m}分` : (hour ? `${hour}时${m}分` : ( m ? `${m}分` : '1分'))}`
		}
	}
}
</script>
<style lang="scss" scoped>

.status{
	padding: 48rpx 60rpx 0;
	margin-bottom: 48rpx;
	min-height: 130rpx;
	position: relative;
	&--icon{
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		right: 60rpx;
		top: 51rpx;
	}
	&--name{
		font-size: 36rpx;
		margin-bottom: 20rpx;
	}
	&--desc{
		font-size: $font-size-base;
		color: $color-grey4;
		// margin-bottom: 48rpx;
	}
}
</style>