<template>
	<ServicePageScaffold title="上门评估" fallback-url="/pages/mall/admin/home-service/application-management/index">
		<view v-if="detail == null" class="empty-box">
			<text class="empty-text">未找到评估信息</text>
		</view>
		<view v-else>
			<ServicePanel title="上门评估" subtitle="基于真实服务单补充风险等级、护理等级和评估结论。">
				<ServiceInfoList
					:items="[
						{ label: '服务单号：', value: detail.caseNo },
						{ label: '服务对象：', value: detail.elderName },
						{ label: '申请服务：', value: detail.serviceName },
						{ label: '预约上门：', value: detail.visitTime }
					]"
				></ServiceInfoList>

				<view class="block">
					<text class="label">风险等级</text>
					<view class="chip-row">
						<view v-for="item in riskOptions" :key="item" class="chip" :class="riskLevel == item ? 'chip-active' : ''" @click="riskLevel = item">{{ item }}</view>
					</view>
				</view>

				<view class="block">
					<text class="label">护理等级</text>
					<view class="chip-row">
						<view v-for="item in careOptions" :key="item" class="chip" :class="careLevel == item ? 'chip-active' : ''" @click="careLevel = item">{{ item }}</view>
					</view>
				</view>

				<view class="block">
					<text class="label">评估标签</text>
					<view class="tag-row">
						<view v-for="item in detail.requirementTags" :key="item" class="tag">{{ item }}</view>
					</view>
				</view>

				<view class="block">
					<text class="label">评估结论</text>
					<textarea v-model="assessmentSummary" class="textarea" placeholder="填写服务对象能力状态、风险点和护理建议"></textarea>
				</view>

				<view class="submit-btn" @click="submitAssessment">提交评估</view>
			</ServicePanel>
		</view>
	</ServicePageScaffold>
</template>

<script setup lang="uts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
import ServiceInfoList from '@/components/homeService/ServiceInfoList.uvue'
import ServicePanel from '@/components/homeService/ServicePanel.uvue'
import { fetchAdminAssessmentDetail, submitAdminAssessment } from '@/services/homeServiceService.uts'
import { HomeServiceAssessmentType } from '@/types/home-service.uts'

const caseId = ref('')
const detail = ref<HomeServiceAssessmentType | null>(null)
const riskLevel = ref('中风险')
const careLevel = ref('护理二级')
const assessmentSummary = ref('行动缓慢，需重点关注晨间血压、跌倒风险和夜间陪护提醒。')
const riskOptions = ['低风险', '中风险', '高风险']
const careOptions = ['护理一级', '护理二级', '护理三级', '随访管理']

onLoad((options) => {
	const id = options['id']
	if (id != null) {
		caseId.value = id as string
		fetchAdminAssessmentDetail(caseId.value).then((res) => {
			if (res != null) {
				detail.value = res
				riskLevel.value = res.riskLevel
				careLevel.value = res.careLevel
				assessmentSummary.value = res.assessmentSummary
			}
		})
	}
})

async function submitAssessment() {
	if (caseId.value == '' || assessmentSummary.value == '') {
		uni.showToast({ title: '请填写评估结论', icon: 'none' })
		return
	}
	const result = await submitAdminAssessment(caseId.value, riskLevel.value, careLevel.value, assessmentSummary.value)
	if (result != null) {
		uni.showToast({ title: '评估已提交', icon: 'success' })
		setTimeout(() => {
			uni.navigateBack()
		}, 400)
	}
}
</script>

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

.label,
.chip,
.tag,
.empty-text {
	font-size: 28rpx;
	line-height: 40rpx;
	color: #16324f;
}

.block {
	margin-top: 24rpx;
}

.chip-row,
.tag-row {
	margin-top: 16rpx;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 16rpx;
}

.chip,
.tag {
	padding: 16rpx 20rpx;
	border-radius: 18rpx;
	background: #f0f4f8;
}

.chip-active {
	background: #e8f2ff;
	color: #1d4ed8;
}

.tag {
	background: #e8f7ef;
	color: #15803d;
}

.textarea {
	margin-top: 16rpx;
	width: 100%;
	height: 260rpx;
	padding: 24rpx;
	box-sizing: border-box;
	background: #f8fbfc;
	border-radius: 20rpx;
	font-size: 28rpx;
	color: #23384d;
}

.submit-btn {
	margin-top: 32rpx;
	padding: 26rpx 0;
	border-radius: 20rpx;
	background: #1d4ed8;
	text-align: center;
	font-size: 30rpx;
	font-weight: 700;
	color: #ffffff;
}

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