<template>
    <div class="time-line">
        <div
            class="border-l-4 border-green-500 pl-2 font-medium mb-4 text-gray-700 ml-1"
        >
            任务跟踪记录
        </div>
        <div v-if="logs.length > 0" style="max-height: 500px; overflow: auto">
            <el-timeline>
                <el-timeline-item
                    v-for="(log, index) in logs"
                    :key="index"
                    :timestamp="log.createTime"
                    placement="top"
                >
                    <div class="text-sm flex">
                        <div class="font-medium text-gray-700">
                            {{ log.createName }}:
                        </div>
                        <div class="text-gray-500">
                            {{ log.content }}
                        </div>
                    </div>
                </el-timeline-item>
            </el-timeline>
        </div>
        <div v-else class="text-gray-400 text-sm py-4"> 暂无记录 </div>
    </div>
</template>

<script setup>
    defineProps({
        logs: {
            type: Array,
            default: () => []
        }
    });
</script>
