<template>
	<ServicePageScaffold title="居家上门服务" fallback-url="/pages/main/index">
		<view class="hero-card">
			<view>
				<text class="hero-title">居家服务大厅</text>
				<text class="hero-desc">从服务选择、预约下单到服务单跟踪，整体体验升级为上门服务预约平台。</text>
			</view>
			<view class="hero-right-tag">
				<text class="hero-right-tag-text">服务保障</text>
			</view>
		</view>

		<view class="service-category-grid">
			<view v-for="item in categoryGrid" :key="item.id" class="service-category-card" @click="switchCategory(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-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>

		<ServicePanel title="推荐服务" subtitle="优先展示最常预约的居家服务项目。">
			<view v-for="item in filteredServices" :key="item.id" class="recommend-card">
				<view class="recommend-card-top">
					<view class="recommend-card-cover">
						<text class="recommend-card-cover-text">{{ item.imageText }}</text>
					</view>
					<view class="recommend-card-main">
						<text class="recommend-card-title">{{ item.title }}</text>
						<text class="recommend-card-subtitle">{{ item.subtitle }}</text>
						<text class="recommend-card-suitable">适用对象：{{ item.suitableFor }}</text>
					</view>
				</view>
				<view class="recommend-card-tags">
					<text v-for="tag in item.tags" :key="item.id + '-' + tag" class="recommend-card-tag">{{ tag }}</text>
				</view>
				<view class="recommend-card-bottom">
					<view>
						<text class="recommend-card-price-prefix">¥</text>
						<text class="recommend-card-price">{{ item.price }}</text>
						<text class="recommend-card-unit">起 / {{ item.unit }}</text>
					</view>
					<view class="recommend-card-actions">
						<view class="recommend-card-secondary" @click="goDetail(item.id)">查看详情</view>
						<view class="recommend-card-primary" @click="goBooking(item.id)">立即预约</view>
					</view>
				</view>
			</view>
		</ServicePanel>

		<ServicePanel title="我的预约 / 服务单" subtitle="按服务预约单的方式呈现状态、机构和上门信息。">
			<view v-if="cases.length == 0" class="empty-box">
				<text class="empty-text">当前没有服务单</text>
			</view>
			<view v-for="item in cases" :key="item.id" class="case-card" @click="goOrderDetail(item.id)">
				<view class="case-row">
					<view>
						<text class="case-title">{{ item.serviceName }}</text>
						<text class="case-no">{{ item.caseNo }}</text>
					</view>
					<ServiceStatusTag :text="item.statusText" :tone="item.statusTone"></ServiceStatusTag>
				</view>
				<text class="case-info">服务机构：{{ item.staffName == '待分配' ? '待分配机构' : item.staffName }}</text>
				<text class="case-info">上门时间：{{ item.serviceTime }}</text>
				<text class="case-info">服务地址：{{ item.address }}</text>
				<view class="case-action-row">
					<view class="case-action-secondary" @click.stop="goDetailByName(item.serviceName)">再次预约</view>
					<view class="case-action-primary" @click.stop="goOrderDetail(item.id)">查看服务单</view>
				</view>
			</view>
		</ServicePanel>
	</ServicePageScaffold>
</template>

