<template>
	<view class="content">
		<view class="box">
			<text class="text">{{type === '0'?'支付失败':'支付成功'}}</text>
			<view class="money">￥<text class="number">{{totalPrice}}</text></view>
			<view class="payment-fail" v-if="type === '0'">
				抱歉，你的订单支付失败
			</view>
			<button v-if="type === '1'" @click="goDetail" type="default" class="custom-btn">返回</button>
			<view v-else class="btn-fail">
				<button @click="onPay" type="default" class="custom-btn">重新支付</button>
				<button @click="goDetail" type="default" class="view-order">返回</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		payOrderApi,
	} from '@/config/api.js'
	export default {
		data() {
			return {
				id: '',
				type: '0', // 0:支付失败  1:支付成功
				totalPrice: '0.00' // 订单总价
			}
		},
		onLoad(options) {
			this.id = options.id
			this.totalPrice = options.price
			this.type = options.type
		},
		methods: {
			onPay() {
				payOrderApi({id: this.id}).then(res=> {
					this.type = '1'
				}).catch(err=> {
					this.type = '0'
				})
			},
			goDetail() {
				uni.switchTab({
					url: '/pages/home/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background-color: #fff;

		.box {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 68rpx;
			padding-bottom: 100rpx;

			.text {
				font-size: 28rpx;
				font-weight: 500;
				color: #3D3D3D;
			}

			.money {
				margin-top: 64rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #3D3D3D;

				.number {
					font-size: 60rpx;
					font-weight: bold;
					color: #3D3D3D;
				}
			}

			.payment-fail {
				margin-top: 11px;
				font-size: 24rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #AAAAAA;
			}

			.custom-btn {
				width: 220rpx;
				height: 64rpx;
				line-height: 64rpx;
				border-radius: 32rpx;
				background-color: #F1615B;
				margin-top: 72rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #FFFFFF;

				&::after {
					border: none;
				}
			}

			.view-order {
				width: 220rpx;
				height: 64rpx;
				line-height: 64rpx;
				border-radius: 32rpx;
				background-color: #E7E7E7;
				margin-top: 32rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #767676;

				&::after {
					border: none;
				}
			}
		}
	}
</style>
