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

<script setup>
    import { ref, reactive, watch, computed } from 'vue';

    //已取消 20 初审未通过 4
    const defaultStepList = reactive([
        { statusName: '创建', createTime: '', createName: '', stutus: '0' },
        { statusName: '下单', createTime: '', createName: '', stutus: '2' },
        { statusName: '初审', createTime: '', createName: '', stutus: '3' },
        { statusName: '快递取书', createTime: '', createName: '', stutus: '5' },
        { statusName: '快递签收', createTime: '', createName: '', stutus: '6' },
        { statusName: '仓库收货', createTime: '', createName: '', stutus: '8' },
        {
            statusName: '到货审核',
            createTime: '',
            createName: '',
            stutus: '10'
        },
        {
            statusName: '支付书款（完成）',
            createTime: '',
            createName: '',
            stutus: '11'
        }
    ]);

    const stepList = ref([]);

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

    const isError = computed(() => {
        return props.logVoList.find((log) => ['4', '20'].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.createTime =
                        newVal.find((log) => log.status == item.stutus)
                            ?.createTime || '';
                    item.createName =
                        newVal.find((log) => log.status == item.stutus)
                            ?.createName || '';
                });
            } else {
                stepList.value.forEach((item) => {
                    item.createTime = '';
                    item.createName = '';
                });
            }
        },
        { 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.stutus == status) + 1;
    });
</script>

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