<template>
	<view class="page-shell booking-page">
		<view class="page-blur"></view>
		<view class="page-blur-secondary"></view>
		<view class="page-blur-tertiary"></view>

		<view class="page-content booking-content">
			<view class="booking-nav">
				<view>
					<text class="nav-title">预约服务</text>
					<text class="nav-subtitle">选择日期与时间，锁定到店档期</text>
				</view>
			</view>

			<view class="summary-card glass-card">
				<view class="summary-copy">
					<text class="summary-tag">BOOKING CONFIRMATION</text>
					<text class="summary-title">请确认本次到店信息</text>
					<text class="summary-store">{{ selectedStore.name }}</text>
					<view class="summary-pills">
						<text class="summary-pill">会员预约</text>
						<text class="summary-pill">到店前可修改</text>
						<text class="summary-pill">门店电话确认</text>
					</view>
				</view>
				<view class="summary-art-wrap">
					<image class="summary-art" src="/static/images/art-booking.png" mode="aspectFill" />
				</view>
			</view>

			<view class="selector-section">
				<view class="section-head">
					<text class="section-title">选择日期</text>
					<text class="section-link">未来 10 天</text>
				</view>
				<scroll-view class="date-scroll" scroll-x>
					<view class="date-row">
						<view v-for="item in dates" :key="item.value" class="date-chip"
							:class="{ active: selectedDate === item.value }" @tap="selectedDate = item.value">
							<text class="date-week">{{ item.week }}</text>
							<text class="date-day">{{ item.label }}</text>
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="selector-section">
				<view class="section-head">
					<text class="section-title">到店时间</text>
					<text class="section-link">已选 {{ selectedStart }}</text>
				</view>
				<view class="time-panel glass-card">
					<view class="time-helper">营业时段 09:00 - 19:00 · 每 30 分钟一个档位</view>
					<view class="time-grid">
						<view v-for="time in allTimes" :key="time" class="time-chip"
							:class="{ active: selectedStart === time }" @tap="selectStart(time)">
							{{ time }}
						</view>
					</view>
				</view>
			</view>

			<view class="selector-section">
				<view class="section-head">
					<text class="section-title">预约信息确认</text>
					<text class="section-link">提交前核对</text>
				</view>
				<view class="info-card glass-card">
					<view class="info-row">
						<text class="info-label">门店</text>
						<text class="info-value">{{ selectedStore.name }}</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">敏感肌护理，请避开刺激环境</text>
					</view>
					<view class="info-row">
						<text class="info-label">联系电话</text>
						<text class="info-value">138****5628</text>
					</view>
				</view>
			</view>

			<view class="selector-section">
				<view class="section-head">
					<text class="section-title">到店提醒</text>
					<text class="section-link">请留意</text>
				</view>
				<view class="notice-card glass-card">
					<view class="notice-item">
						<text class="notice-dot"></text>
						<text class="notice-text">建议提前 10 分钟到店，以便完成签到与护理准备。</text>
					</view>
					<view class="notice-item">
						<text class="notice-dot"></text>
						<text class="notice-text">如需调整预约，请在到店前在小程序内修改，或直接联系门店。</text>
					</view>
					<view class="notice-item">
						<text class="notice-dot"></text>
						<text class="notice-text">提交后将收到预约确认电话，请留意接听电话。</text>
					</view>
				</view>
			</view>

			<view class="booking-submit glass-card">
				<view class="bar-copy">
					<text class="bar-label">预约确认</text>
					<text class="bar-value">{{ selectedDateText }} {{ selectedStart }}</text>
				</view>
				<view class="primary-button booking-submit-button" @tap="confirmBooking">确认预约</view>
			</view>

			<view class="safe-bottom-space"></view>
		</view>

		<view class="lf-tabbar-wrap">
			<view class="lf-tabbar-panel">
				<view v-for="item in tabs" :key="item.key" class="lf-tabbar-item"
					:class="{ active: item.key === 'booking' }" @tap="goTab(item)">
					<view class="lf-tabbar-icon-shell">
						<image class="lf-tabbar-icon" :src="item.key === 'booking' ? item.activeIcon : item.icon"
							mode="aspectFit" />
					</view>
					<text class="lf-tabbar-label">{{ item.label }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { findStoreById } from '@/data/mock'

	export default {
		data() {
			return {
				tabs: [{
						key: 'home',
						label: '首页',
						path: '/pages/home/home',
						icon: '/static/images/tab-home.png',
						activeIcon: '/static/images/tab-home-active.png'
					},
					{
						key: 'booking',
						label: '预约',
						path: '/pages/booking/booking',
						icon: '/static/images/tab-booking.png',
						activeIcon: '/static/images/tab-booking-active.png'
					},
					{
						key: 'mall',
						label: '商城',
						path: '/packageMall/main/main',
						icon: '/static/images/tab-mall.png',
						activeIcon: '/static/images/tab-mall-active.png'
					},
					{
						key: 'profile',
						label: '我的',
						path: '/pages/profile/profile',
						icon: '/static/images/tab-profile.png',
						activeIcon: '/static/images/tab-profile-active.png'
					}
				],
				selectedDate: '',
				selectedStart: '14:00',
				dates: [],
				selectedStore: findStoreById(1)
			}
		},
		computed: {
			selectedDateText() {
				const current = this.dates.find(item => item.value === this.selectedDate)
				return current ? `${current.week} ${current.label}` : '今日'
			},
			allTimes() {
				return this.createHalfHourTimes(9, 19)
			}
		},
		created() {
			this.dates = this.buildDates(10)
			this.selectedDate = this.dates[0].value
		},
		onLoad(options) {
			if (options.storeId) {
				this.selectedStore = findStoreById(options.storeId)
			}
		},
		methods: {
			buildDates(total) {
				const weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
				const list = []
				for (let i = 0; i < total; i += 1) {
					const date = new Date()
					date.setDate(date.getDate() + i)
					const month = `${date.getMonth() + 1}`.padStart(2, '0')
					const day = `${date.getDate()}`.padStart(2, '0')
					list.push({
						value: `${date.getFullYear()}-${month}-${day}`,
						week: i === 0 ? '今天' : weeks[date.getDay()],
						label: `${month}/${day}`
					})
				}
				return list
			},
			createHalfHourTimes(start, end) {
				const list = []
				const startMinutes = start * 60
				const endMinutes = end * 60
				for (let minutes = startMinutes; minutes <= endMinutes; minutes += 30) {
					const hour = `${Math.floor(minutes / 60)}`.padStart(2, '0')
					const minute = `${minutes % 60}`.padStart(2, '0')
					list.push(`${hour}:${minute}`)
				}
				return list
			},
			selectStart(time) {
				this.selectedStart = time
			},
			goRecord() {
				uni.navigateTo({
					url: '/packageBooking/record/record'
				})
			},
			confirmBooking() {
				uni.navigateTo({
					url: `/packageBooking/success/success?date=${encodeURIComponent(this.selectedDateText)}&time=${encodeURIComponent(this.selectedStart)}&store=${encodeURIComponent(this.selectedStore.name)}`
				})
			},
			goTab(item) {
				if (item.key === 'booking') {
					return
				}
				uni.redirectTo({
					url: item.path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/styles/mixins.scss';

	.booking-content {
		padding-bottom: calc(260rpx + env(safe-area-inset-bottom));
	}

	.booking-nav {
		display: flex;
		align-items: center;
		margin-bottom: 28rpx;
	}

	.nav-title {
		display: block;
		font-size: 44rpx;
		font-weight: 700;
	}

	.nav-subtitle {
		display: block;
		margin-top: 10rpx;
		color: $text-secondary;
		font-size: 24rpx;
	}

	.summary-card,
	.info-card,
	.notice-card {
		padding: 36rpx;
	}

	.summary-card {
		position: relative;
		overflow: hidden;
		margin-bottom: 28rpx;
		min-height: 288rpx;

		&::after {
			content: '';
			position: absolute;
			right: -78rpx;
			top: -8rpx;
			width: 380rpx;
			height: 380rpx;
			border-radius: 50%;
			background: radial-gradient(circle, rgba(100, 140, 118, 0.04), rgba(100, 140, 118, 0));
			z-index: 0;
		}

		&::before {
			content: '';
			position: absolute;
			right: 10rpx;
			top: 64rpx;
			width: 220rpx;
			height: 220rpx;
			border-radius: 50%;
			border: 2rpx solid rgba(100, 140, 118, 0.035);
			z-index: 1;
		}
	}

	.summary-copy {
		position: relative;
		z-index: 3;
		max-width: 100%;
		padding-right: 36rpx;
	}

	.summary-tag {
		display: inline-block;
		font-size: 20rpx;
		letter-spacing: 3rpx;
		color: $brand-primary;
	}

	.summary-title {
		display: block;
		margin: 18rpx 0 14rpx;
		font-size: 40rpx;
		line-height: 1.35;
		font-weight: 700;
		white-space: nowrap;
	}

	.summary-store {
		display: block;
		font-size: 25rpx;
		color: $text-secondary;
		line-height: 1.7;
	}

	.summary-art-wrap {
		position: absolute;
		right: -118rpx;
		top: -34rpx;
		z-index: 1;
		width: 420rpx;
		height: 420rpx;
		border-radius: 50%;
		overflow: hidden;
		opacity: 0.08;
		pointer-events: none;

		&::after {
			content: '';
			position: absolute;
			inset: 0;
			background: radial-gradient(circle at 34% 40%, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0.12) 44%, rgba(255, 255, 255, 0));
		}
	}

	.summary-art {
		width: 480rpx;
		height: 480rpx;
		margin-left: -38rpx;
		margin-top: -28rpx;
		transform: rotate(-10deg) scale(1.04);
		filter: saturate(0.72) brightness(1.04);
	}

	.summary-pills {
		display: flex;
		flex-wrap: wrap;
		margin-top: 26rpx;
	}

	.summary-pill {
		@include chip-soft;
		margin: 0 16rpx 16rpx 0;
	}

	.summary-pill:nth-child(2) {
		@include chip-rose;
	}

	.summary-pill:nth-child(3) {
		@include chip-soft;
	}

	.selector-section {
		margin-bottom: 28rpx;
	}

	.date-scroll {
		white-space: nowrap;
	}

	.date-row {
		display: inline-flex;
		padding-bottom: 8rpx;
	}

	.date-chip {
		@include selection-chip;
		width: 148rpx;
		padding: 24rpx 0;
		margin-right: 18rpx;
		text-align: center;
		border-radius: 30rpx;
	}

	.date-week,
	.date-day {
		display: block;
	}

	.date-week {
		font-size: 24rpx;
		color: $text-secondary;
	}

	.date-day {
		margin-top: 12rpx;
		font-size: 34rpx;
		font-weight: 700;
	}

	.date-chip.active,
	.time-chip.active {
		@include selection-chip-active;

		.date-week {
			color: rgba(255, 255, 255, 0.88);
		}
	}

	.time-panel {
		@include outlined-card(0.9);
		padding: 28rpx 24rpx 18rpx;
	}

	.time-helper {
		display: block;
		margin-bottom: 18rpx;
		font-size: 22rpx;
		color: $text-tertiary;
	}

	.time-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.time-chip {
		@include selection-chip;
		width: calc((100% - 30rpx) / 4);
		height: 82rpx;
		margin-bottom: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 26rpx;
		font-weight: 600;
	}

	.info-row {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 18rpx 0;
		border-bottom: 1rpx solid rgba(100, 140, 118, 0.08);

		&:last-child {
			border-bottom: 0;
			padding-bottom: 0;
		}
	}

	.notice-card {
		@include outlined-card(0.9);
	}

	.notice-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 18rpx;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.notice-dot {
		width: 12rpx;
		height: 12rpx;
		margin: 12rpx 14rpx 0 0;
		border-radius: 50%;
		background: $brand-accent;
		flex-shrink: 0;
	}

	.notice-text {
		font-size: 24rpx;
		line-height: 1.8;
		color: $text-secondary;
	}

	.info-label {
		font-size: 26rpx;
		color: $text-secondary;
	}

	.info-value {
		width: 70%;
		font-size: 26rpx;
		line-height: 1.6;
		text-align: right;
		color: $text-primary;
	}

	.booking-submit {
		@include outlined-card(0.94);
		margin-top: 8rpx;
		padding: 28rpx 24rpx 24rpx;
		border-radius: 32rpx;
	}

	.bar-copy {
		margin-bottom: 22rpx;
	}

	.bar-label {
		display: block;
		font-size: 22rpx;
		color: $text-tertiary;
	}

	.bar-value {
		display: block;
		margin-top: 10rpx;
		font-size: 28rpx;
		font-weight: 700;
		color: $brand-primary-deep;
		line-height: 1.5;
	}

	.booking-submit-button {
		width: 100%;
		height: 86rpx;
	}
</style>