<script setup lang="uts">
import { computed, ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
import ServicePanel from '@/components/homeService/ServicePanel.uvue'
import ServiceStatusTag from '@/components/homeService/ServiceStatusTag.uvue'
import { fetchConsumerHomeServiceCases, fetchHomeServiceCatalog } from '@/services/homeServiceService.uts'
import { HomeServiceCatalogType, HomeServiceCaseType } from '@/types/home-service.uts'
import { getCurrentUser, getCurrentUserId } from '@/utils/store.uts'
import { goToLogin } from '@/utils/utils.uts'
import {
	HomeServiceCategoryType,
	HomeServiceItemType,
	HomeServicePromoCardType,
	getHomeServiceCategories,
	getHomeServiceItems,
	getHomeServicePromoCards
} from '@/utils/homeServiceUiMock.uts'

const services = ref<Array<HomeServiceCatalogType>>([])
const cases = ref<Array<HomeServiceCaseType>>([])
const categoryGrid = ref<Array<HomeServiceCategoryType>>([])
const promoCards = ref<Array<HomeServicePromoCardType>>([])
const selectedCategory = ref('all-services')

const filteredServices = computed((): Array<HomeServiceItemType> => {
	const serviceItems = getHomeServiceItems(services.value)
	if (selectedCategory.value == 'all-services') {
		return serviceItems
	}
	const result: Array<HomeServiceItemType> = []
	for (let i = 0; i < serviceItems.length; i++) {
		if (serviceItems[i].category == selectedCategory.value) {
			result.push(serviceItems[i])
		}
	}
	if (result.length == 0) {
		return serviceItems
	}
	return result
})

async function loadData() {
	categoryGrid.value = getHomeServiceCategories()
	promoCards.value = getHomeServicePromoCards()
	services.value = await fetchHomeServiceCatalog()
	const user = await getCurrentUser()
	if (user == null || getCurrentUserId() == '') {
		cases.value = [] as Array<HomeServiceCaseType>
		return
	}
	cases.value = await fetchConsumerHomeServiceCases()
}

async function ensureLogin(redirectUrl: string): Promise<boolean> {
	const user = await getCurrentUser()
	if (user == null || getCurrentUserId() == '') {
		goToLogin(redirectUrl)
		return false
	}
	return true
}

function switchCategory(categoryId: string) {
	selectedCategory.value = categoryId
}

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

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

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

function goOrderDetail(caseId: string) {
	ensureLogin('/pages/mall/consumer/home-service/order-detail?id=' + caseId).then((ok) => {
		if (!ok) {
			return
		}
		uni.navigateTo({ url: '/pages/mall/consumer/home-service/order-detail?id=' + caseId })
	})
}

function goDetailByName(serviceName: string) {
	if (serviceName == '康复训练指导') {
		goBooking('svc-002')
		return
	}
	if (serviceName == '慢病健康随访') {
		goBooking('svc-003')
		return
	}
	goBooking('svc-001')
}

onLoad((options) => {
	const category = options['category']
	if (category != null) {
		selectedCategory.value = category as string
	}
	loadData()
})

onShow(() => {
	loadData()
})
</script>

<style scoped>
.hero-card {
	background: linear-gradient(180deg, #eafbf7 0%, #eff6ff 100%);
	border-radius: 32rpx;
	padding: 28rpx;
	margin-bottom: 24rpx;
	flex-direction: row;
	justify-content: space-between;
}

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

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

.hero-right-tag {
	height: 56rpx;
	padding: 0 22rpx;
	border-radius: 999rpx;
	background: rgba(255, 255, 255, 0.76);
	align-items: center;
	justify-content: center;
}

.hero-right-tag-text {
	font-size: 22rpx;
	font-weight: 700;
	color: #0f766e;
}

.service-category-grid,
.promo-row,
.recommend-card-top,
.recommend-card-bottom,
.recommend-card-actions,
.case-card {
	flex-direction: row;
	align-items: center;
}

.service-category-grid {
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 12rpx;
}

.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-bottom: 24rpx;
}

.promo-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;
}

.recommend-card,
.case-card {
	padding: 24rpx;
	border-radius: 24rpx;
	background: #f8fbfc;
	margin-bottom: 20rpx;
}

.recommend-card-top,
.recommend-card-bottom,
.case-row,
.case-action-row {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

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

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

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

.recommend-card-title,
.case-title {
	font-size: 32rpx;
	font-weight: 700;
	color: #16324f;
}

.recommend-card-subtitle,
.recommend-card-suitable,
.case-no,
.case-info,
.empty-text {
	margin-top: 10rpx;
	font-size: 24rpx;
	line-height: 34rpx;
	color: #66788a;
}

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

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

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

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

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

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

.recommend-card-primary,
.case-action-primary {
	background: #16a085;
	color: #ffffff;
}

.case-action-row {
	margin-top: 18rpx;
}

.empty-box {
	padding: 40rpx 0;
	align-items: center;
}
</style>