<template>
	<view class="service-content">
		<view class="home-service-header">
			<view class="header-top-row">
				<view>
					<text class="header-area">梅江区</text>
					<text class="header-slogan">专业照护 服务保障</text>
				</view>
				<view class="header-helper-btn" @click="consultService">
					<text class="header-helper-text">AI推荐</text>
				</view>
			</view>
			<view class="header-title-wrap">
				<text class="header-title">居家服务预约平台</text>
				<text class="header-desc">护理 康复 陪诊 保洁，一站式预约上门服务。</text>
			</view>
			<view class="home-service-search" @click="goSearch">
				<text class="home-service-search-icon">⌕</text>
				<text class="home-service-search-text">搜索保洁 护理 陪诊 康复</text>
			</view>
		</view>

		<view class="service-category-grid">
			<view
				v-for="item in categoryGrid"
				:key="item.id"
				class="service-category-card"
				@click="goCategory(item.id)"
			>
				<view class="service-category-icon" :style="{ background: item.color }">
					<text class="service-category-icon-text">{{ item.iconText }}</text>
				</view>
				<text class="service-category-name">{{ item.name }}</text>
			</view>
		</view>

		<scroll-view class="promo-scroll" direction="horizontal" :show-scrollbar="false">
			<view class="promo-card-row">
				<view v-for="item in promoCards" :key="item.id" :class="['promo-card', 'promo-card-' + item.tone]" @click="consultService">
					<text class="promo-card-title">{{ item.title }}</text>
					<text class="promo-card-desc">{{ item.desc }}</text>
				</view>
			</view>
		</scroll-view>

		<view class="section-head">
			<text class="section-title">场景服务</text>
			<text class="section-link" @click="goServiceHall">查看全部</text>
		</view>
		<view class="scene-service-section">
			<view v-for="item in sceneCards" :key="item.id" :class="['scene-service-card', 'scene-service-card-' + item.tone]" @click="goCategory(item.categoryId)">
				<view>
					<text class="scene-service-title">{{ item.title }}</text>
					<text class="scene-service-subtitle">{{ item.subtitle }}</text>
				</view>
				<view class="scene-service-visual">
					<text class="scene-service-icon">{{ item.iconText }}</text>
				</view>
			</view>
		</view>

		<view class="section-head">
			<text class="section-title">推荐服务</text>
			<text class="section-link" @click="goServiceHall">服务大厅</text>
		</view>
		<view class="recommend-service-list">
			<view v-for="item in allServices" :key="item.id" class="recommend-service-card">
				<view class="recommend-service-top">
					<view class="recommend-service-cover">
						<text class="recommend-service-cover-text">{{ item.imageText }}</text>
					</view>
					<view class="recommend-service-main">
						<text class="recommend-service-title">{{ item.title }}</text>
						<text class="recommend-service-subtitle">{{ item.subtitle }}</text>
						<text class="recommend-service-suitable">适用对象：{{ item.suitableFor }}</text>
					</view>
				</view>
				<view class="recommend-service-tags">
					<text v-for="tag in item.tags" :key="item.id + '-' + tag" class="recommend-service-tag">{{ tag }}</text>
				</view>
				<view class="recommend-service-bottom">
					<view>
						<text class="recommend-service-price-prefix">¥</text>
						<text class="recommend-service-price">{{ item.price }}</text>
						<text class="recommend-service-unit">起 / {{ item.unit }}</text>
					</view>
					<view class="recommend-service-actions">
						<view class="recommend-secondary-btn" @click="goDetail(item.id)">查看详情</view>
						<view class="recommend-primary-btn" @click="goBooking(item.id)">立即预约</view>
					</view>
				</view>
			</view>
		</view>

		<view class="floating-service-helper" @click="consultService">
			<text class="floating-service-helper-title">不确定选哪个？</text>
			<text class="floating-service-helper-desc">咨询客服</text>
		</view>
	</view>
</template>

<script setup lang="uts">
import { onMounted, ref } from 'vue'
import { fetchHomeServiceCatalog } from '@/services/homeServiceService.uts'
import {
	HomeServiceCategoryType,
	HomeServiceItemType,
	HomeServicePromoCardType,
	HomeServiceSceneCardType,
	getHomeServiceCategories,
	getHomeServiceItems,
	getHomeServicePromoCards,
	getHomeServiceSceneCards
} from '@/utils/homeServiceUiMock.uts'

const categoryGrid = ref<Array<HomeServiceCategoryType>>([])
const promoCards = ref<Array<HomeServicePromoCardType>>([])
const sceneCards = ref<Array<HomeServiceSceneCardType>>([])
const allServices = ref<Array<HomeServiceItemType>>([])

