<template>
	<view class="home-page">
		<custom-navbar bgColor="rgba(248,251,250,0.92)">
			<template #left>
				<view class="nav-brand" @click.stop>
					<view class="nav-brand__mark">
						<view class="nav-brand__leaf nav-brand__leaf--left"></view>
						<view class="nav-brand__leaf nav-brand__leaf--right"></view>
						<view class="nav-brand__stem"></view>
					</view>
					<text class="nav-brand__name">绿纤</text>
				</view>
			</template>
			<template #right>
				<view class="nav-bell" @click="goNotification">
					<view class="nav-bell__icon"></view>
					<view class="nav-bell__dot" v-if="hasNewMsg"></view>
				</view>
			</template>
		</custom-navbar>

		<view class="hero-wrap">
			<swiper
				class="hero-swiper"
				:indicator-dots="false"
				:autoplay="true"
				:interval="4000"
				:circular="true"
				:duration="600"
				@change="onSwiperChange"
			>
				<swiper-item v-for="(item, index) in bannerList" :key="index" @click="onBannerClick(item)">
					<view class="hero-slide">
						<image class="hero-slide__img" :src="item.image" mode="aspectFill"></image>
						<view class="hero-slide__mask"></view>
					</view>
				</swiper-item>
			</swiper>
			<view class="hero-dots">
				<view
					class="hero-dots__item"
					v-for="(item, index) in bannerList"
					:key="index"
					:class="{ 'hero-dots__item--active': swiperCurrent === index }"
				></view>
			</view>
		</view>

		<view class="portal-grid">
			<view class="portal-card portal-card--booking" @click="goBooking">
				<view class="portal-card__meta">
					<text class="portal-card__title">在线预约</text>
					<text class="portal-card__sub">选技师 · 选时间 · 一键约</text>
				</view>
				<view class="portal-card__art portal-card__art--calendar">
					<view class="icon-calendar">
						<view class="icon-calendar__head"></view>
						<view class="icon-calendar__body">
							<view class="icon-calendar__dot" v-for="i in 6" :key="i"></view>
						</view>
					</view>
				</view>
			</view>

			<view class="portal-side">
				<view class="portal-card portal-card--mall" @click="goMall">
					<view class="portal-card__meta">
						<text class="portal-card__title">逛商城</text>
						<text class="portal-card__sub">精选好物</text>
					</view>
					<view class="portal-card__art portal-card__art--bag">
						<view class="icon-bag">
							<view class="icon-bag__handle"></view>
							<view class="icon-bag__body"></view>
						</view>
					</view>
				</view>

				<view class="portal-card portal-card--record" @click="goBookingRecord">
					<view class="portal-card__meta">
						<text class="portal-card__title">预约记录</text>
						<text class="portal-card__sub">查看进度</text>
					</view>
					<view class="portal-card__art portal-card__art--list">
						<view class="icon-listing">
							<view class="icon-listing__line" v-for="i in 3" :key="i"></view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="section-block">
			<view class="section-head">
				<text class="section-head__title">精彩活动</text>
				<view class="section-head__more" @click="goActivityList">
					<text>查看全部</text>
					<view class="section-head__arrow"></view>
				</view>
			</view>
			<scroll-view class="activity-scroll" scroll-x :show-scrollbar="false">
				<view class="activity-scroll__inner">
					<view
						class="activity-card"
						v-for="(item, index) in activityList"
						:key="index"
						@click="goActivityDetail(item)"
					>
						<image class="activity-card__img" :src="item.image" mode="aspectFill"></image>
						<view class="activity-card__body">
							<text class="activity-card__title">{{ item.title }}</text>
							<view class="activity-card__footer">
								<text class="activity-card__tag">{{ item.tag }}</text>
								<text class="activity-card__time">{{ item.time }}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="section-block section-block--stores">
			<view class="section-head">
				<view class="section-head__location">
					<view class="icon-pin"></view>
					<text class="section-head__title">{{ currentCity }}</text>
				</view>
				<view class="section-head__more" @click="goStoreList">
					<text>全部门店</text>
					<view class="section-head__arrow"></view>
				</view>
			</view>

			<view class="store-list">
				<view class="store-card" v-for="(item, index) in nearbyStores" :key="index" @click="goStoreDetail(item)">
					<image class="store-card__cover" :src="item.coverImage" mode="aspectFill"></image>
					<view class="store-card__body">
						<view class="store-card__head">
							<text class="store-card__name">{{ item.storeName }}</text>
							<view class="store-card__rating">
								<view class="icon-star"></view>
								<text>{{ item.rating }}</text>
							</view>
						</view>
						<view class="store-card__info-row">
							<text class="store-card__distance">{{ item.distance }}</text>
							<text class="store-card__address">{{ item.address }}</text>
						</view>
						<text class="store-card__hours">{{ item.businessHours }}</text>
						<view class="store-card__actions">
							<view class="store-btn" @click.stop="callStore(item)">
								<view class="store-btn__icon store-btn__icon--phone"></view>
								<text>电话联系</text>
							</view>
							<view class="store-btn" @click.stop="navigateToStore(item)">
								<view class="store-btn__icon store-btn__icon--nav"></view>
								<text>直接导航</text>
							</view>
							<view class="store-btn store-btn--primary" @click.stop="bookStore(item)">
								<view class="store-btn__icon store-btn__icon--calendar"></view>
								<text>马上预约</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom-placeholder"></view>
	</view>
