<template>
    <el-steps
        style="width: 100%"
        :active="active"
        align-center
        finish-status="success"
    >
        <el-step
            v-for="(item, index) in stepList"
            :title="item.label"
            :status="isError && index === stepList.length - 1 ? 'error' : ''"
            :key="index"
        >
            <template #description>
                <div>{{ item.time }}</div>
                <div>{{ item.createdBy }}</div>
            </template>
        </el-step>
    </el-steps>
</template>

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

    const stepList = ref([]);

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

    const isError = computed(() => {
        return props.logVoList.find((log) => ['6', '7'].includes(log.status));
    });

    watch(
        () => props.logVoList,
        (newVal) => {
            if (newVal.length > 0) {
                stepList.value = [];

                if (isError.value) {
                    return (stepList.value = newVal);
                }
                stepList.value = defaultStepList;
                stepList.value.forEach((item) => {
                    item.time =
                        newVal.find((log) => log.status == item.status)
                            ?.createTime || '';
                    item.createdBy =
                        newVal.find((log) => log.status == item.status)
                            ?.createName || '';
                });
            } else {
                stepList.value.forEach((item) => {
                    item.time = '';
                    item.createdBy = '';
                });
            }
            console.log(stepList, 'stepList');
        },
        { deep: true, immediate: true }
    );

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

<style lang="scss">
    .error-step {
        .el-step__title.is-success,
        .el-step__description.is-success {
            color: red;
        }
    }
</style>
