<template>
    <el-timeline class="px-[6px]" v-loading="loading">
        <el-timeline-item v-for="(item, index) in recordList" :key="index" type="primary" color="#0E66FB">
            <el-space direction="vertical" alignment="normal">
                <div class="text-primary">{{ item.date }}</div>
                <div>
                    {{ item.user }}
                    <span class="text-black2">「{{ item.step }}」</span>
                </div>
                <div v-if="item.content.length > 0" class="bg-primary-light-10 w-full p-[12px] rounded-[6px] flex flex-col gap-[6px]">
                    <span v-for="(itemy, index) in item.content" :key="index">{{ itemy.title }}{{ itemy.content }}</span>
                </div>
            </el-space>
        </el-timeline-item>
    </el-timeline>
</template>

<script setup lang="ts">
import { clueRecordLists } from '@/api/clue'
import { clueStepEnum, clueStepMap } from '@/enums'

interface IClueRecord {
    date: string
    user: string
    step: string
    content: { title: string; content: string }[] | []
}
const props = defineProps({
    modelValue: {
        type: String,
        default: 'clueRecord'
    },
    id: {
        type: Number
    }
})
const loading = ref(false)
const recordList = ref<IClueRecord[]>([])
const fetchClueRecord = async () => {
    const { id: clueId } = props
    try {
        loading.value = true
        const result = await clueRecordLists({ clueId })
        const data = result.lists.map(item => {
            return {
                date: item.createTime,
                user: `${item.postName}：${item.userName}`,
                step: clueStepMap[item.repairStep as clueStepEnum],
                content: item.contentList ?? []
            }
        })
        recordList.value = data
    } catch (error) {}
    loading.value = false
}

watch(
    () => props.modelValue,
    () => {
        fetchClueRecord()
    },
    { immediate: true }
)
</script>
<style scoped lang="scss">
:deep(.el-space) {
    width: 100%;
    .el-space__item {
        &:last-child {
            width: 100%;
        }
    }
}
:deep(.el-timeline-item__tail) {
    border-style: dashed;
    border-color: var(--el-color-primary);
}
</style>
