<template>
    <div class="tracking-timeline-wrap">
        <!-- 编辑模式：输入新备注 -->
        <div v-if="!readonly && diagnosisId" class="timeline-input">
            <el-input
                v-model="draft"
                type="textarea"
                :rows="2"
                placeholder="输入跟踪备注，回车换行；保存后将以「[HH:MM] 内容」追加到当天记录"
                maxlength="1000"
                show-word-limit
                resize="none"
                :disabled="saving"
            />
            <div class="input-actions">
                <el-button
                    type="primary"
                    size="small"
                    :loading="saving"
                    :disabled="!draft.trim()"
                    @click="handleSave"
                >
                    添加
                </el-button>
            </div>
        </div>

        <!-- 时间轴 -->
        <div v-if="notes.length" class="tracking-timeline">
            <div v-for="note in notes" :key="note.id" class="timeline-node">
                <div class="timeline-dot"></div>
                <div class="timeline-date">{{ note.note_date }}</div>
                <div class="timeline-body">
                    <div v-if="note.content" class="timeline-content">
                        <div
                            v-for="(line, idx) in splitLines(note.content)"
                            :key="idx"
                            class="content-line"
                        >
                            {{ line }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <el-empty v-if="!notes.length && readonly" description="暂无跟踪备注" :image-size="48" />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { diagnosisAddTrackingNote } from '@/api/tcm'
import feedback from '@/utils/feedback'

export interface TrackingNoteItem {
    id: number
    note_date: string
    content: string | null
}

const props = defineProps<{
    notes: TrackingNoteItem[]
    diagnosisId?: number
    readonly?: boolean
}>()

const emit = defineEmits<{ refresh: [] }>()

const draft = ref('')
const saving = ref(false)

const splitLines = (content: string | null): string[] => {
    if (!content) return []
    return content.split('\n').filter(Boolean)
}

const handleSave = async () => {
    if (!props.diagnosisId) return
    const content = draft.value.trim()
    if (!content) return
    saving.value = true
    try {
        await diagnosisAddTrackingNote({
            diagnosis_id: props.diagnosisId,
            tracking_content: content,
        })
        feedback.msgSuccess('已添加')
        draft.value = ''
        emit('refresh')
    } finally {
        saving.value = false
    }
}
</script>

<style scoped lang="scss">
.tracking-timeline-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.timeline-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #ebeef5;
}

.input-actions {
    display: flex;
    justify-content: flex-end;
}

.tracking-timeline {
    position: relative;
    padding-left: 22px;
}

.tracking-timeline::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: #ebeef5;
    border-radius: 1px;
}

.timeline-node {
    position: relative;
    padding-bottom: 16px;
}

.timeline-node:last-child {
    padding-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: -19px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #16a34a;
    border: 2px solid #dcfce7;
}

.timeline-date {
    font-size: 13px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 6px;
    font-family: 'IBM Plex Mono', Consolas, monospace;
}

.timeline-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.timeline-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.content-line {
    font-size: 12.5px;
    color: #606266;
    line-height: 1.6;
    word-break: break-word;
}
</style>
