<template>
  <span class="el-breadcrumb__item">
    <span
      :class="['el-breadcrumb__inner', to ? 'is-link' : '']"
      :tabindex="to ? 0 : -1"
      ref="link"
      role="link"
      @click="navigate">
      <slot></slot>
    </span>
    <fa-icon
      :icon="['fal', 'chevron-right']"
      size="xs"
      class="el-breadcrumb__separator"></fa-icon>
  </span>
</template>
<script>
  export default {
    name: 'ElBreadcrumbItem',
    props: {
      to: {},
      replace: Boolean
    },

    inject: ['elBreadcrumb'],

    mounted() {
      const link = this.$refs.link;
      link.setAttribute('role', 'link');
    },
    methods: {
      navigate() {
        const { to, $router } = this;
        if (!to || !$router) return;
        this.replace ? $router.replace(to) : $router.push(to);
      }
    }
  };
</script>
