<template>
	<view class="container">
		<!-- 预约信息卡片 -->
		<view class="info-card">
			<view class="info-row">
				<text class="info-label">预约项目</text>
				<text class="info-value">{{ itemData.name }}</text>
			</view>
			<view class="info-row split-row">
				<text class="info-label">预约时间</text>
				<text class="info-value">{{ reserveTime }}</text>
			</view>
			<view class="info-row">
				<text class="info-label">预约大厅</text>
				<text class="info-value">广西区直住房保障中心</text>
			</view>
			<view class="info-row">
				<text class="info-label">预约部门</text>
				<text class="info-value">{{ itemData.deptName }}</text>
			</view>
		</view>

		<!-- 个人信息卡片 -->
		<view class="info-card">
			<view class="info-row">
				<text class="info-label">姓名</text>
				<text class="info-value">{{ userinfo.name }}</text>
			</view>
			<view class="info-row split-row">
				<text class="info-label">手机号</text>
				<text class="info-value">{{ userinfo.phone }}</text>
			</view>
			<view class="info-row">
				<text class="info-label">证件类型</text>
				<text class="info-value">身份证</text>
			</view>
			<view class="info-row">
				<text class="info-label">证件号码</text>
				<text class="info-value">{{ userinfo.idCard }}</text>
			</view>
		</view>

		<!-- 底部按钮栏 -->
		<view class="btn-bar">
			<button class="btn-back" @click="handleGoBack">返回</button>
			<button class="btn-confirm" @click="handleConfirm">确认预约</button>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		submit
	} from '@/api/reserve.js'

	export default {
		data() {
			return {
				userinfo: {},
				itemData: {},
				reserveTime: ''
			}
		},
		onLoad(options) {
			this.itemData = JSON.parse(decodeURIComponent(options.data))
			this.reserveTime = options.time
			// this.userinfo = this.$store.state.userInfo
			this.getUserInfo()
		},
		methods: {
			// 返回上一页
			handleGoBack() {
				uni.navigateBack()
			},
			getUserInfo(){
				getUserInfo().then(res=>{
					this.userinfo = res.data
				})
			},
			// 确认预约
			handleConfirm() {
				const params = {
					userId: this.userinfo.id,
					applicant: this.userinfo.name,
					phone: this.userinfo.phone,
					idCard: this.userinfo.idCard,
					itemId: this.itemData.id,
					itemName: this.itemData.name,
					deptId: this.itemData.deptId,
					bookingDate: this.reserveTime.slice(0, 10),
					timeSlot: this.reserveTime.slice(11),
				}

				submit(params).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '预约成功！',
							icon: 'success'
						})
						
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/home/home'
							})
						}, 2000)
					}
				}).catch(err => {})


				// 可在此处添加跳转至预约成功页/首页逻辑
				// uni.reLaunch({ url: '/pages/index/index' })
			}
		}
	}
</script>

<style scoped>
	/* 全局容器 */
	.container {
		min-height: 92vh;
		background-color: #f5f5f5;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
		display: flex;
		flex-direction: column;
	}

	/* 信息卡片 */
	.info-card {
		background-color: #ffffff;
		border-radius: 24rpx;
		margin: 20rpx 30rpx;
		padding: 0 30rpx;
	}

	.info-row {
		display: flex;
		align-items: flex-start;
		padding: 20rpx 0;
	}

	.split-row {
		border-bottom: 1rpx solid #eeeeee;
	}

	.info-label {
		width: 220rpx;
		font-size: 34rpx;
		font-weight: 500;
		color: #333333;
		flex-shrink: 0;
	}

	.info-value {
		flex: 1;
		font-size: 34rpx;
		color: #333333;
		text-align: right;
		line-height: 1.5;
	}

	/* 底部按钮栏 */
	.btn-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		padding: 20rpx 30rpx 40rpx;
		background-color: #fff;
		gap: 30rpx;
		margin-top: auto;
		box-shadow: 0 -8rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.btn-back {
		flex: 1;
		height: 88rpx;
		line-height: 88rpx;
		background-color: rgba(242, 247, 255, 1);
		color: rgba(49, 134, 255, 1);
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		border: 2rpx solid rgba(208, 227, 255, 1);
	}

	.btn-confirm {
		flex: 2;
		height: 88rpx;
		line-height: 88rpx;
		background-color: rgba(49, 134, 255, 1);
		color: #ffffff;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		border: 2rpx solid rgba(208, 227, 255, 1);
	}
</style>