<template>
	<ServicePageScaffold title="服务申请管理">
		<ServicePanel title="服务申请管理" subtitle="沿用后台列表 + 状态标签 + 操作按钮的组织方式。">
			<view class="overview-row">
				<view v-for="item in overview" :key="item.id" class="overview-card" :class="'overview-' + item.tone">
					<text class="overview-value">{{ item.value }}</text>
					<text class="overview-label">{{ item.label }}</text>
				</view>
			</view>
		</ServicePanel>

		<ServicePanel title="申请列表" subtitle="首批先展示申请受理、评估和验收前的关键字段。">
			<view v-for="item in applications" :key="item.id" class="app-card">
				<view class="app-row">
					<view>
						<text class="app-title">{{ item.elderName }} · {{ item.serviceName }}</text>
						<text class="app-meta">{{ item.caseNo }}</text>
					</view>
					<ServiceStatusTag :text="item.statusText" :tone="item.statusTone"></ServiceStatusTag>
				</view>
				<text class="app-info">期望时间：{{ item.preferredTime }}</text>
				<text class="app-info">评估结果：{{ item.assessmentResult }}</text>
				<text class="app-info">调度员：{{ item.dispatcherName }} · 执行人员：{{ item.staffName }}</text>
				<ServiceActionRow
					:actions="[
						{ key: 'assessment', label: '去评估', tone: 'ghost' },
						{ key: 'plan', label: '编制方案', tone: 'primary' }
					]"
					@action="(key: string) => handlePrimaryAction(item.caseId, key)"
				></ServiceActionRow>
				<ServiceActionRow
					:actions="[
						{ key: 'rectification', label: '整改处理', tone: 'warn' },
						{ key: 'settlement', label: '结算归档', tone: 'success' }
					]"
					:compact="true"
					@action="(key: string) => handleSecondaryAction(item.caseId, key)"
				></ServiceActionRow>
			</view>
			<view class="jump-btn" @click="goDispatch">进入派单调度</view>
		</ServicePanel>
	</ServicePageScaffold>
</template>

<script setup lang="uts">
import { ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
import ServiceActionRow from '@/components/homeService/ServiceActionRow.uvue'
import ServicePanel from '@/components/homeService/ServicePanel.uvue'
import ServiceStatusTag from '@/components/homeService/ServiceStatusTag.uvue'
import { fetchAdminHomeServiceApplications, fetchAdminHomeServiceOverview } from '@/services/homeServiceService.uts'
import { HomeServiceAdminApplicationType, HomeServiceOverviewCardType } from '@/types/home-service.uts'

const applications = ref<Array<HomeServiceAdminApplicationType>>([])
const overview = ref<Array<HomeServiceOverviewCardType>>([])

async function loadData() {
	applications.value = await fetchAdminHomeServiceApplications()
	overview.value = await fetchAdminHomeServiceOverview()
}

function goDispatch() {
	uni.navigateTo({ url: '/pages/mall/admin/home-service/dispatch-center/index' })
}

function goAssessment(caseId: string) {
	uni.navigateTo({ url: '/pages/mall/admin/home-service/assessment-form/index?id=' + caseId })
}

function goPlan(caseId: string) {
	uni.navigateTo({ url: '/pages/mall/admin/home-service/service-plan/index?id=' + caseId })
}

function goRectification(caseId: string) {
	uni.navigateTo({ url: '/pages/mall/admin/home-service/rectification/index?id=' + caseId })
}

function goSettlement(caseId: string) {
	uni.navigateTo({ url: '/pages/mall/admin/home-service/settlement-archive/index?id=' + caseId })
}

function handlePrimaryAction(caseId: string, actionKey: string) {
	if (actionKey == 'assessment') {
		goAssessment(caseId)
	} else if (actionKey == 'plan') {
		goPlan(caseId)
	}
}

function handleSecondaryAction(caseId: string, actionKey: string) {
	if (actionKey == 'rectification') {
		goRectification(caseId)
	} else if (actionKey == 'settlement') {
		goSettlement(caseId)
	}
}

onLoad(() => {
	loadData()
})

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

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

.overview-row {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 16rpx;
}

.overview-card {
	width: 48%;
	padding: 24rpx;
	border-radius: 20rpx;
}

.overview-primary {
	background: #e8f2ff;
}

.overview-warning {
	background: #fff4e5;
}

.overview-success {
	background: #e8f7ef;
}

.overview-neutral {
	background: #eef2f6;
}

.overview-value {
	font-size: 40rpx;
	font-weight: 700;
	color: #16324f;
}

.overview-label {
	margin-top: 8rpx;
	font-size: 24rpx;
	color: #66788a;
}

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

.app-row {
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
}

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

.app-meta,
.app-info {
	margin-top: 8rpx;
	font-size: 24rpx;
	line-height: 36rpx;
	color: #66788a;
}

.jump-btn {
	margin-top: 8rpx;
	padding: 24rpx 0;
	text-align: center;
	font-size: 28rpx;
	font-weight: 700;
	color: #ffffff;
	background: #1d4ed8;
	border-radius: 18rpx;
}
</style>