<template>
    <div class="demo-timeline">
        <div v-if="loading" v-loading="loading" style="height: 180px"></div>
        <template v-else>
            <div v-if="records.length" style="margin-bottom: 10px">{{
                title
            }}</div>
            <el-timeline v-if="records.length">
                <el-timeline-item
                    v-for="(item, index) in records"
                    :key="index"
                    :timestamp="item.createTime"
                    :color="item.label"
                >
                    <div
                        style="
                            display: flex;
                            align-items: center;
                            flex-wrap: wrap;
                        "
                    >
                        <el-icon :size="14" :color="item.label">
                            <Flag />
                        </el-icon>
                        <span>{{ item.createName }}：</span>
                        <span>{{ item.remark }}</span>
                    </div>
                </el-timeline-item>
            </el-timeline>
            <el-empty v-else description="暂无数据" :image-size="80" />
        </template>
    </div>
</template>

<script setup>
    import { watch, ref, onMounted } from 'vue';
    import request from '@/utils/request';
    import { Flag } from '@element-plus/icons-vue';

    const props = defineProps({
        orderId: {
            type: [String, Number],
            default: ''
        },
        title: {
            type: String,
            default: ''
        }
    });

    const records = ref([]);
    const loading = ref(false);
    const dataCache = ref(new Map());

    //获取备注
    const getRemarks = async (orderId) => {
        if (!orderId || loading.value) return;

        loading.value = true;
        try {
            const url = '/shop/shopOrderRemark/list';
            const res = await request.get(url, { params: { orderId } });
            records.value = res.data.data;
            // 缓存结果
            dataCache.value.set(orderId, res.data.data);
        } catch (error) {
            console.error('Failed to fetch remarks:', error);
        } finally {
            loading.value = false;
        }
    };

    //删除指定缓存
    const deleteCache = (orderId) => {
        dataCache.value.delete(orderId);
    };

    defineExpose({
        getRemarks,
        deleteCache
    });
</script>
