<template>
    <el-steps
        style="width: 100%"
        :active="active"
        align-center
        finish-status="success"
    >
        <el-step v-for="item in stepList" :title="item.label">
            <template #description>
                <div>{{ item.time }}</div>
                <div>{{ item.createdBy }}</div>
            </template>
        </el-step>
    </el-steps>
</template>

<script setup>
    import { ref, reactive, watch } from 'vue';
    // 状态 0-创建(待付款) 1-已付款 2-已推送 3-已发货 4-已签收 5-已完成 6-已取消 7-超时取消
    const stepList = reactive([
        { label: '创建', time: '', createdBy: '', stutus: '1' },
        { label: '付款', time: '', createdBy: '', stutus: '2' },
        { label: '发货', time: '', createdBy: '', stutus: '3' },
        { label: '已签收', time: '', createdBy: '', stutus: '4' },
        { label: '完成', time: '', createdBy: '', stutus: '5' }
    ]);

    const props = defineProps({
        status: {
            type: [Number, String],
            default: '0'
        },
        logVoList: {
            type: Array,
            default: []
        }
    });

    watch(
        () => props.logVoList,
        (newVal) => {
            if (newVal.length > 0) {
                stepList.forEach((item) => {
                    item.time =
                        newVal.find((log) => log.status == item.stutus)
                            ?.createTime || '';
                    item.createdBy =
                        newVal.find((log) => log.status == item.stutus)
                            ?.createName || '';
                });
            } else {
                stepList.forEach((item) => {
                    item.time = '';
                    item.createdBy = '';
                });
            }
        },
        { deep: true, immediate: true }
    );

    const active = computed(() => {
        let status = props.logVoList[0]?.status || 1;
        return stepList.findIndex((item) => item.stutus == status) + 1;
    });
</script>
