<template>
	<view class="pay_success">
		<view class="header_box"></view>
		
		<view class="content_box">
			<view class="dataCard">
				<!-- 成功logo -->
				<view class="success_log">
					<image class="logo" src="@/static/images/arenaDetail/pay_success.png" mode="widthFix"></image>
					<text>支付成功！</text>
				</view>
				<!-- 订单信息 -->
				<view class="orderInfo">
					<view class="order_line" v-for="(item, index) in lineInfo" :key="index">
						<text class="left_text">{{ item.title }}</text>
						<view class="right_text">{{ item.content }}</view>
					</view>
				</view>
				
				<!-- 总金额 -->
				<view v-if="!isVip" class="total_money">
					<text>总支付金额</text>
					<text :style="{ color: ThemeColor.PrimaryColor, fontWeight: 700}">¥ 234.83</text>
				</view>
				<!-- 周卡支付 -->
				<view v-else class="total_money">
					<text>周卡剩余</text>
					<text :style="{color: ThemeColor.PrimaryColor}">5天</text>
				</view>
				<view v-if="!isVip" class="avg_money">人均费用：¥ 20/人</view>
				
			</view>
		</view>
		
		<view class="btn_list">
			<MyButton title="查看订单" @comfirn="goRouter" />
			<MyButton title="返回首页" :border="true" bgColor="#fff" :color="ThemeColor.PrimaryColor" @comfirn="goRouter" />
		</view>
		
	</view>
</template>

<script>
	import ThemeColor from '@/utils/themeColor'
	import MyButton from '@/components/myButton.vue'
	export default {
		components: { MyButton },
		data() {
			return {
				ThemeColor,
				isVip: false,
				lineInfo: [
					{ title: '订单流水号：', content: '南宁站 2022-12-26 16:23:45 000026' },
					{ title: '参与人数：', content: '8人' },
					{ title: '场馆：', content: '彩虹体育馆' },
					{ title: '场地：', content: '羽毛球1号场' },
					{ title: '预约时间段：', content: '2022-12-26（周一） 15:00-16:00' }
				]
			}
		},
		methods: {
			goRouter(){
				uni.switchTab({
					url: '/pages/home/home'
				})
			}
		}
	}
</script>

<style lang="scss">
.pay_success{
	background-color: #F6F6F6;
	box-sizing: border-box;
	padding-bottom: 60rpx;
	.header_box{
		width: 100%;
		height: 208rpx;
		background: linear-gradient( 270deg, #FCD723 0%, $uni-color-primary 100%);
	}
	.content_box{
		margin-top: -140rpx;
		padding: 0 30rpx;
		.dataCard{
			position: relative;
			padding: 32rpx;
			background-color: #fff;
			background-blend-mode: soft-light;
			background-size: cover;
			background-position: center;
			// 成功logo
			.success_log{
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #333;
				font-size: 36rpx;
				font-weight: 600;
				border-bottom: 2rpx dashed rgba(225,225,225,0.7);
				padding-bottom: 36rpx;
				.logo{
					width: 122rpx;
					height: 122rpx;
					margin-bottom: 20rpx;
				}
			}
			// 订单信息
			.orderInfo{
				height: 468rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				box-sizing: border-box;
				border-bottom: 2rpx dashed rgba(225,225,225,0.7);
				.order_line{
					display: flex;
					align-items: center;
					height: 90rpx;
					font-size: 26rpx;
					.left_text{ 
						color: #666;
						margin-right: 6rpx;
					}
					.right_text{ 
						color: #333;
					}
				}
			}
			
			// 总金额
			.total_money{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32rpx;
				line-height: 36rpx;
				color: #333;
				margin: 32rpx 0;
			}
			// 均额
			.avg_money{
				text-align: right;
				color: #666;
				font-size: 24rpx;
				line-height: 36rpx;
			}
			
			&::before{
				content: '';
				position: absolute;
				top: -20rpx;
				left: 0;
				width: 100%;
				height: 40rpx;
				display: block;
				background: linear-gradient(-45deg,transparent 33.33%,#fff 33.33%,#fff 66.666%,transparent 66.666%),
				linear-gradient(45deg,transparent 33.33%,#fff 33.33%,#fff 66.666%,transparent 66.666%);
				background-size: 28rpx 44rpx;
			}
			&::after{
				content: '';
				position: absolute;
				bottom: -20rpx;
				left: 0;
				width: 100%;
				height: 40rpx;
				display: block;
				background: linear-gradient(-45deg,transparent 33.33%,#fff 33.33%,#fff 66.666%,transparent 66.666%),
				linear-gradient(45deg,transparent 33.33%,#fff 33.33%,#fff 66.666%,transparent 66.666%);
				background-size: 28rpx 44rpx;
				transform: rotateX(180deg);
				
			}
		}
	}
	
	.btn_list{
		display: flex;
		flex-direction: column;
		gap: 32rpx;
		padding: 0 30rpx;
		margin-top: 80rpx;
	}

}
</style>