async function loadServiceData() {
	categoryGrid.value = getHomeServiceCategories()
	promoCards.value = getHomeServicePromoCards()
	sceneCards.value = getHomeServiceSceneCards()
	const catalog = await fetchHomeServiceCatalog()
	allServices.value = getHomeServiceItems(catalog)
}

function goSearch() {
	uni.navigateTo({ url: '/pages/mall/consumer/search?keyword=' + encodeURIComponent('居家服务') })
}

function consultService() {
	uni.showToast({ title: '即将接入专属客服入口', icon: 'none' })
}

function goServiceHall() {
	uni.navigateTo({ url: '/pages/mall/consumer/home-service/index' })
}

function goCategory(categoryId: string) {
	uni.navigateTo({ url: '/pages/mall/consumer/home-service/index?category=' + categoryId })
}

function goDetail(serviceId: string) {
	uni.navigateTo({ url: '/pages/mall/consumer/home-service/service-detail?id=' + serviceId })
}

function goBooking(serviceId: string) {
	uni.navigateTo({ url: '/pages/mall/consumer/home-service/service-detail?id=' + serviceId + '&mode=booking' })
}

onMounted(() => {
	loadServiceData()
})
</script>

<style scoped>
.service-content {
	padding: 20rpx 20rpx 180rpx;
	box-sizing: border-box;
}