</template>

<script>
import customNavbar from '@/components/custom-navbar.vue'

export default {
	components: { customNavbar },
	data() {
		return {
			hasNewMsg: true,
			swiperCurrent: 0,
			currentCity: '杭州市',
			bannerList: [
				{ id: 1, image: 'https://picsum.photos/750/360?random=1', link: '' },
				{ id: 2, image: 'https://picsum.photos/750/360?random=2', link: '' },
				{ id: 3, image: 'https://picsum.photos/750/360?random=3', link: '' },
				{ id: 4, image: 'https://picsum.photos/750/360?random=4', link: '' }
			],
			activityList: [
				{
					id: 1,
					title: '新会员首单立享8折',
					image: 'https://picsum.photos/400/240?random=20',
					tag: '新人专享',
					time: '03/15 - 04/15'
				},
				{
					id: 2,
					title: '闺蜜同行第二人半价',
					image: 'https://picsum.photos/400/240?random=21',
					tag: '限时活动',
					time: '03/10 - 03/31'
				},
				{
					id: 3,
					title: '充值满1000赠200',
					image: 'https://picsum.photos/400/240?random=22',
					tag: '充值优惠',
					time: '长期有效'
				}
			],
			nearbyStores: [
				{
					id: 1,
					storeName: '绿纤美业·万象城店',
					coverImage: 'https://picsum.photos/690/300?random=30',
					address: '万象城购物中心B1层L108',
					rating: 4.9,
					distance: '1.2km',
					businessHours: '营业中 09:00-22:00',
					phone: '0571-88888888',
					latitude: 30.259,
					longitude: 120.219
				},
				{
					id: 2,
					storeName: '绿纤美业·银泰旗舰店',
					coverImage: 'https://picsum.photos/690/300?random=31',
					address: '银泰百货3楼东区A316',
					rating: 4.8,
					distance: '2.5km',
					businessHours: '营业中 09:30-21:30',
					phone: '0571-66666666',
					latitude: 30.265,
					longitude: 120.165
				}
			]
		}
	},
	onLoad() {
		this.getLocation()
	},
	onPullDownRefresh() {
		setTimeout(() => { uni.stopPullDownRefresh() }, 800)
	},
	methods: {
		onSwiperChange(e) {
			this.swiperCurrent = e.detail.current
		},
		getLocation() {
			uni.getLocation({
				type: 'gcj02',
				success: () => {},
				fail: () => {}
			})
		},
		goNotification() {
			uni.navigateTo({ url: '/pagesA/notification-list/notification-list' })
		},
		onBannerClick(item) {
			if (item.link) uni.navigateTo({ url: item.link })
		},
		goBooking() {
			uni.switchTab({ url: '/pages/booking/booking' })
		},
		goMall() {
			uni.switchTab({ url: '/pages/mall/mall' })
		},
		goBookingRecord() {
			uni.navigateTo({ url: '/pagesA/booking-record/booking-record' })
		},
		goActivityList() {
			// 暂无独立活动列表页
		},
		goActivityDetail(item) {
			uni.navigateTo({ url: '/pagesA/activity-detail/activity-detail?id=' + item.id })
		},
		goStoreList() {
			uni.navigateTo({ url: '/pagesA/store-list/store-list' })
		},
		goStoreDetail(item) {
			uni.navigateTo({ url: '/pagesA/store-detail/store-detail?id=' + item.id })
		},
		callStore(item) {
			uni.makePhoneCall({ phoneNumber: item.phone })
		},
		navigateToStore(item) {
			uni.openLocation({
				latitude: item.latitude,
				longitude: item.longitude,
				name: item.storeName,
				address: item.address
			})
		},
		bookStore(item) {
			uni.navigateTo({ url: '/pagesA/store-detail/store-detail?id=' + item.id + '&action=book' })
		}
	}
}
</script>

