<template>
    <div class="step-wrap">
        <div class="step-item" :class="{'active':activeStep===index+1}"
            v-for="(step,index) in stepsArr" :key="index"
            @click="changeActiveStep(index)">
            <div class="step-line"></div>
            <div class="step-icon" v-if="(activeStep<=index+1)||allowStepClick">{{index+1}}</div>
            <div class="step-icon finished" v-else><i class="el-icon-check"></i></div>
            <div class="step-text">{{step.text}}</div>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        allowStepClick:{ //是否允许点击切换步骤
            type:Boolean,
            default:true
        },
        activeStep:{ //激活的步骤
            type:Number,
            default:0
        },
        stepsArr:{ //步骤数组
            type:Array,
            default:()=>{
                return [
                    {
                        text:'基础信息'
                    },{
                        text:'签约信息'
                    }
                ]
            }
        }
    },
    data() {
        return {

        };
    },
    methods: {
        changeActiveStep(index){
            if(!this.allowStepClick) return 
            this.$emit('changeActiveStep',index)
        }
    },
};
</script>

<style scoped lang="scss">
.step-wrap{
    display: flex;
    .step-item{
        position: relative;
        display: flex;
        align-items: center;
        gap:16px;
        color:rgba(0, 0, 0, 0.4);
        cursor: pointer;
        .step-line{
            flex: 1;
            height:2px;
            background-color: #DCDCDC;
            min-width: 270px;
        }
        .step-icon{
            width:24px;
            height:24px;
            border-radius: 50%;
            border:2px solid rgba(0, 0, 0, 0.4);
            text-align: center;
            line-height: 24px;
            font-size: 16px;
            &.finished{
                border-color: #3385FF;
                i{
                    color:#3385FF;
                    font-weight: bold;
                }
            }
        }
        .step-text{
            margin-right: 16px;
        }
        &:first-child{
            .step-line{
                display: none;
            }
        }

        &.active{
            color:#3385FF;
            .step-icon{
                background-color: #3385FF;
                color:#fff;
                border-color: transparent;
            }
            .step-line{
                background-color: #3385FF;
            }
        }
    }
}
</style>
