<template>
    <div class="center-flex">
        <el-timeline style="max-width: 90vh;margin-top: 10px">
            <el-timeline-item v-for="(item, index) in logs" :key="index" :timestamp="item.createTime">
                <span style="font-weight: bold;margin-right: 10px;"> {{ item.createUserName }} </span>
                
                <span style="color: blue;margin-right: 10px;"> {{ item.type }} </span>
                {{ item.content }}
            </el-timeline-item>
        </el-timeline>
    </div>

</template>

<script setup>

import { onMounted, ref } from 'vue'; 
import { getPatientLogs } from '@/api/patient/patient';

const props = defineProps({
    patientId: String
})

const emit = defineEmits(['getLogs'])

const logs = ref([]);

onMounted(async () => {
    logs.value = [];
    if (props.patientId) {
        const result = await getPatientLogs({
            patientId: props.patientId,
        });

        if (result.data && result.data.length > 0) {
            logs.value = result.data

            // 父组件可能未加载完成，所以延迟1s推送数据
            setTimeout(() => {
                emit('getLogs', logs.value)
            }, 1000)
        }
    }
    
})
    
</script>

<style lang="scss" scoped>
    /* .center-flex {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 90vh;
        height: 100vh;
    }*/
</style>