<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" class="bg-primary-light-10 w-full p-[12px] rounded-[6px] flex flex-col gap-[6px]">
                    <span v-for="(value, key) in item.content" :key="key">{{ key }}：{{ value }}</span>
                </div>
            </el-space>
        </el-timeline-item>
    </el-timeline>
</template>

<script setup lang="ts">
const props = defineProps({
    modelValue: {
        type: String,
        default: 'clueRecord'
    }
})
const loading = ref(false)
watch(
    () => props.modelValue,
    () => {
        console.log('线索来源')
        loading.value = true
        setTimeout(() => {
            loading.value = false
        }, 500)
    },
    { immediate: true }
)

const recordList = ref([
    {
        date: '2025-02-12 15:47:00',
        user: '电销老师：张三',
        step: '添加跟进',
        content: {
            客户姓名: '韩梅梅',
            联系电话: '188866668888',
            基本情况:
                '学生爸爸接电话，学生高三毕业，300多分，家长不清楚学生收到录取通知，家长说学生不读书了，我让家长先问问学生对未来的规划先和学生沟通一下，家长同意我们加他微信发专业资料给他看看，可以在微信上问问学生具体情况。推荐3'
        }
    },
    { date: '2025-02-12 15:47:00', user: '招生老师：王五', step: '领取线索', content: null },
    {
        date: '2025-02-12 15:47:00',
        user: '招生老师：王五',
        step: '添加进展',
        content: {
            状态: '账号已添加'
        }
    },
    {
        date: '2025-02-12 15:47:00',
        user: '招生老师：王五',
        step: '转化完成',
        content: {
            是否转化成功: '是',
            备注: '已交部分定位金'
        }
    }
])
</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>