<style lang="scss" scoped>
.home-page {
	min-height: 100vh;
	background:
		radial-gradient(circle at top left, rgba(45, 180, 141, 0.18), transparent 30%),
		radial-gradient(circle at top right, rgba(255, 224, 192, 0.16), transparent 24%),
		linear-gradient(180deg, #f8fbfa 0%, #f2f6f7 44%, #edf2f5 100%);
}

.hero-wrap {
	padding: 18rpx 24rpx 0;
}

.hero-swiper {
	height: 448rpx;
	border-radius: 42rpx;
	overflow: hidden;
	box-shadow: 0 28rpx 66rpx rgba(15, 23, 42, 0.14);
}

.hero-slide,
.hero-slide__img {
	width: 100%;
	height: 100%;
}

.hero-slide {
	position: relative;
	border-radius: 42rpx;
	overflow: hidden;
}

.hero-slide__mask {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15,23,42,0.05), rgba(15,23,42,0.28));
}

.hero-dots {
	display: flex;
	justify-content: center;
	gap: 10rpx;
	margin-top: 20rpx;
}

.hero-dots__item {
	width: 14rpx;
	height: 14rpx;
	border-radius: 999rpx;
	background: rgba(134, 144, 156, 0.34);
}

.hero-dots__item--active {
	width: 44rpx;
	background: linear-gradient(135deg, #22b18a 0%, #6fdab9 100%);
}

.portal-grid {
	display: grid;
	grid-template-columns: 1.14fr 0.86fr;
	gap: 18rpx;
	padding: 30rpx 24rpx 0;
}

.portal-side {
	display: flex;
	flex-direction: column;
	gap: 18rpx;
}

.portal-card {
	position: relative;
	overflow: hidden;
	border-radius: 34rpx;
	border: 1rpx solid rgba(255,255,255,0.82);
	box-shadow: 0 22rpx 54rpx rgba(15, 23, 42, 0.1);
}

.portal-card__meta {
	position: relative;
	z-index: 2;
	padding: 34rpx 28rpx;
}

.portal-card__title {
	display: block;
	font-size: 36rpx;
	font-weight: 700;
	color: $text-primary;
}

.portal-card__sub {
	display: block;
	margin-top: 10rpx;
	font-size: 24rpx;
	line-height: 1.5;
	color: $text-secondary;
}

.portal-card__art {
	position: absolute;
	right: 20rpx;
	bottom: 20rpx;
	opacity: 0.45;
}

.portal-card--booking {
	min-height: 260rpx;
	background: linear-gradient(145deg, #f1fdf8 0%, #dff8ed 55%, #d7eff0 100%);
}

.portal-card--mall {
	min-height: 122rpx;
	background: linear-gradient(145deg, #fffaf1 0%, #fff0d7 54%, #ffe5bf 100%);
}

.portal-card--record {
	min-height: 122rpx;
	background: linear-gradient(145deg, #f3f7ff 0%, #e6eeff 54%, #ddeafc 100%);
}

.section-block {
	margin-top: 46rpx;
}

.section-block--stores {
	margin-bottom: 12rpx;
}

.section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24rpx 24rpx;
}

.section-head__title {
	font-size: 36rpx;
	font-weight: 700;
	color: $text-primary;
}

.section-head__more {
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 10rpx 18rpx;
	border-radius: 999rpx;
	background: rgba(255,255,255,0.74);
	font-size: 24rpx;
	color: $text-secondary;
}

.section-head__arrow {
	width: 10rpx;
	height: 10rpx;
	border-top: 2rpx solid $text-tertiary;
	border-right: 2rpx solid $text-tertiary;
	transform: rotate(45deg);
}

.section-head__location {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.activity-scroll {
	white-space: nowrap;
	padding-left: 24rpx;
}

.activity-scroll__inner {
	display: inline-flex;
	gap: 18rpx;
	padding-right: 24rpx;
}

.activity-card {
	width: 432rpx;
	border-radius: 32rpx;
	overflow: hidden;
	background: rgba(255,255,255,0.95);
	box-shadow: 0 18rpx 44rpx rgba(15, 23, 42, 0.08);
	flex-shrink: 0;
}

.activity-card__img {
	width: 100%;
	height: 244rpx;
	background: #e8edf2;
}

.activity-card__body {
	padding: 22rpx 24rpx 24rpx;
}

.activity-card__title {
	display: block;
	font-size: 28rpx;
	font-weight: 700;
	line-height: 1.45;
	color: $text-primary;
}

.activity-card__footer {
	margin-top: 16rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12rpx;
}

.activity-card__tag {
	padding: 8rpx 16rpx;
	border-radius: 999rpx;
	font-size: 22rpx;
	font-weight: 600;
	color: $brand-primary;
	background: rgba(45,180,141,0.1);
}

.activity-card__time {
	font-size: 22rpx;
	color: $text-tertiary;
}

.store-list {
	padding: 0 24rpx;
}

.store-card {
	margin-bottom: 28rpx;
	border-radius: 34rpx;
	overflow: hidden;
	background: rgba(255,255,255,0.96);
	box-shadow: 0 22rpx 56rpx rgba(15, 23, 42, 0.09);
}

.store-card__cover {
	width: 100%;
	height: 338rpx;
	background: #e8edf2;
}

.store-card__body {
	padding: 28rpx;
}

.store-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16rpx;
}

.store-card__name {
	flex: 1;
	font-size: 32rpx;
	font-weight: 700;
	line-height: 1.45;
	color: $text-primary;
}

.store-card__rating {
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 10rpx 14rpx;
	border-radius: 999rpx;
	background: rgba(255, 184, 0, 0.12);
	font-size: 24rpx;
	font-weight: 700;
	color: #D28A00;
	flex-shrink: 0;
}

.store-card__info-row {
	margin-top: 16rpx;
	display: flex;
	align-items: center;
	gap: 12rpx;
}

.store-card__distance {
	padding: 8rpx 14rpx;
	border-radius: 999rpx;
	font-size: 22rpx;
	font-weight: 700;
	color: $brand-primary;
	background: rgba(45, 180, 141, 0.1);
	flex-shrink: 0;
}

.store-card__address {
	font-size: 24rpx;
	color: $text-tertiary;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.store-card__hours {
	display: block;
	margin-top: 12rpx;
	font-size: 24rpx;
	color: $text-secondary;
}

.store-card__actions {
	margin-top: 22rpx;
	display: flex;
	gap: 12rpx;
}

.store-btn {
	flex: 1;
	height: 76rpx;
	border-radius: 22rpx;
	background: rgba(247,249,251,0.96);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8rpx;
	font-size: 24rpx;
	font-weight: 600;
	color: $text-secondary;
}

.store-btn--primary {
	background: linear-gradient(135deg, #22b18a 0%, #6fdab9 100%);
	color: #fff;
}

.nav-brand {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.nav-brand__mark {
	position: relative;
	width: 34rpx;
	height: 34rpx;
}

.nav-brand__leaf {
	position: absolute;
	width: 12rpx;
	height: 20rpx;
	background: $brand-primary;
	border-radius: 999rpx 999rpx 999rpx 4rpx;
}

.nav-brand__leaf--left {
	left: 6rpx;
	top: 2rpx;
	transform: rotate(-34deg);
}

.nav-brand__leaf--right {
	right: 6rpx;
	top: 1rpx;
	transform: scaleX(-1) rotate(-34deg);
}

.nav-brand__stem {
	position: absolute;
	left: 50%;
	bottom: 2rpx;
	width: 4rpx;
	height: 14rpx;
	background: $brand-primary;
	border-radius: 4rpx;
	transform: translateX(-50%);
}

.nav-brand__name {
	font-size: 34rpx;
	font-weight: 800;
	letter-spacing: 3rpx;
	color: $brand-primary;
}

.nav-bell {
	position: relative;
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
	background: rgba(255,255,255,0.72);
	box-shadow: 0 10rpx 22rpx rgba(15, 23, 42, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-bell__icon {
	position: relative;
	width: 26rpx;
	height: 22rpx;
	background: $text-primary;
	border-radius: 14rpx 14rpx 6rpx 6rpx;
}

.nav-bell__icon::before {
	content: '';
	position: absolute;
	top: -8rpx;
	left: 50%;
	width: 12rpx;
	height: 8rpx;
	border: 3rpx solid $text-primary;
	border-bottom: none;
	border-radius: 10rpx 10rpx 0 0;
	transform: translateX(-50%);
}

.nav-bell__icon::after {
	content: '';
	position: absolute;
	bottom: -6rpx;
	left: 50%;
	width: 8rpx;
	height: 8rpx;
	background: $text-primary;
	border-radius: 50%;
	transform: translateX(-50%);
}

.nav-bell__dot {
	position: absolute;
	top: 10rpx;
	right: 10rpx;
	width: 14rpx;
	height: 14rpx;
	border-radius: 50%;
	background: #E65B65;
	border: 2rpx solid #fff;
}

.icon-calendar {
	width: 78rpx;
	height: 78rpx;
}

.icon-calendar__head {
	height: 20rpx;
	background: $brand-primary;
	border-radius: 8rpx 8rpx 0 0;
	position: relative;
}

.icon-calendar__head::before,
.icon-calendar__head::after {
	content: '';
	position: absolute;
	top: -6rpx;
	width: 6rpx;
	height: 12rpx;
	background: $brand-primary;
	border-radius: 3rpx;
}

.icon-calendar__head::before { left: 16rpx; }
.icon-calendar__head::after { right: 16rpx; }

.icon-calendar__body {
	height: 58rpx;
	padding: 10rpx;
	border-radius: 0 0 10rpx 10rpx;
	background: rgba(255,255,255,0.78);
	display: flex;
	flex-wrap: wrap;
	gap: 6rpx;
}

.icon-calendar__dot {
	width: 10rpx;
	height: 10rpx;
	border-radius: 4rpx;
	background: rgba(45, 180, 141, 0.46);
}

.icon-bag {
	position: relative;
	width: 64rpx;
	height: 66rpx;
}

.icon-bag__handle {
	position: absolute;
	top: 0;
	left: 50%;
	width: 24rpx;
	height: 16rpx;
	border: 4rpx solid #C68E20;
	border-bottom: none;
	border-radius: 14rpx 14rpx 0 0;
	transform: translateX(-50%);
}

.icon-bag__body {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 54rpx;
	height: 46rpx;
	background: #F5A623;
	border-radius: 10rpx 10rpx 16rpx 16rpx;
	transform: translateX(-50%);
}

.icon-listing {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
	padding: 10rpx;
}

.icon-listing__line {
	height: 5rpx;
	border-radius: 999rpx;
	background: #5B8FF9;
}

.icon-listing__line:nth-child(1) { width: 32rpx; }
.icon-listing__line:nth-child(2) { width: 24rpx; }
.icon-listing__line:nth-child(3) { width: 28rpx; }

.icon-pin {
	width: 18rpx;
	height: 18rpx;
	border: 3rpx solid $brand-primary;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	position: relative;
}

.icon-pin::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6rpx;
	height: 6rpx;
	border-radius: 50%;
	background: $brand-primary;
	transform: translate(-50%, -50%);
}

.icon-star {
	width: 18rpx;
	height: 18rpx;
	background: #FFB800;
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 69% 57%, 79% 92%, 50% 70%, 21% 92%, 31% 57%, 2% 35%, 39% 35%);
}

.store-btn__icon {
	position: relative;
	width: 18rpx;
	height: 18rpx;
}

.store-btn__icon--phone::before {
	content: '';
	position: absolute;
	inset: 3rpx 4rpx;
	border: 3rpx solid currentColor;
	border-radius: 6rpx;
	transform: rotate(-28deg);
}

.store-btn__icon--nav {
	width: 0;
	height: 0;
	border-left: 8rpx solid transparent;
	border-right: 8rpx solid transparent;
	border-bottom: 18rpx solid currentColor;
	transform: rotate(28deg);
}

.store-btn__icon--calendar {
	width: 18rpx;
	height: 14rpx;
	border: 3rpx solid currentColor;
	border-radius: 5rpx;
}

.store-btn__icon--calendar::before,
.store-btn__icon--calendar::after {
	content: '';
	position: absolute;
	top: -6rpx;
	width: 3rpx;
	height: 6rpx;
	background: currentColor;
	border-radius: 2rpx;
}

.store-btn__icon--calendar::before { left: 3rpx; }
.store-btn__icon--calendar::after { right: 3rpx; }
</style>
