<template>
    <div style="height: 100%">
        <el-steps
                :active="activeIndex"
                :direction="direction"
                :finish-status="finishStatus"
                :align-center="alignCenter"
                :simple="simple"
        >
            <el-step
                    v-for="(items,index) in stepsListTitle"
                    :key="index"
                    :title="items.title"
                    :description="items.description"
                    @click.native="clickItem(index)"
            ></el-step>
        </el-steps>
    </div>
</template>

<script>
export default {
    name: "index",
    props:{
        activeIndex:{
            type: Number,
            default: 0
        },
        finishStatus: {
            type: String,
            dafault: 'finish'
        },
        alignCenter: {
            type: Boolean,
            dafault: false
        },
        direction: {
          type: String,
          dafault: 'horizontal'
        },
        simple: {
            type: Boolean,
            default: false
        },
        stepsListTitle: {
            type: Array,
            default: ()=>[]
        }
    },
    methods: {
        clickItem(index) {
            this.$emit('click-item', index)
        }
    }

}
</script>

<style scoped>

</style>
