<template>
    <p :class="`${prefix}-breadcrumb`">
        <template v-for="(item,index) in paths">
            <span :key="item.path">
                <i v-if="item.icon"
                   :class="item.icon"></i>
                <router-link :class="`${prefix}-breadcrumb-item`"
                             tag="span"
                             exact
                             :to="{path: item.path}"
                             :replace="replace">{{item.title}}</router-link>
                <i v-if="seperatorClass && paths.length-1>index"
                   :class="sepClass"></i>
                <span v-else-if="!seperatorClass && paths.length-1>index"
                      :class="`${prefix}-breadcrumb-seperator`">{{seperator}}</span>
            </span>
        </template>
    </p>
</template>

<script>
import { prefix, prefixMixins } from 'jdd-design/utils';
export default {
    name: `${prefix}-breadcrumb`,
    mixins: [prefixMixins],
    props: {
        replace: Boolean,
        paths: Array,
        seperator: {
            type: String,
            default: '/'
        },
        seperatorClass: {
            type: String
            // default:`${prefix}-icon-arrow-right`
        }
    },
    computed: {
        sepClass() {
            let clsNames = [
                `${prefix}-breadcrumb-seperator`,
                `${prefix}-breadcrumb-seperator__icon`
            ];
            this.seperatorClass && clsNames.push(this.seperatorClass);
            return clsNames;
        }
    }
};
</script>

<style>
</style>
