<template>
	<view class="cv-container">

		<!-- 可滚动内容区 -->
		<view class="cv-scroll-content">
			<!-- 访客信息 -->
			<view class="info">
				<view class="cv-section-title">访客信息</view>
				<view class="cv-avatar-upload" @click="chooseAvatar">
					<view v-if="!form.avatar" class="cv-avatar-placeholder">上传正脸照</view>
					<image v-else :src="form.avatar" class="cv-avatar-img" />
				</view>
				<input class="cv-input-name" placeholder="请输入姓名" v-model="form.name" />
				<input class="cv-input-phone" placeholder="请输入来访人电话" v-model="form.phone" />
				<input class="cv-input" placeholder="请输入来访人身份证/军官证" v-model="form.idCard" />
			</view>
			<!-- 选择来访目的 -->
			<view class="cv-section">
				<view class="cv-section-title">选择来访目的</view>
				<view class="cv-purpose-list">
					<view v-for="(item, idx) in purposes" :key="idx"
						:class="['cv-purpose-btn', {active: form.purpose === item}]" @click="form.purpose = item">{{ item }}
					</view>
				</view>
				<view class="cv-room-select" @click="chooseRoom">
					<text>{{ form.room || '请选择访问楼栋及房间号' }}</text>
					<text class="cv-arrow">&gt;</text>
				</view>
			</view>
			<!-- 来访时间 -->
			<view class="cv-section">
				<view class="cv-section-title">来访时间</view>
				<view class="cv-time-list">
					<view v-for="(item, idx) in times" :key="idx" :class="['cv-time-btn', {active: form.time === item}]"
						@click="form.time = item">{{ item }}</view>
				</view>
			</view>
			<!-- 是否预约车位 -->
			<view class="cv-section">
				<view class="cv-parking-row">
					<view class="cv-section-title">是否预约车位</view>
					<view class="cv-radio-label" @click="form.parking = true">
						<view :class="['cv-radio-custom', {checked: form.parking === true}]" />
						<text>是</text>
					</view>
					<view class="cv-radio-label" @click="form.parking = false">
						<view :class="['cv-radio-custom', {checked: form.parking === false}]" />
						<text>否</text>
					</view>
					<text class="cv-parking-count">
						<text class="cv-parking-num">50</text><text class="cv-parking-total">/100</text>
					</text>
				</view>
				<view class="cv-room-select" @click="chooseCarNumber">
					<text>{{ form.carNumber || '请选择车牌号' }}</text>
					<text class="cv-arrow">&gt;</text>
				</view>
			</view>
			<!-- 提交按钮 -->
			<button class="cv-submit-btn">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					phone: '',
					idCard: '',
					avatar: '',
					purpose: '',
					room: '',
					time: '',
					parking: false,
					carNumber: ''
				},
				purposes: ['商务合作', '园区参观', '面试签到', '装修放行', '家政服务', '送货上门'],
				times: ['今天(2025-07-04)', '明天(2025-07-04)']
			}
		},
		methods: {
		
			chooseAvatar() {
				// 这里可集成uni.chooseImage
			},
			chooseRoom() {
				// 这里可弹出选择房间号
			},
			chooseCarNumber() {
				// 这里可弹出选择车牌号
			}
		}
	}
</script>

<style scoped>
	.cv-container {
		background: #fff;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

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

	.cv-title {
		font-size: 36rpx;
		color: #000;
	}

	.cv-scroll-content {
		flex: 1;
		overflow-y: auto;
		padding-bottom: 120rpx;
	}

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

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

	.cv-section-title {
		font-size: 32rpx;
		color: #000;
		font-weight: 600;
	}


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

	.cv-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;
		border: none;
		outline: none;
	}

	.cv-input-phone {
		width: 363rpx;
		height: 73rpx;
		background: #F7F7F7;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #222;
		padding: 0 24rpx;
		margin-bottom: 29rpx;
		border: none;
		outline: none;
	}

	.cv-input {
		width: 435rpx;
		height: 73rpx;
		background: #F7F7F7;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #222;
		padding: 0 24rpx;
		margin-bottom: 29rpx;
		border: none;
		outline: none;
	}

	.cv-avatar-upload {
		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;
	}

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

	.cv-avatar-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 12rpx;
	}

	.cv-purpose-list {
		display: flex;
		flex-wrap: wrap;
		margin-top: 36rpx;
		/* 不设置gap的列间距，水平方向用margin控制 */
	}

	.cv-purpose-btn {
		width: calc((100% - 58rpx) / 3);
		margin-right: 29rpx;
		margin-bottom: 29rpx;
		box-sizing: border-box;
		padding: 18rpx 0;
		text-align: center;
		background: #EBF5FF;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #0B0B0B;
	}

	.cv-purpose-btn:nth-child(3n) {
		margin-right: 0;
	}

	.cv-purpose-btn.active {
		background: #007CFF;
		color: #fff;
	}

	.cv-room-select {
		width: 435rpx;
		height: 73rpx;
		background: #F7F7F7;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #808080;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;
		margin-top: 12rpx;
	}

	.cv-arrow {
		font-size: 32rpx;
		color: #bbb;
	}

	.cv-time-list {
		display: flex;
		flex-direction: column;
		gap: 23rpx;
		margin-top: 32rpx;
	}

	.cv-time-btn {
		width: 302rpx;
		height: 73rpx;
		text-align: center;
		background: #EBF5FF;
		border-radius: 12rpx;
		font-size: 24rpx;
		color: #0B0B0B;
		display: flex;
		/* 新增 */
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
	}

	.cv-time-btn.active {
		background: #007CFF;
		color: #fff;
	}

	.cv-parking-row {
		display: flex;
		align-items: center;
		gap: 24rpx;
		margin-bottom: 18rpx;
	}

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

	.cv-radio-custom {
		width: 22rpx;
		height: 22rpx;
		border-radius: 50%;
		border: 1rpx solid #007CFF;
		background: #fff;
		margin-right: 12rpx;
		box-sizing: border-box;
		transition: background 0.2s, border 0.2s;
	}

	.cv-radio-custom.checked {
		background: #007CFF;
		border: 1rpx solid #007CFF;
	}

	.cv-parking-count {
		margin-left: 24rpx;
		font-size: 24rpx;
		background: #EBF5FF;
		border-radius: 8rpx;
		padding: 0 18rpx;
		height: 54rpx;
		display: flex;
		align-items: center;
	}
	.cv-parking-num {
		color: #007CFF;
	}
	.cv-parking-total {
		color: #0B0B0B;
	}

	.cv-submit-btn {
		width: 90vw;
		height: 90rpx;
		background: #0090FF;
		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);
	}
</style>