<template>
    <view class="notice">
        <view class="notice-logo">
            <image style="width: 220rpx;height: 220rpx;" src="@/static/notice.png" mode=""></image>
        </view>
        <view class="notice-txt">
            <view class="notice-title">场馆预约成功</view>
            <view class="notice-desc">可以点击下方查看预约单具体信息</view>
        </view>

        <view class="btn">
            <view class="btn1" @click="seeOrder">查看订单</view>
            <view class="btn2" @click="done">完成</view>
        </view>

        <!-- 人脸录入提示 -->
		<Popup :show="facePopup" radius="16rpx">
			<view class="notice-popup" style="width: 100%; position: relative;">
                <image style="width: 36rpx;height: 36rpx;position: absolute; top: 0; right: 46rpx;" src="https://xh.stnav.com/uploads/sport/icon_close.png" mode="" @click="facePopup = false"></image>

				<view class="title">提示</view>
				<view class="desc" style="text-align: center;">   
					为了给您提供更安全、便捷的入场体验，请完成人脸识别认证。只需几秒钟，轻松刷脸入场！
				</view>
				<view class="btn" @click="toTakeFacePhoto">去录入</view>
			</view>
		</Popup>
    </view>
</template>

<script>
    import Popup from '@/components/uni-popup.vue';

    export default {
        components: {
            Popup,
        },
        data() {
            return {
                order_id: 0,
                ground_type: 1, // 1 网球 2篮球
                facePopup: false,
            };
        },

        onLoad(args) {
            this.ground_type = args.ground_type || 1;   
            this.order_id = args.order_id || 0;
        }, 

        methods: {
            getData() {
               
            },

            seeOrder() {
                uni.navigateTo({
                    url: '/pages/order/cg-my-order'
                });
            },

            done() {
                if (this.ground_type == 1) {
                    uni.reLaunch({
                        url: '/pages/index/index'
                    });
                } else if (this.ground_type == 2) {
                    // 篮球场需要人脸录入
                    this.facePopup = true;
                }
            },

            // 去录入人脸照片
            toTakeFacePhoto() {
                this.facePopup = false;
                uni.navigateTo({
                    url: `/bundle/face/face-info?order_id=${this.order_id}`
                });
            },
        }
    };
</script>

<style lang="scss">
	page {
		background-color: $xh-bg;
	}

    .notice {
        .notice-logo {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 126rpx;
        }

        .notice-txt {
            margin-top: 76rpx;
            text-align: center;

            .notice-title {
                font-size: 36rpx;
                color: #303133;
                line-height: 50rpx;
            }

            .notice-desc {
                font-weight: 400;
                font-size: 28rpx;
                color: #9CA3AF;
                line-height: 40rpx;
                margin-top: 20rpx;
            }
        }

        .btn {
            margin-top: 78rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            
            .btn1 {
                width: 300rpx;
                height: 90rpx;
                text-align: center;
                line-height: 90rpx;
                background-color: #fff;
                font-weight: 500;
                font-size: 30rpx;
                color: #303133;
                border-radius: 24rpx;
                margin-right: 28rpx;
            }

            .btn2 {
                width: 300rpx;
                height: 90rpx;
                text-align: center;
                line-height: 90rpx;
                background-color: #365A9A;
                font-weight: 500;
                font-size: 30rpx;
                color: #FFFFFF;
                border-radius: 24rpx;
            }
        }
    }

    .notice-popup {
		padding-bottom: 20rpx;
		
		.title {
			font-size: 36rpx;
			color: #303133;
			line-height: 50rpx;
			text-align: center;
		}

		.desc {
			margin-top: 48rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #303133;
			line-height: 52rpx;
			text-align: center;
		}

		.btn {
			font-size: 32rpx;
			background: #365A9A;
			border-radius: 8rpx;
			margin: 92rpx 44rpx 0;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
		}
	}
</style>