.home-service-header {
	background: linear-gradient(180deg, #eafbf7 0%, #eff6ff 100%);
	border-radius: 32rpx;
	padding: 28rpx 24rpx;
	box-shadow: 0 12rpx 24rpx rgba(15, 118, 110, 0.08);
}

.header-top-row,
.recommend-service-top,
.recommend-service-bottom,
.section-head,
.promo-card-row,
.recommend-service-actions {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}


.header-area {
	font-size: 26rpx;
	font-weight: 700;
	color: #16324f;
}


.header-slogan {
	margin-top: 8rpx;
	font-size: 24rpx;
	color: #64748b;
}


.header-helper-btn {
	padding: 14rpx 22rpx;
	border-radius: 999rpx;
	background: rgba(255, 255, 255, 0.78);
}


.header-helper-text {
	font-size: 22rpx;
	font-weight: 700;
	color: #0f766e;
}


.header-title-wrap {
	margin-top: 20rpx;
}


.header-title {
	font-size: 40rpx;
	font-weight: 700;
	color: #16324f;
	line-height: 54rpx;
}


.header-desc {
	margin-top: 12rpx;
	font-size: 24rpx;
	line-height: 36rpx;
	color: #5f7284;
}


.home-service-search {
	margin-top: 22rpx;
	background: #ffffff;
	border-radius: 999rpx;
	height: 82rpx;
	padding-left: 28rpx;
	padding-right: 28rpx;
	flex-direction: row;
	align-items: center;
	box-shadow: 0 10rpx 20rpx rgba(22, 160, 133, 0.08);
}

.home-service-search-icon {
	font-size: 28rpx;
	color: #16a085;
}

.home-service-search-text {
	margin-left: 16rpx;
	font-size: 24rpx;
	color: #8aa0b3;
}


.service-category-grid,
.scene-service-section {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 24rpx;
}


.service-category-card {
	width: 19%;
	align-items: center;
	margin-bottom: 24rpx;
}

.service-category-icon {
	width: 88rpx;
	height: 88rpx;
	border-radius: 28rpx;
	align-items: center;
	justify-content: center;
}

.service-category-icon-text {
	font-size: 28rpx;
	font-weight: 700;
	color: #16324f;
}

.service-category-name {
	margin-top: 12rpx;
	font-size: 22rpx;
	line-height: 30rpx;
	text-align: center;
	color: #425466;
}

.promo-scroll {
	height: 168rpx;
	margin-top: 4rpx;
}

.promo-card-row {
	padding-right: 20rpx;
}

.promo-card {
	width: 240rpx;
	height: 144rpx;
	padding: 24rpx;
	border-radius: 24rpx;
	box-sizing: border-box;
	margin-right: 16rpx;
}

.promo-card-green {
	background: #eafbf7;
}

.promo-card-orange {
	background: #fff7ed;
}

.promo-card-blue {
	background: #eff6ff;
}

.promo-card-teal {
	background: #ecfeff;
}

.promo-card-title {
	font-size: 28rpx;
	font-weight: 700;
	color: #16324f;
}

.promo-card-desc {
	margin-top: 12rpx;
	font-size: 22rpx;
	line-height: 32rpx;
	color: #5f7284;
}

.section-head {
	margin-top: 28rpx;
	margin-bottom: 16rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: 700;
	color: #16324f;
}

.section-link {
	font-size: 24rpx;
	color: #16a085;
}

.scene-service-card {
	width: 49%;
	border-radius: 28rpx;
	padding: 24rpx;
	box-sizing: border-box;
	margin-bottom: 16rpx;
	min-height: 168rpx;
	justify-content: space-between;
}

.scene-service-card-green {
	background: linear-gradient(180deg, #eafbf7 0%, #f8fffd 100%);
}

.scene-service-card-blue {
	background: linear-gradient(180deg, #eff6ff 0%, #f9fbff 100%);
}

.scene-service-card-teal {
	background: linear-gradient(180deg, #ecfeff 0%, #f8ffff 100%);
}

.scene-service-card-orange {
	background: linear-gradient(180deg, #fff7ed 0%, #fffbf7 100%);
}

.scene-service-title {
	font-size: 30rpx;
	font-weight: 700;
	color: #16324f;
}

.scene-service-subtitle {
	margin-top: 10rpx;
	font-size: 22rpx;
	line-height: 32rpx;
	color: #64748b;
}

.scene-service-visual {
	margin-top: 18rpx;
	width: 108rpx;
	height: 56rpx;
	border-radius: 999rpx;
	background: rgba(255, 255, 255, 0.68);
	align-items: center;
	justify-content: center;
}

.scene-service-icon {
	font-size: 22rpx;
	font-weight: 700;
	color: #0f766e;
}

.recommend-service-list {
	margin-top: 8rpx;
}

.recommend-service-card {
	background: #ffffff;
	border-radius: 28rpx;
	padding: 24rpx;
	box-shadow: 0 10rpx 24rpx rgba(15, 23, 42, 0.06);
	margin-bottom: 20rpx;
	box-sizing: border-box;
}

.recommend-service-cover {
	width: 120rpx;
	height: 120rpx;
	border-radius: 28rpx;
	background: linear-gradient(180deg, #eafbf7 0%, #eff6ff 100%);
	align-items: center;
	justify-content: center;
}

.recommend-service-cover-text {
	font-size: 28rpx;
	font-weight: 700;
	color: #0f766e;
}

.recommend-service-main {
	flex: 1;
	min-width: 0;
	margin-left: 20rpx;
}

.recommend-service-title {
	font-size: 30rpx;
	font-weight: 700;
	color: #16324f;
}

.recommend-service-subtitle,
.recommend-service-suitable {
	margin-top: 10rpx;
	font-size: 24rpx;
	line-height: 34rpx;
	color: #64748b;
	min-height: 0;
}

.recommend-service-tags {
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: 18rpx;
	margin-bottom: 18rpx;
}

.recommend-service-tag {
	padding: 10rpx 16rpx;
	border-radius: 999rpx;
	background: #f1f5f9;
	font-size: 22rpx;
	color: #476072;
	box-sizing: border-box;
	margin-right: 12rpx;
	margin-bottom: 12rpx;
}

.recommend-service-price-prefix,
.recommend-service-price {
	font-size: 36rpx;
	font-weight: 700;
	color: #0f766e;
}

.recommend-service-unit {
	font-size: 22rpx;
	color: #64748b;
}

.recommend-secondary-btn,
.recommend-primary-btn {
	padding: 0 26rpx;
	height: 68rpx;
	border-radius: 999rpx;
	font-size: 24rpx;
	font-weight: 700;
	align-items: center;
	justify-content: center;
	margin-left: 12rpx;
}

.recommend-secondary-btn {
	background: #ffffff;
	border-width: 2rpx;
	border-style: solid;
	border-color: #cbd5e1;
	color: #476072;
}

.recommend-primary-btn {
	background: #16a085;
	color: #ffffff;
}

.floating-service-helper {
	position: fixed;
	right: 24rpx;
	bottom: 168rpx;
	width: 176rpx;
	padding: 20rpx 22rpx;
	border-radius: 28rpx;
	background: linear-gradient(180deg, #16a085 0%, #0f766e 100%);
	box-shadow: 0 12rpx 24rpx rgba(15, 118, 110, 0.18);
}

.floating-service-helper-title,
.floating-service-helper-desc {
	font-size: 22rpx;
	line-height: 32rpx;
	color: #ffffff;
}

.floating-service-helper-desc {
	margin-top: 6rpx;
	font-weight: 700;
}
</style>