<template>
    <div class="nav-wrapper" :style="getNavStyles">
        <div
            :key="index"
            class="navitem"
            :class="item.active ? 'is-active' : ''"
            v-for="(item, index) in steps"
        >
            <span class="navitem_sep" v-show="index != 0"></span>
            <span class="navitem_circle"></span>
            <span class="navitem_text">{{ item.title }}</span>
        </div>
    </div>
</template>

<script>

    export default {
        name: "index",
        props: {
            steps: {
                type: Array,
                default: () => []
            }
        },
        computed: {
            getNavStyles() {
                return {width: this.steps.length * 180 + "px"};
            }
        },
        methods: {},
        mounted() {
        },
        watch: {},
        components: {}
    };
</script>

<style>
    .nav-wrapper {
        margin: auto;
        height: 100%;
        position: relative;
    }

    .navitem.is-active {
        color: #3aadfb;
    }

    .navitem {
        display: inline-block;
        color: #fff;
        cursor: pointer;
        background: #282828;
        float: left;
    }

    .navitem.is-active .navitem_circle {
        background: #3aadfb;
        border: none;
        box-shadow: 0 0 4px 0 #3aadfb;
    }

    .navitem_circle {
        display: inline-block;
        width: 10px;
        margin-left: 10px;
        height: 10px;
        margin-right: 10px;
        border: 1px solid #efefef;
        border-radius: 5px;
    }

    .navitem_sep {
        float: left;
        display: inline-block;
        position: relative;
        width: 110px;
        border: 1px dashed #676767;
        top: 20px;
        margin-top: -1px;
    }
</style>
