<template>
	<view class="comfirmOrder">
		<CommonCell :lineInfo="lineInfo" />
		<view class="cost">人均费用：<text style="margin-left: 20rpx;color: #333;">20元/人</text></view>
		
		<view class="agreement_list">
			<u-checkbox-group
				v-model="checkboxValue"
				placement="column"
				@change="checkboxChange"
			>
				<u-checkbox
					:customStyle="{marginBottom: '8px'}"
					v-for="(item, index) in checkboxList"
					shape="circle"
					:activeColor="ThemeColor.PrimaryColor"
					labelSize="26rpx"
					size="26rpx"
					:key="index"
					:label="item.name"
					:name="item.name"
				/>
			</u-checkbox-group>
		</view>
	
	
		<view class="pay_box">
			<MyButton title="立即支付" @comfirn="goRouter"/>
		</view>
		
		<u-popup :show="show" :round="10" mode="center" :customStyle="{width: '690rpx'}" @close="show = false">
			<view class="popup_tip">
				<view class="popup_title">-  温馨提示  -</view>
				<view class="tip_box">
					<image class="order_bg" src="@/static/images/arenaDetail/order_bg.png" mode="widthFix"></image>
					<view class="tip_list">
						<view class="tip_item" v-for="(item, index) in tipList" :key="index">
							{{ item }}
						</view>
					</view>
				</view>
				
				<view class="btn" @click="show = false">我知道了</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import CommonCell from '@/components/commonCell.vue'
	import MyButton from '@/components/myButton.vue'
	import ThemeColor from '@/utils/themeColor.js'
	export default {
		components: { MyButton, CommonCell },
		data() {
			return {
				ThemeColor,
				show: false, // 弹出层提示
				tipList: [
					'1.下单后10分钟内可以全额退款，距离开场8小时前取消可以全额退款。',
					'2.下单后超过10分钟取消订单退订规则如下：',
					'3.开场前8小时内取消订单则发起人可退回支付金额的50%；',
					'4.室外场地因天气原因取消订单，则全额退款；需场地管理人员人工审核。'
				],
				lineInfo: [
					{ title: '订单流水号', valueName: '南宁站 2022-12-26 16:23:45 000026', type: 'text' },
					{ title: '参与人数', valueName: '8人', type: 'text' },
					{ title: '场馆', valueName: '彩虹体育馆', type: 'text' },
					{ title: '场地', valueName: '羽毛球1号场', type: 'text' },
					{ title: '预约时间段', valueName: '2022-12-26（周一） 15:00-16:00', type: 'text' }
				],
				// 选择的值
				checkboxValue:[],
				// 协议数据列表
				checkboxList: [
					{ name: '我已阅读并同意《订场条款》', disabled: false },
					{ name: '使用余额组合支付：¥236', disabled: false },
					{ name: '使用周卡支付', disabled: false }
				]
			}
		},
		created() {
			this.show = true
		},
		 methods: {
			checkboxChange(n) {
				console.log('change', n);
			},
			goRouter(){
				uni.navigateTo({
					url: '/pages/paysuccess/paysuccess'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.comfirmOrder{
	position: relative;
	padding: 24rpx 30rpx 0;
	box-sizing: border-box;
	min-height: 100vh;
	background-color: #F6F6F6;

	.cost{
		display: flex;
		align-items: center;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin: 20rpx 0;
		padding: 0 30rpx;
		font-size: 26rpx;
		color: #666;
	}
	.agreement_list{
		padding-top: 20rpx;
	}
}

.pay_box{
	position: absolute;
	height: 112rpx;
	width: 100%;
	box-sizing: border-box;
	bottom: 0;
	left: 0;
	background-color: #fff;
	padding: 16rpx 30rpx;
}


.popup_tip{
	height: 784rpx;
	background: #FFFFFF;
	border-radius: 24rpx;
	padding: 38rpx 52rpx;
	.popup_title{
		color: #ff9900;
		font-size: 32rpx;
		line-height: 44rpx;
		margin-bottom: 30rpx;
		text-align: center;
	}
	.tip_box{
		position: relative;
		height: 530rpx;
		margin-bottom: 70rpx;
		.order_bg{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 544rpx;
			height: 438rpx;
		}
		.tip_list{
			display: flex;
			flex-direction: column;
			font-size: 28rpx;
			color: #666;
			line-height: 48rpx;
			.tip_item{
				margin-bottom: 60rpx;
				&:last-child{
					margin-bottom: 0;
				}
			}
		}
	}
	.btn{
		width: 372rpx;
		height: 76rpx;
		margin: 0 auto;
		background: linear-gradient( 270deg, $uni-color-primary 0%, #FCD723 100%);
		border-radius: 686rpx;
		font-size: 28rpx;
		color: #fff;
		line-height: 76rpx;
		text-align: center;
	}
}
</style>