<template>
    <ul class="model-step-wrap">
        <li v-for="(step,index) in stepList" :key="step.text"
            class="step-item"
            :class="{'active':index+1===activeStep,'success':index+1<activeStep}"
        >   
            <div class="step-line"></div>
            <div class="step-num" v-if="index+1>=activeStep">{{index+1}}</div>
            <div class="step-num" v-else><i class="el-icon-check"></i></div>
            <div class="step-text">{{step.text}}</div>
            
        </li>
    </ul>
</template>

<script>
export default {
    props:{
        stepList:{
            type:Array,
            default:()=>{
                return [
                    {text:'选择验证方式'},
                    {text:'进行安全验证'},
                    {text:'设置密码'}
                ]
            }
        },
        activeStep:{
            type:Number,
            default:1
        }
    },
    data() {
        return {

        };
    },
    methods: {

    },
};
</script>

<style scoped lang="scss">
.model-step-wrap{
    display: flex;
    justify-content: center;
    width: 100%;
    .step-item{
        display: flex;
        align-items: center;
        gap: 12px;
        color: #DCDCDC;
        font-size: 20px;
        &:first-child{
            .step-line{
                display: none;
            }
        }
        &:last-child{
            .step-text{
                margin-right: 0;
            }
        }
        &.active,&.success{
            color:#3654C1;
            .step-num{
                border-color: #3654C1;
                color: #3654C1;
            }
            .step-line{
                background-color: #3654C1;
            }
        }
        &.success{
            color: #000;
        }
        .step-num{
            width:24px;
            height:24px;
            font-size: 16px;
            border:1px solid #DCDCDC;
            border-radius: 50%;
            text-align: center;
            line-height: 25px;
        }
        .step-line{
           flex: 1;
           height:2px;
           background-color:#DCDCDC ;
           min-width: 40px;
        }
        .step-text{
            margin-right: 16px;
        }
    }
}
</style>
