<template>
	<scroll-view class="page" scroll-y="true">
		<view class="hero-card">
			<text class="hero-title">居家上门服务</text>
			<text class="hero-desc">覆盖服务申请、上门评估、执行跟踪与验收反馈，先用 mock 数据跑通前端闭环。</text>
			<view class="hero-actions">
				<view class="primary-btn" @click="goApply">立即申请</view>
			</view>
		</view>

		<ServicePanel title="推荐服务" subtitle="适老化信息更清晰，入口更聚焦。">
			<view v-for="item in services" :key="item.id" class="service-card">
				<view class="service-top">
					<view>
						<text class="service-name">{{ item.name }}</text>
						<text class="service-meta">{{ item.category }} · {{ item.durationText }}</text>
					</view>
					<text class="service-price">¥{{ item.price }}</text>
				</view>
				<text class="service-summary">{{ item.summary }}</text>
				<text class="service-suitable">适用对象：{{ item.suitableFor }}</text>
			</view>
		</ServicePanel>

		<ServicePanel title="我的服务单" subtitle="先展示待派单和服务中的 mock 单据。">
			<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="goDetail(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.elderName }}，{{ item.age }} 岁</text>
				<text class="case-info">上门时间：{{ item.serviceTime }}</text>
				<text class="case-info">服务地址：{{ item.address }}</text>
			</view>
		</ServicePanel>
	</scroll-view>
</template>

<script setup lang="uts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
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'

const services = ref<Array<HomeServiceCatalogType>>([])
const cases = ref<Array<HomeServiceCaseType>>([])

async function loadData() {
	services.value = await fetchHomeServiceCatalog()
	cases.value = await fetchConsumerHomeServiceCases()
}

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

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

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

<style scoped>
.page {
	min-height: 100vh;
	background: #f3f7f9;
	padding: 24rpx;
	box-sizing: border-box;
}

.hero-card {
	background: linear-gradient(135deg, #0f766e, #1d4ed8);
	border-radius: 28rpx;
	padding: 32rpx;
	margin-bottom: 24rpx;
}

.hero-title {
	font-size: 40rpx;
	font-weight: 700;
	color: #ffffff;
	line-height: 56rpx;
}

.hero-desc {
	margin-top: 16rpx;
	font-size: 28rpx;
	line-height: 40rpx;
	color: rgba(255, 255, 255, 0.9);
}

.hero-actions {
	margin-top: 28rpx;
}

.primary-btn {
	background: #ffffff;
	color: #0f3d66;
	font-size: 30rpx;
	font-weight: 700;
	text-align: center;
	padding: 24rpx 0;
	border-radius: 18rpx;
}

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

.service-top,
.case-row {
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
}

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

.service-meta,
.case-no,
.case-info,
.service-summary,
.service-suitable,
.empty-text {
	margin-top: 10rpx;
	font-size: 26rpx;
	line-height: 38rpx;
	color: #66788a;
}

.service-price {
	font-size: 34rpx;
	font-weight: 700;
	color: #0f766e;
}

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