<template>
	<view :class="details_index==0 ||details_index==6 ? 'body' :''">
		<view class="details_title" :class="details_index==3?'refund_details_title':''">
			<view class="cancelled toPaid" v-if="details_index==0 ||details_index==6">
				<view class="cancelled_left">
					<view >
						<view class="shipped_right_text">{{details_index==0?'Cancelled':'Refunded'}}</view>
						<view>Cancelled time：24/04/2022 15:54:21</view>
					</view>
				</view>
			</view>
			
			<view class="cancelled" v-if="details_index==1 ">
				<view class="cancelled_left">
					<image src="../../static/img/time.png" mode=""></image>
					<view class="cancelled_left_info">
						<text class="shipped_right_text">Refund rejected</text>
						<view>End in: 71:59:59</view>
					</view>
				</view>
				
			</view>
			
			<view class="cancelled" v-if="details_index==2 || details_index==4 || details_index==5">
				<view class="cancelled_left">
					<image src="../../static/img/time.png" mode=""></image>
					<view class="cancelled_left_info">
						<text class="shipped_right_text">To be returned</text>
						<view>End in: 71:59:59</view>
					</view>
				</view>
			</view>
			
			<view class="cancelled refund_transit" v-if="details_index==3">
				<view class="cancelled_left">
					<image src="../../static/img/transit.png" mode=""></image>
					<view class="cancelled_left_info">
						<text class="shipped_right_text">To be returned</text>
					</view>
				</view>
			</view>
			
			
			
		</view>
		<view class="refund_success" v-if="details_index==6">
			<view class="refund_success_item">
				<text>Refund amount：</text>
				<text class="refund_success_item_text">US$12.5</text>
			</view>
			<view class="refund_success_item">
				<text>Points：</text>
				<text class="refund_success_item_text">2.5</text>
			</view>
		</view>
		<view class="refund_address" v-if="details_index==2">
			<view class="address_title">Return address</view>
			<view class="address_content">
				<view class="address_content_item">name: zhangsan</view>
				<view class="address_content_item">phone: +8613800138000</view>
				<view class="address_content_item">country:  china</view>
				<view class="address_content_item">state:  广东省 </view>
				<view class="address_content_item">city：深圳市 </view>
				<view class="address_content_item">zipcode：518000</view>
				<view class="address_content_item">address line:详细地址(例：粤海街道深圳湾生态科技园9A3)</view>
			</view>
		</view>
		<view class="negotiation_details" @click="isShow=true">
			<text>Negotiation Details</text>
			<image src="../../static/img/right.png" mode=""></image>
		</view>
		
		<view class="order_popup_commodity">
			<view class="good_info" v-for="(item,index) in 2 " :key="index">
				<view class="good_info_left ">
					<view class="good_info_image" v-for="(item,index) in 1" :key="index"></view>
					<view class="left_info">
						<view class="info_name">Adidas Yeezy Boost 350 V2  DazzlingBlue Black GY7164 Men's</view>
						<view class="left_info_bottom">
							<view class="info_lable">
								<text>Multicolor;41</text>
								<image src="/static/img/bottom.png" mode=""></image>
							</view>
							<text>x1</text>
						</view>
						<view class="info_price">
							<text>US$314.00</text>
							<!-- <button>Rrefund</button> -->
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		
		
		<view class="summary">
			<view class="summary_item">
				<view>Refund ID</view>
				<view class="summary_item_right">2013461121212</view>
			</view>
			<view class="summary_item">
				<view>Refund Amount</view>
				<view class="summary_item_right">US$12.5</view>
			</view>
			<view class="summary_item">
				<view>Return Type</view>
				<view class="summary_item_right">Refund Only</view>
			</view>
			<view class="summary_item">
				<view>Application Time</view>
				<view class="summary_item_right"> 21/04/2022 15:42:31</view>
			</view>
			<view class="summary_item" >
				<view>Reason For Refund</view>
				<view class="summary_item_right">Quality Problem</view>
			</view>
			
			
		</view>
		
		<view class="details_footer" v-if="details_index!=0 && details_index!=6">
			<button class="white" v-if="details_index==1">MODIFY REFUND</button>
			<button class="white" v-if="details_index==1 || details_index==2 || details_index==3 || details_index==4 || details_index==5">CANCEL RETURN</button>
			
			<button class="white" v-if="details_index==2 ">RETURN LOGISTICS</button>
			
			<!-- <button class="black" v-if="details_index==4">CONFIRM RECEIPT</button> -->
		</view>
		<view class="mask" v-show="isShow" @click="isShow=false"></view>
		<view class="order_popup" v-show="isShow">
			<view class="order_popup_title">
				<text>Negotiation Details</text>
				<image src="../../static/img/close1.png" mode="" @click="isShow=false"></image>
			</view>
			<view class="logistics_details">
				<view class="logistics_step step_active">
					<view class="logistics_step_title">CHIC Has Refunded</view>
					<text>Refund amount: US $12.5</text>
					<view class="logistics_step_time">2020.12.13  23:54:12</view>
				</view>
				<view class="logistics_step">
					<view class="logistics_step_title">CHIC Reject Goods</view>
					<text>Reason: 驳回的内容。 please modify the refund application or return information</text>
					<view class="logistics_step_time">2020.12.13  23:54:12</view>
				</view>
				<view class="logistics_step">
					<view class="logistics_step_title">Buyer Has Sent The Goods</view>
					<text>Waiting for CHIC to receive the goods</text>
					<view class="logistics_step_time">2020.12.13  23:54:12</view>
				</view>
				<view class="logistics_step">
					<view class="logistics_step_title">CHIC Agrees To Refund</view>
					<text>To be returned by the buyer，Please submit the return logistics order number within 7 days</text>
					<view class="logistics_step_time">2020.12.13  23:54:12</view>
				</view>
				<view class="logistics_step">
					<view class="logistics_step_title">Buyer Modifies Refund Application</view>
					<text>Waiting for CHIC processing</text>
					<view class="logistics_step_time">2020.12.13  23:54:12</view>
				</view>
				<view class="logistics_step">
					<view class="logistics_step_title">CHIC Refund Rejected</view>
					<text>Reason : 驳回的内容。please modify the refund information</text>
					<view class="logistics_step_time">2020.12.13  23:54:12</view>
				</view>
				<view class="logistics_step">
					<view class="logistics_step_title">Buyer Submits Refund Application</view>
					<text>Waiting for CHIC processing</text>
					<view class="logistics_step_time">2020.12.13  23:54:12</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				details_index:0,
				isShow:false,
			}
		},
		methods:{
			
		}
	}
