<template>
	<view class="container">
		<view class="top">
			<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()"></text>
			<text style="font-size: 30rpx;">退单详情</text>
		</view>
		<view class="returnCountsContainer">
			<view class="left">
				<h3 style="font-size: 40rpx;">{{courseInfoItem.orderStatusName}}</h3>
				<text style="font-size: 26rpx;">{{courseInfoItem.refundTime}}</text>
			</view>
			<view class="right">
				<h3>￥{{courseInfoItem.refundAmount}}</h3>
				<text style="font-size: 26rpx;" @click="goDetail()">到账说明</text>
			</view>
		</view>
		<!-- 退款进度 -->
		<view class="returnProcessContainer">
			<h4>退款进度</h4>
			<view class="stepContainer">
				<view class="iconContainer">
					<view v-for="(item,index) in options" :key="index" :class="{'actived':index===processIndex}">
						<view class="icon"></view>
						<view class="line"></view>
					</view>
				</view>
				<view class="stepProcessContainer">
					<view v-for="(item,index) in options" :key="index">
						<text class="steps__column-title">{{item.title}}</text>
						<text class="steps__column-desc">{{item.desc}}</text>
						<text class="steps__column-desc">{{item.time}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 退款详情 -->
		<view class="returnDetailContainer">
			<h4>退款详情</h4>
			<template v-if="courseInfoItem">
				<course-item :thumbnailPath="courseInfoItem.displayImage" :title="courseInfoItem.fileTitle" :summaryBox="courseInfoItem.fileSynopsis" :dataList="{coursePrice:courseInfoItem.coursePrice,salesNumber:courseInfoItem.salesNumber}" :fileLecturerId="courseInfoItem.fileLecturerId"></course-item>
			</template>
			<view class="returnInfoContent">
				<view>
					<text>退款单号：</text>
					<text>{{courseInfoItem.orderNo}}</text>
				</view>
				<view>
					<text>申请时间：</text>
					<text>{{courseInfoItem.applyRefundTime}}</text>
				</view>
				<view>
					<text>退款金额：</text>
					<text>￥{{courseInfoItem.refundAmount}}</text>
				</view>
				<view>
					<text>支付违约金：</text>
					<text>{{courseInfoItem.breachCommission?'￥':''}}{{courseInfoItem.breachCommission}}</text>
				</view>
				<view>
					<text>退还积分：</text>
					<text>{{courseInfoItem.refundIntegralExchange}}</text>
				</view>
				<view v-if="courseInfoItem.orderRemark">
					<text >退款原因：</text>
					<text>{{courseInfoItem.orderRemark}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import courseItem from "@/components/courseItem/courseItem.vue";
	import api from "@/api/api";
	export default {
		components:{courseItem},
		data() {
			return {
				userId: uni.getStorageSync('cffp_userId'),
				orderNo:'',
				afterSalesFlag:'',
				courseInfoItem:{},
				titleShowTime:'',
				processIndex:0,
				options:[
					{title:'提交申请',desc:'退款将退回到您的支付宝/微信账号请注意查收',time:'XXXX'},
					{title:'退款中',desc:'您的退款申请已通过，待财务退款',time:'XXXX'},
					{title:'退款成功',desc:'您的退款申请已成功',time:'XXXX'},
				]
			};
		},
		methods:{
			goBack(){
				uni.navigateBack({  
					delta: 1  
				})
			},
			goDetail(){
				uni.navigateTo({
					url:'/pages/receiptCycleDesc/receiptCycleDesc'
				})
			},
			userAfterSalesDtl(){
				const params = {
					userId:this.userId,
					orderNo:this.orderNo,
					afterSalesFlag:this.afterSalesFlag
				}
				api.userAfterSalesDtl(params).then(res=>{
					if(res['success']){
						this.courseInfoItem =  res['data']['userCourse'];
						if(this.courseInfoItem.orderStatus == '4'){
							this.titleShowTime = this.courseInfoItem.refundingTime;
							this.processIndex = 1;
						}else if(this.courseInfoItem.orderStatus == '3'){
							this.titleShowTime = this.courseInfoItem.refundTime;
							this.processIndex = 2;
						}else{
							this.titleShowTime = this.courseInfoItem.applyRefundTime;
							this.processIndex = 0;
						}
						this.options = [
							{title:'提交申请',desc:'退款将退回到您的支付宝/微信账号请注意查收',time:this.courseInfoItem.applyRefundTime},
							{title:'退款中',desc:'您的退款申请已通过，待财务退款',time:this.courseInfoItem.refundingTime},
							{title:'退款成功',desc:'您的退款申请已成功',time:this.courseInfoItem.refundTime},
						]
					}
				})
			}
		},
		onLoad(option) {
			this.orderNo = option.orderNo;
			this.afterSalesFlag = option.afterSalesFlag;
			this.userAfterSalesDtl()
		},
		mounted() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		height:100%;
		.top{
			display: flex;
			height: 80rpx;
			justify-content: space-between;
			align-items: center;
			position: relative;
			width: 100%;
			margin: 0 auto;
			background: #fff;
			text:nth-child(2){
				width: 100%;
				text-align: center;
				position: absolute;
			}
		}
		.returnCountsContainer,.returnProcessContainer,.returnDetailContainer{
			background-color: #fff;
			padding: 20rpx 40rpx;
			margin: 10rpx auto;
			h4{
				font-size: 32rpx;
				color: #333;
				margin-bottom: 20rpx;
			}
		}
		.returnCountsContainer{
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			.left{
				text{
					font-size: 24rpx;
					color: #999;
				}
			}
			.right{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				h3{
					font-size:40rpx;
					color: #FA322D;
				}
				text{
					font-size: 24rpx;
					color: #999;
				}
				
			}
		}
		.returnInfoContent{
			margin-top: 28rpx;
			view{
				margin-bottom: 10rpx;
				color: #666;
				font-size: 30rpx;
			}
		}
		.stepContainer{
			display: flex;
			.iconContainer{
				margin-right: 10rpx;
				.icon{
					position: relative;
					width: 40rpx;
					height: 40rpx;
					border: 4rpx solid #20269B;
					border-radius: 50%;
				}
				.line{
					height: 100rpx;
					border-left: 4rpx dashed #20269B;
					transform: translateX(21rpx);
				}
				view{
					&:last-child{
						.line{
							border: none;
						}
					}
					&.actived{
						.icon{
							&::before{
								content: '';
								display: block;
								position: absolute;
								left: 50%;
								top: 50%;
								width: 24rpx;
								height: 24rpx;
								border-radius: 50%;
								background-color: #20269B;
								transform: translate(-50%,-50%);
							}
						}
					}
				}
			}
			.stepProcessContainer{
				view{
					display: flex;
					flex-direction: column;
					margin-bottom: 20rpx;
					.steps__column-title {
						font-size: 30rpx;
						color: #333;
						margin-bottom: 10rpx;
						line-height: 46rpx;
					}
					.steps__column-desc{
						color: #666;
						font-size: 28rpx;
						line-height: 42rpx;
						min-height: 42rpx;
					}
				}
			}
			
		}
	}
</style>
