<template>
	<view class="content">
		<view class="topView">
			<!-- 待处理 -->
			<view class="waitBg" v-if="state>0">
				<view class="title">请等待平台处理</view>
				<!-- 进度条 -->
				<view class="progress">
					<image :src="(state>0 ? tongguoUrl : waitUrl)" class="waitImg" :class="{tongguoImg:state>0}">
					</image>

					<view class="line" :class="{lightLine:state>0}"></view>

					<image :src="(state>1 ? tongguoUrl : waitUrl)" class="waitImg" :class="{tongguoImg:state>1}">
					</image>

					<view class="line" :class="{lightLine:state>1}"></view>

					<image :src="(state>2 ? tongguoUrl : waitUrl)" class="waitImg" :class="{tongguoImg:state>2}">
					</image>

				</view>
				
				<!-- 进度条 文字提示 -->
				
				<view class="progressT">
					<view class="progressTitle">提交申请</view>
					<view style="width: 9%;"></view>
					<view class="progressTitle">平台审核</view>
					<view style="width: 9%;"></view>
					<view class="progressTitle">平台同意退款</view>
					
					
				</view>
				
				<view class="progressT">
					<view class="time" v-if="state>0">{{detailData.createTime.slice(0,detailData.createTime.length-3)}}</view>
					<view style="width: 7%;"></view>
					<view class="time" v-if="state>1">{{detailData.handlerTime.slice(0,detailData.handlerTime.length-3)}}</view>
					<view style="width: 8%;"></view>
					<view class="time" v-if="state>2">{{detailData.handlerTime.slice(0,detailData.handlerTime.length-3)}}</view>
					
				</view>
				
			</view>

			<!-- 退款关闭 -->
			<view class="waitBg" v-if="state==0" style="height: 100rpx;">
				<view class="title">退款关闭</view>
				<view class="title3">{{detailData.handlerTime}}</view>
			</view>

			<!-- 平台拒绝 -->
			<view class="waitBg" v-if="state==-1" style="height: 100rpx;">
				<view class="title">平台已拒绝</view>
				<view class="title3">{{detailData.handlerTime}}</view>
			</view>
		</view>

		<!-- 退款提交 -->
		<view class="whiteView" v-if="state==1">
			<view class="title1">您已成功发起退款申请，请耐心等待平台处理</view>
			<view class="title2">平台同意后，系统将退款给您</view>
			<view class="title3">如果平台拒绝，您可以修改退款申请后再次发起，平台会重新处理</view>
		</view>
		<!-- 退款关闭 -->
		<view class="whiteView" v-if="state==0">
			<view class="title1">您已撤销本次退款申请，如有问题仍未解决，您可以重新发起申请</view>

		</view>
		<!-- 平台拒绝 -->
		<view class="whiteView" v-if="state==-1">
			<view class="title1">平台拒绝原因：这是选择的原因</view>
			<view class="title2">您可以修改退款申请后再次发起，平台会重新处理</view>
		</view>
		<!-- 同意申请 -->
		<view class="tongyiView" v-if="state!=1" @click="goSchedule()">
			<view class="title1">进度详情</view>
			<image src="../../static/img/rightArrow.png" mode="" style="width: 14rpx; height: 23rpx;"></image>
		</view>

		


		<!-- 退款信息 -->
		<view class="whiteView">

			<view class="informationLine">
				<view class="informationTxt">退款原因：</view>
				<view class="informationNum">{{detailData.applyReason}}</view>

			</view>
			<view class="informationLine">
				<view class="informationTxt">申请退款金额：</view>
				<view class="informationNum">￥{{detailData.money}}</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">申请时间：</view>
				<view class="informationNum">{{detailData.createTime}}</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">补充描述：</view>
				<view class="informationNum" style="width: 80%;" v-if="detailData.applyReasonComment!=null">
					{{detailData.applyReasonComment}}</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">售后单号：</view>
				<view class="informationNum">{{detailData.serviceCode}}</view>
				<view class="copyBtn" @click="copy(detailData.serviceCode)">复制</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">订单单号：</view>
				<view class="informationNum">{{detailData.sheetCode}}</view>
				<view class="copyBtn" @click="copy(detailData.sheetCode)">复制</view>
				<view style="color: #3F90F7; font-size: 26rpx; margin-left: 50rpx;" @click="goOrderDetail()">详情</view>
			</view>

		</view>

		<!-- 底部按钮 操作 -->
		<view style="height: 150rpx;"></view>
		<view class="orderBottom" v-if="state==1">
			<view class="cancelBtn" @click="cancelBtn">撤销申请</view>
			<view class="cancelBtn" @click="editBtn">修改申请</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				state: -1, // -1 拒绝 0自己撤销关闭 1 提交申请 3 同意申请
				tongguoUrl: '../../static/img/icon_tongguo.png',
				waitUrl: '../../static/img/icon_yuan.png',
				id: '',
				detailData: '',
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.getData();
		},
		onShow() {
			this.getData();
		},
		methods: {
			goSchedule(){
				uni.navigateTo({
					
					url: 'refundSchedule?id=' + this.detailData.ID
				})
			},
			goOrderDetail() {
				uni.navigateTo({
					
					url: '../order/orderDetail?id=' + this.detailData.sheetID
				})
			},
			getData() {
				uni.showLoading({
					title: '加载中'
				})
				let url = '/worldKeepCar/orderRefund/refundDetail',
					params = {
						id: this.id,

					}
				this.$http(url, params, 'GET').then(res => {

					uni.hideLoading();

					this.detailData = res.data

					// 退款状态
					// "serviceState": 备注：处理状态1待处理2退款成功3退款关闭
					if (this.detailData.serviceState == 1) {
						// 平台处理
						this.state = 1;
					} else if (this.detailData.serviceState == 2) {
						// 平台同意
						this.state = 3;
					}
					if (this.detailData.handlerReasonID != null) {
						// 拒绝
						this.state = -1;
					}
					if (this.detailData.cancelType == 1) {
						// 关闭
						this.state = 0;
					}

				})
			},
			copy(txt) {
				uni.setClipboardData({
					data: txt,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			cancelBtn(){
				
					var that = this
					uni.showLoading({
						title: '加载中'
					})
					let url = 'worldKeepCar/orderRefund/cancelApply',
						params = {
							id: this.detailData.ID,
				
						}
					this.$http(url, params, 'POST').then(res => {
				
						uni.hideLoading();
						
						if(res.code==0){
							uni.showToast({
								title: '撤销成功',
								icon: 'none',
								duration: 2000,
							});
							setTimeout(function() {
								that.getData()
							}, 2000); 	
						}
						
					})
				
			},
			editBtn(){
				
				uni.navigateTo({
					
					url:'refundMoney?edit=true'+'&editId='+this.detailData.ID+'&money='+this.detailData.money+'&reasonId='+this.detailData.applyReasonID+'&reason='+this.detailData.applyReason+'&exeContent='+this.detailData.applyReasonComment
				})
			}
			
			
		},
		
		onPullDownRefresh() {
			
			this.getData()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		
	}
	
	
</script>

<style>
	.content {
		background-color: #F4F5F7;
		min-height: 100vh;
	}

	.topView {
		background: linear-gradient(315deg, #FD5002 0%, #FE8F00 100%);
		padding: 20rpx 24rpx;
	}

	.waitBg {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		height: 209rpx;
		padding: 30rpx;
	}

	.title {
		color: #333333;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.progress {
		display: flex;

		align-items: center;

		padding: 10rpx 70rpx;
	}



	.waitImg {
		width: 20rpx;
		height: 20rpx;
	}

	.tongguoImg {
		width: 38rpx;
		height: 38rpx;
	}

	.line {
		width: 40%;
		margin: 0rpx 5rpx;
		height: 2px;
		background: #FF2400;
		opacity: 0.4;
	}

	.lightLine {
		width: 40%;
		margin: 0rpx 5rpx;
		height: 2px;
		background: #FF2400;
		opacity: 1.0;
	}

	.progressT {
		display: flex;

		align-items: center;

	}

	

	.progressTitle {
		color: #333333;
		font-size: 22rpx;
		text-align: center;
		width: 30%;
	}

	.time {
		color: #999999;
		font-size: 22rpx;
		text-align: center;
	}

	.whiteView {
		background-color: #FFFFFF;
		padding: 30rpx 24rpx;
		margin: 20rpx 0;
	}

	.title1 {
		color: #3C3C3C;
		font-size: 30rpx;
		font-weight: bold;
	}

	.title2 {
		color: #999999;
		font-size: 24rpx;
		padding-top: 16rpx;
		padding-bottom: 8rpx;
	}

	.title3 {
		color: #999999;
		font-size: 24rpx;

	}

	.storeTitle {
		color: #3C3C3C;
		font-size: 30rpx;
		font-weight: bold;
		border-bottom: 1rpx #EEEEEE solid;
		padding-bottom: 22rpx;
	}

	.store {
		display: flex;
		padding-top: 20rpx;
		align-items: center;
	}

	.leftIcon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.name {
		color: #3C3C3C;
		font-size: 26rpx;
	}

	.address {
		color: #999999;
		font-size: 26rpx;
	}

	.informationLine {
		display: flex;
		font-size: 26rpx;
		padding: 20rpx 0;
	}

	.informationTxt {
		
		color: #666666;
	}

	.informationNum {
		color: #333333;
		

	}

	.copyBtn {
		width: 86rpx;
		height: 40rpx;
		background: #F4F5F7;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #333333;
		text-align: center;
		line-height: 40rpx;
		margin-left: 20rpx;
	}

	.orderBottom {
		width: 750rpx;
		height: 98rpx;
		background: #FFFFFF;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: flex-end;
	}

	.cancelBtn {
		width: 150rpx;
		height: 56rpx;
		border-radius: 36rpx;
		border: 2rpx solid #DDDDDD;
		text-align: center;
		line-height: 56rpx;
		font-size: 28rpx;
		color: #3C3C3C;
		margin-top: 21rpx;
		margin-right: 16rpx;
		margin-left: 20rpx;
	}

	.tongyiView {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		padding: 30rpx 24rpx;
		margin: 20rpx 0;
	}
</style>