<template>
	<view class="pay-success mg-lr-24">
		<!-- 退款中 -->
		<view v-if="status==1">
			<view class="white-bg-wrap u-f-aic u-f-jcc mg-bot-26">
				<view class="u-f u-f-fdc u-f-jcc u-f-aic">
					<image style="height: 114rpx;width:114rpx;" src="../.././static/common/refuse.png" class="mg-bot-38"></image>
					<text class="fs28 light-black fw400 mg-bot-26">正在退款中...</text>
					<view class="fs24 light-black fw400">我们会已最快的速度完成退款，请等待</view>
				</view>
			</view>
			
			<view class="white-bg-wrap">
				<view class="u-f u-f-jcsb u-f-aic mg-bot-20">
					<view style="flex: 1">
						<image class="border-radius-9 mg-right-10" :src="shopSureBillInfo.goodsImage"
							style="width: 128rpx;height: 128rpx;"
							:mode="'widthFix'"></image>
					</view>
					<view class="u-f u-f-fdc" style="flex: 4">
						<view class="fs28 light-black fw400 mg-bot-10 two-line-ellipsis">{{shopSureBillInfo.goodsName}}</view>
						<view class="mg-bot-10 u-f u-f-aic u-f-jcfs">
							<text class="light-gray fs24 mg-right-8">{{shopSureBillInfo.goodsSpecification}}</text>
						</view>
						<view class="u-f u-f-aic u-f-jcsb">
							<view class="u-f u-f-jcfs u-f-aic" style="margin-right: 96rpx;">
								<view class="mg-right-10">
									<text class="fs24 main-color"></text>
									<text class="fs32 main-color fw600">{{shopSureBillInfo.goodsPrice || 0}}</text>
								</view>
							</view>
							<view class="fs24 light-gray">x{{shopSureBillInfo.goodsNum}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="white-bg-wrap">
				<view class="u-f u-f-aic u-f-jcsb border-bot" style="padding: 30rpx 6rpx;">
					<text class="light-black">微信支付</text>
					<text class="light-gray">￥{{shopSureBillInfo.goodsPrice}}</text>
				</view>
				<view class="u-f u-f-aic u-f-jcsb" style="padding: 30rpx 6rpx">
					<text class="light-black">退款总额</text>
					<view class="main-color">
						<text class="fs24">￥</text>
						<text class="fs32">{{shopSureBillInfo.goodsPrice}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 售后服务单申请成功 -->
		<view v-else-if="status==2">
			<view class="u-f-aic u-f-jcc mg-bot-26" style="padding: 60rpx;">
				<view class="u-f u-f-fdc u-f-jcc u-f-aic">
					<!-- <image style="height: 228rpx;width:205rpx;" src="../.././static/common/check_success.png" class="mg-bot-38"></image> -->
					<text class="fs28 light-black fw400 mg-bot-26">售后服务单申请成功！</text>
					<view class="fs24 fw400 one-line-ellipsis mg-bot-46">
						<text class="light-black">预计</text>预计
						<text class="mian-color">48小时59分钟</text>
						<text class="light-black">内为您审核，请保持手机畅通，耐心等待</text>
					</view>
					<view class="line-btn">取消申请</view>
				</view>
			</view>
			
			<view class="white-bg-wrap">
				<view class="u-f u-f-jcsb u-f-aic mg-bot-20">
					<view style="flex: 1">
						<image class="border-radius-9 mg-right-10" :src="shopSureBillInfo.goodsImage"
							style="width: 128rpx;height: 128rpx;"
							:mode="'widthFix'"></image>
					</view>
					<view class="u-f u-f-fdc" style="flex: 4">
						<view class="fs28 light-black fw400 mg-bot-10 two-line-ellipsis">{{shopSureBillInfo.goodsName}}</view>
						<view class="mg-bot-10 u-f u-f-aic u-f-jcfs">
							<text class="light-gray fs24 mg-right-8">{{shopSureBillInfo.goodsSpecification}}</text>
						</view>
						<view class="u-f u-f-aic u-f-jcsb">
							<view class="u-f u-f-jcfs u-f-aic" style="margin-right: 96rpx;">
								<view class="mg-right-10">
									<text class="fs24 main-color"></text>
									<text class="fs32 main-color fw600">{{shopSureBillInfo.goodsPrice || 0}}</text>
								</view>
							</view>
							<view class="fs24 light-gray">x{{shopSureBillInfo.goodsNum}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 申请拒绝 -->
		<view v-else-if="status==3">
			<view class="u-f-aic u-f-jcc mg-bot-26" style="padding: 60rpx;">
				<view class="u-f u-f-fdc u-f-jcc u-f-aic">
					<!-- <image style="height: 114rpx;width:114rpx;" src="../.././static/common/check_refuse.png" class="mg-bot-38"></image> -->
					<text class="fs28 light-black fw400 mg-bot-26">商家已拒绝！</text>
					<view class="fs24 fw400 one-line-ellipsis mg-bot-46">
						您提交的审核材料不足，无法通过！
					</view>
				</view>
			</view>
			
			<view class="white-bg-wrap">
				<view class="u-f u-f-jcsb u-f-aic mg-bot-20">
					<view style="flex: 1">
						<image class="border-radius-9 mg-right-10" :src="shopSureBillInfo.goodsImage"
							style="width: 128rpx;height: 128rpx;"
							:mode="'widthFix'"></image>
					</view>
					<view class="u-f u-f-fdc" style="flex: 4">
						<view class="fs28 light-black fw400 mg-bot-10 two-line-ellipsis">{{shopSureBillInfo.goodsName}}</view>
						<view class="mg-bot-10 u-f u-f-aic u-f-jcfs">
							<text class="light-gray fs24 mg-right-8">{{shopSureBillInfo.goodsSpecification}}</text>
						</view>
						<view class="u-f u-f-aic u-f-jcsb">
							<view class="u-f u-f-jcfs u-f-aic" style="margin-right: 96rpx;">
								<view class="mg-right-10">
									<text class="fs24 main-color"></text>
									<text class="fs32 main-color fw600">{{shopSureBillInfo.goodsPrice || 0}}</text>
								</view>
							</view>
							<view class="fs24 light-gray">x{{shopSureBillInfo.goodsNum}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="u-f u-f-jcc">
				<view class="line-btn">联系客服</view>
			</view>
		</view>
		
		<!-- 退款已完成 -->
		<view v-else>
			<view class="u-f-aic u-f-jcc mg-bot-26" style="padding: 60rpx;">
				<view class="u-f u-f-fdc u-f-jcc u-f-aic">
					<!-- <image style="height: 114rpx;width:114rpx;" src="../.././static/common/check_comppeted.png" class="mg-bot-38"></image> -->
					<text class="fs28 light-black fw400 mg-bot-26">退款已完成</text>
				</view>
			</view>
			
			<view class="white-bg-wrap">
				<view class="u-f u-f-jcsb u-f-aic mg-bot-20">
					<view style="flex: 1">
						<image class="border-radius-9 mg-right-10" :src="shopSureBillInfo.goodsImage"
							style="width: 128rpx;height: 128rpx;"
							:mode="'widthFix'"></image>
					</view>
					<view class="u-f u-f-fdc" style="flex: 4">
						<view class="fs28 light-black fw400 mg-bot-10 two-line-ellipsis">{{shopSureBillInfo.goodsName}}</view>
						<view class="mg-bot-10 u-f u-f-aic u-f-jcfs">
							<text class="light-gray fs24 mg-right-8">{{shopSureBillInfo.goodsSpecification}}</text>
						</view>
						<view class="u-f u-f-aic u-f-jcsb">
							<view class="u-f u-f-jcfs u-f-aic" style="margin-right: 96rpx;">
								<view class="mg-right-10">
									<text class="fs24 main-color"></text>
									<text class="fs32 main-color fw600">{{shopSureBillInfo.goodsPrice || 0}}</text>
								</view>
							</view>
							<view class="fs24 light-gray">x{{shopSureBillInfo.goodsNum}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="white-bg-wrap">
				<view class="u-f u-f-aic u-f-jcsb border-bot" style="padding: 30rpx 6rpx;">
					<text class="light-black">微信支付</text>
					<text class="light-gray">￥{{shopSureBillInfo.goodsPrice}}</text>
				</view>
				<view class="u-f u-f-aic u-f-jcsb" style="padding: 30rpx 6rpx">
					<text class="light-black">退款总额</text>
					<view class="main-color">
						<text class="fs24">￥</text>
						<text class="fs32">{{shopSureBillInfo.goodsPrice}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopSureBillInfo: {},
				status: 1
			}
		},
		onLoad(options) {
			let data = options.data ? JSON.parse(decodeURIComponent(options.data)) : ""
			this.shopSureBillInfo = data || {}
			this.status = options.status || 0
			console.log('this.status', typeof this.status)
		},
		onNavigationBarButtonTap(e) {
			console.log(e);
			if (e.index===0) {
				this.goToOrderCenter()
			}
			// e的返回格式为json对象：{"text":"测试","index":0}
		},
		methods: {
			goToOrderCenter() {
				uni.navigateTo({
					url: '/pagesA/order-center/order-center'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}
</style>

<style lang="scss" scoped>
	.default-line-btn {
		width: calc(50% - 16rpx);
		font-size: 28rpx;
		text-align: center;
		padding: 22rpx 0;
		background: #FFFFFF;
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		border: 1rpx solid #707070;
	}
	
	.main-linegrident-btn {
		width: calc(50% - 16rpx);
		font-size: 28rpx;
		color: #ffffff;
		text-align: center;
		padding: 22rpx 0;
		background: linear-gradient( 90deg, #FF4502 0%, #FF8903 100%);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
	}
	
	.operte-btn {
		margin-top: 72rpx;
	}
	
	.good-recomend {
		margin-top: 70rpx;
		.gr-title {
			margin-bottom: 26rpx;
			.left-line {
				width: 165rpx;
				height: 4rpx;
				// background: url(../.././static/left-line.png) no-repeat center center;
			}
			.center-title {
				color: #FF4502;
				margin-right: 16rpx;
			}
			.right-line {
				width: 165rpx;
				height: 4rpx;
				// background: url(../.././static/common/right-line.png) no-repeat center center;
				margin-left: 16rpx;
			}
			
		}
		.product-list {
			margin: 0 24rpx;
			.product-wrap {
				width: calc(50% - 22rpx);
				margin-bottom: 20rpx;
				margin-right: 22rpx;
				&:nth-child(2n) {
					margin-right: 0;
				}
				.product-card {
					flex: 1;
					border-radius: 18rpx;
					background-color: #ffffff;
					.pc-image {
						width: 100%;
						height: 340rpx;
					}
					.pc-desc {
						color: #333333;
						height: 74rpx;
					}
					.pc-price {
						margin-top: 10rpx;
						color: #FF4502;
					}
				}
			}
		}
	}
	
	.line-btn {
		padding: 18rpx 84rpx;
		background: #FFFFFF;
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		border: 1rpx solid #707070;
	}
</style>
