<template>
    <div class="readonly-page" v-loading="loading">
        <!-- 顶部 hero -->
        <div class="readonly-hero">
            <div class="hero-left">
                <el-button link size="default" @click="goBack" class="back-btn">
                    <el-icon><ArrowLeft /></el-icon>
                    <span>返回</span>
                </el-button>
                <span class="title">患者信息详情</span>
            </div>
            <div v-if="diag?.patient_name" class="hero-right">
                <span class="patient-name">{{ diag.patient_name }}</span>
                <span class="patient-meta">
                    {{ formatGender(diag.gender) }}
                    <template v-if="diag.age != null"> · {{ diag.age }}岁</template>
                </span>
                <el-tooltip
                    v-if="lastBloodAt"
                    :content="`最近一次血糖打卡：${lastBloodAt}`"
                    placement="bottom"
                >
                    <span :class="['unserved-badge', unservedDaysClass(unservedDays)]">
                        未服务 {{ unservedDays ?? '—' }} 天
                    </span>
                </el-tooltip>
                <span v-else class="unserved-badge unserved-muted">从未打卡血糖</span>
            </div>
        </div>

        <!-- 加载失败 / 越权 -->
        <el-empty
            v-if="!loading && !detail"
            :description="errorMsg || '诊单不存在或无权访问'"
            class="empty-state"
        />

        <template v-else-if="detail">
            <PatientInfoCard :apt="apt" :diag="diag" />
            <PatientCaseCard :apt="apt" :diag="diag" />

            <!-- 日常记录（只读） -->
            <div class="card tracking-card">
                <div class="card-title">日常记录</div>
                <DailyMatrix
                    :diagnosis-id="Number(diagnosisIdNum)"
                    :patient-id="Number(diag?.patient_id ?? 0)"
                    :age="diag?.age ?? null"
                    :patient-name="diag?.patient_name || ''"
                    :read-only="true"
                />
            </div>

            <!-- 医生备注（复用 reception 的 NoteTimeline，但只读） -->
            <div v-if="doctorNotes.length" class="card note-card">
                <div class="card-title">医生备注 & 舌苔照片 & 检查报告</div>
                <NoteTimeline :notes="doctorNotes" :diagnosis-id="diag?.id" />
            </div>

        </template>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft } from '@element-plus/icons-vue'
import { diagnosisReadonlyDetail } from '@/api/tcm'
import { formatGender } from '@/utils/diag-display'
import PatientInfoCard from './components/PatientInfoCard.vue'
import PatientCaseCard from './components/PatientCaseCard.vue'
import DailyMatrix from './components/DailyMatrix.vue'
import NoteTimeline from '@/views/patient/reception/components/NoteTimeline.vue'

const route = useRoute()
const router = useRouter()

const diagnosisIdNum = computed(() => Number(route.query.id || 0))

const loading = ref(false)
const errorMsg = ref('')
const detail = ref<any>(null)

const apt = computed<any>(() => detail.value?.appointment || {})
const diag = computed<any>(() => detail.value?.diagnosis || {})
const doctorNotes = computed<any[]>(() => detail.value?.doctor_notes || [])
const unservedDays = computed<number | null>(() => {
    const v = detail.value?.unserved_days
    return v === null || v === undefined ? null : Number(v)
})
const lastBloodAt = computed<string>(() => detail.value?.last_blood_record_at || '')

/**
 * 「未服务天数」着色规则（与 T3 列表一致）：
 *   null/undefined → 灰；>=7 → 红；3-6 → 橙；<=2 → 绿
 */
const unservedDaysClass = (n: unknown) => {
    if (n === null || n === undefined) return 'unserved-muted'
    const num = Number(n)
    if (!Number.isFinite(num)) return 'unserved-muted'
    if (num >= 7) return 'unserved-red'
    if (num >= 3) return 'unserved-orange'
    return 'unserved-green'
}

const fetchDetail = async () => {
    const id = diagnosisIdNum.value
    if (!id || id <= 0) {
        errorMsg.value = '诊单 id 缺失'
        detail.value = null
        return
    }
    loading.value = true
    errorMsg.value = ''
    try {
        const res: any = await diagnosisReadonlyDetail({ id })
        detail.value = res || null
    } catch (e: any) {
        errorMsg.value = e?.message || ''
        detail.value = null
    } finally {
        loading.value = false
    }
}

const goBack = () => {
    if (window.history.length > 1) {
        router.back()
    } else {
        router.push({ path: '/tcm/diagnosis' })
    }
}

onMounted(fetchDetail)
</script>

<style lang="scss" scoped>
/* 沿用接诊台的设计变量；该文件挂在管理后台，--rx-* 已在 reception/index.vue 全局可见的同款值 */
.readonly-page {
    --rx-surface: #ffffff;
    --rx-line: #e6ebf2;
    --rx-ink: #1f2937;
    --rx-muted: #4b5563;
    --rx-soft: #6b7280;
    --rx-accent: #2563eb;
    --rx-accent-strong: #1d4ed8;
    --rx-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --rx-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    --rx-font-data: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

.readonly-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    background: linear-gradient(135deg, #f5f8ff 0%, #eef3ff 100%);
    border: 1px solid #dde7ff;
    border-radius: 12px;
    padding: 12px 16px;

    .hero-left {
        display: flex;
        align-items: center;
        gap: 12px;

        .back-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-weight: 500;
        }

        .title {
            font-size: 16px;
            font-weight: 700;
            color: var(--rx-ink);
        }
    }

    .hero-right {
        display: flex;
        align-items: center;
        gap: 12px;

        .patient-name {
            font-size: 18px;
            font-weight: 700;
            color: var(--rx-ink);
        }

        .patient-meta {
            font-size: 13px;
            color: var(--rx-muted);
        }
    }
}

.unserved-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #dde7ff;
    cursor: default;

    &.unserved-muted {
        color: var(--el-text-color-placeholder);
        font-weight: 400;
    }

    &.unserved-green {
        color: #16a34a;
        border-color: #bbf7d0;
        background: rgba(22, 163, 74, 0.06);
    }

    &.unserved-orange {
        color: #ea580c;
        border-color: #fed7aa;
        background: rgba(234, 88, 12, 0.06);
    }

    &.unserved-red {
        color: #dc2626;
        border-color: #fecaca;
        background: rgba(220, 38, 38, 0.08);
    }
}

.empty-state {
    background: var(--rx-surface);
    border: 1px solid var(--rx-line);
    border-radius: 14px;
    padding: 40px 0;
}

.card {
    background: var(--rx-surface);
    border: 1px solid var(--rx-line);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: var(--rx-shadow-sm);
}

.card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--rx-ink);
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 10px;
    position: relative;

    &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 16px;
        border-radius: 2px;
        background: linear-gradient(180deg, #4f8cff 0%, #2563eb 100%);
    }
}
</style>