</script>
<style>
</style>
<style lang="scss" scoped>
	@import "@/common/scss/order.scss";
	.body{
		padding-bottom: 140rpx;
		
	}
	.negotiation_details{
		padding: 40.67rpx 0;
		padding-left: 28rpx;
		padding-right: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28.67rpx;
		font-weight: bold;
		border-bottom: 14.67rpx #F6F5FA solid;
		image{
			width: 20rpx;
			height: 20rpx;
		}
	}
	.toPaid{
		.shipped_right_text{
			margin-bottom: 14rpx;
		}
	}
	.refund_details_title{
		height: 126rpx !important;
	}
	.refund_transit{
		height: 126rpx !important;
	}
	.summary{
		border-bottom: 14.67rpx #F6F5FA solid;
		padding-bottom: 44.67rpx;
	}
	.refund_address{
		padding: 40rpx 0;
		padding-left: 28rpx;
		padding-right: 16.67rpx;
		font-size: 24rpx;
		color: #666666;
		font-weight: bold;
		border-bottom: 14.67rpx #F6F5FA solid;
		.address_title{
			font-size: 28.67rpx;
			color: black;
			margin-bottom: 22rpx;
		}
		.address_content{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.address_content_item{
				width: 50%;
				margin-bottom: 10.67rpx;
				&:last-child{
					width: 100%;
				}
			}
		}
	}
	.refund_success{
		padding: 40rpx 26.67rpx;
		font-size: 28.67rpx;
		font-weight: bold;
		border-bottom: 14.67rpx #F6F5FA solid;
		.refund_success_item{
			margin-bottom: 20rpx;
			&:last-child{
				margin-bottom: 0;
			}
			.refund_success_item_text{
				color: #B22234;
			}
		}
	}
	.order_popup{
		padding: 0 28rpx;
		box-sizing: border-box;
		
		.order_popup_title{
			justify-content: flex-start;
		}
	}
	.logistics_details{
		border-top: none;
		padding: 26rpx 0;
		padding-left: 0;
		padding-right: 27.33rpx;
		max-height: 1123.33rpx;
		overflow-y: auto;
		.logistics_step{
			font-size: 24rpx;
			color: #333333;
			font-weight: bold;
			&:before{
				content: "";
				width: 26.67rpx;
				height: 26.67rpx;
				background-color: #E2E2E2;
			}
			&::after{
				background-color: #E2E2E2;
				left: 12.5rpx;
			}
			.logistics_step_title{
				font-size: 28rpx;
				color: #000000;
				margin-bottom: 10rpx;
				font-weight: 500;
			}
			.logistics_step_time{
				font-size: 20rpx;
				color: #999999;
			}
		}
	}
	.step_active{
		color: #333333 !important;
		
		&:before{
			background-image: url(@/static/img/yuan.png);
			background-size: 100% 100%;
			background-color: white !important;
		}
		
	}
</style>