<template>
	<view class="vi-container">
		<!-- 顶部 -->
		<view class="vi-navbar">
			<image src="/static/ic_back.png" class="vi-back" @click="goBack" />
			<text class="vi-title">预约申请</text>
		</view>
		<!-- 访客信息 -->
		<view class="vi-section info">
			<view class="vi-section-title">访客信息</view>
			<view class="vi-avatar-box">
				<view class="vi-avatar-placeholder">人脸照片</view>
			</view>
			<view class="vi-input-name">张桂花</view>
			<view class="vi-input-phone">13254789579</view>
			<view class="vi-input">5021119740214****</view>
		</view>
		<!-- 选择来访目的 -->
		<view class="vi-section">
			<view class="vi-section-title">选择来访目的</view>
			<view class="vi-purpose-list">
				<view class="vi-purpose-btn-active">园区参观</view>
				<view class="vi-purpose-btn">综合服务中心1栋8023</view>
			</view>
		</view>
		<!-- 来访时间 -->
		<view class="vi-section">
			<view class="vi-section-title">来访时间</view>
			<view class="vi-time-btn">今天(2025-07-04)</view>
		</view>
		<!-- 是否预约车位 -->
		<view class="vi-section">
			<view class="vi-parking-row">
				<view class="vi-section-title2">是否预约车位</view>
				<view class="vi-checkbox-label">
					<view class="vi-checkbox checked"></view>
					<text>是</text>
				</view>
				<view class="vi-checkbox-label">
					<view class="vi-checkbox"></view>
					<text>否</text>
				</view>
				<text class="vi-parking-count">
					<text class="vi-parking-num">50</text><text class="vi-parking-total">/100</text>
				</text>
			</view>
			<view class="vi-car-input">渝A-V1254</view>
		</view>
		<!-- 底部按钮 -->
		<button class="vi-submit-btn">同意</button>
	</view>
</template>

<script>
	export default {
		methods: {
			goBack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style scoped>
	.vi-container {
		background: #fff;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	.vi-navbar {
		width: 100%;
		height: 120rpx;
		padding-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		background: #fff;
	}

	.vi-back {
		position: absolute;
		left: 37rpx;
		width: 15rpx;
		height: 33rpx;
	}

	.vi-title {
		font-size: 36rpx;
		color: #222;
		font-weight: bold;
	}

	.vi-section {
		margin: 36rpx 56rpx 0 56rpx;
	}

	.vi-section-title {
		font-size: 32rpx;
		color: #000;
		font-weight: 600;
		margin-bottom: 23rpx;
	}
	
	
	.vi-section-title2 {
		font-size: 32rpx;
		color: #000;
		font-weight: 600;
	}

	.vi-info-row {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.vi-inputs {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 18rpx;
	}

	.vi-input-name,
	.vi-input-phone,
	.vi-input {
		width: 233rpx;
		height: 73rpx;
		background: #F7F7F7;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #222;
		padding: 0 24rpx;
		margin-bottom: 29rpx;
		display: flex;
		align-items: center;
	}

	.vi-avatar-box {
		width: 120rpx;
		height: 120rpx;
		background: #F7F8FA;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 24rpx;
	}

	.vi-avatar-placeholder {
		color: #bbb;
		font-size: 24rpx;
		text-align: center;
	}

	.vi-purpose-list {
		display: flex;
		flex-direction: row;
		gap: 29rpx;
		margin-top: 36rpx;
	}

	.vi-purpose-btn {
		width: 100%;
		box-sizing: border-box;
		padding: 18rpx 0;
		text-align: center;
		background: #EBF5FF;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #0B0B0B;
	}

	.vi-purpose-btn-active {
		width: 193rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		box-sizing: border-box;
		padding: 18rpx 0;
		text-align: center;
		background: #007CFF;
		color: #fff;
	}


	.vi-time-btn {
		width: 302rpx;
		height: 73rpx;
		box-sizing: border-box;
		text-align: center;
		background: #EBF5FF;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #222;
		display: flex;
		align-items: center;
		justify-content: center;
	}


	.vi-parking-row {
		display: flex;
		align-items: center;
		margin-top: 12rpx;
	}

	.vi-checkbox-label {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #0B0B0B;
		margin-left: 30rpx;
		cursor: pointer;
	}

	.vi-checkbox {
		width: 22rpx;
		height: 22rpx;
		border-radius: 50%;
		border: 1rpx solid #007CFF;
		background: #fff;
		margin-right: 12rpx;
		box-sizing: border-box;
	}

	.vi-checkbox.checked {
		background: #007CFF;
		border: 1rpx solid #007CFF;
	}

	.vi-parking-count {
		margin-left: 24rpx;
		font-size: 24rpx;
		background: #EBF5FF;
		border-radius: 8rpx;
		padding: 0 18rpx;
		height: 54rpx;
		display: flex;
		align-items: center;
	}

	.vi-parking-num {
		color: #007CFF;
	}

	.vi-parking-total {
		color: #0B0B0B;
	}

	.vi-car-input {
		width: 435rpx;
		height: 73rpx;
		background: #F7F7F7;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #222;
		padding: 0 24rpx;
		margin-top: 29rpx;
		display: flex;
		align-items: center;
	}

	.vi-submit-btn {
		width: 90vw;
		height: 90rpx;
		background: linear-gradient(90deg, #0090FF 0%, #2E9FFF 100%);
		color: #fff;
		font-size: 36rpx;
		border: none;
		border-radius: 45rpx;
		margin: 80rpx auto 0 auto;
		display: block;
		font-weight: bold;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.18);
	}

	.info {
		position: relative;
		margin: 36rpx 56rpx 0 56rpx;
	}

	.vi-avatar-box {
		position: absolute;
		width: 163rpx;
		height: 183rpx;
		top: 50rpx;
		right: 0rpx;
		background: #F7F8FA;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 24rpx;
	}

	.vi-avatar-placeholder {
		color: #bbb;
		font-size: 24rpx;
		text-align: center;
	}

	.vi-input-name {
		width: 233rpx;
		height: 73rpx;
		background: #F7F7F7;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #222;
		padding: 0 24rpx;
		margin-bottom: 29rpx;
		margin-top: 23rpx;
		display: flex;
		align-items: center;
	}

	.vi-input-phone {
		width: 363rpx;
		height: 73rpx;
		background: #F7F7F7;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #222;
		padding: 0 24rpx;
		margin-bottom: 29rpx;
		display: flex;
		align-items: center;
	}

	.vi-input {
		width: 435rpx;
		height: 73rpx;
		background: #F7F7F7;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #222;
		padding: 0 24rpx;
		margin-bottom: 29rpx;
		display: flex;
		align-items: center;
	}
</style>