<template lang="pug">
    ul.oc-step
        li(v-for="(item, index) in items", v-html="item", @click="change(index)" :class="{ active: index <= current, current: index === current }")

</template>

<script>
    import DropDown from './dropdown';
    export default {
        name: 'oc-step',
        components: { DropDown },
        props: {
            items: null,
            current: { type: Number, default: 0 }
        },
        methods:{
            change(index){
                this.$emit('change', index)
            }
        }
    }
</script>

<style lang="stylus" scoped>
    .oc-step
        list-style-type none 
        display flex
        li 
            white-space nowrap
            margin-right 5px
            flex 1
            text-align center
            background-color #eceffe
            border 1px solid #eceffe
            padding 0 15px
            border-left 0
            border-right 0 
            position relative
            height 32px
            line-height 32px
            color #2639a0
            &:before
                z-index 0
                position absolute
                top 0
                left 0
                content ""
                display inline-block
                border-style solid
                border-width 15px 15px 15px 15px
                border-color transparent transparent transparent #fff
            &:after
                z-index 1
                position absolute
                top 0
                right -15px
                content ""
                display inline-block
                border-style solid
                border-width 15px 0 15px 15px
                border-color transparent #eceffe transparent
            &:first-child
                &:before
                    display none
            &:last-child
                margin-right 0
                border-right 1px solid #eceffe
                &:after
                    display none
            &.active
                background-color #2639a0
                color #fff
                &:after
                    border-color transparent #2639a0 transparent
                    
</style>
            
