<template>
  <span class="xb-breadcrumb__item">
    <i class="xb-breadcrumb__icon" :class="icon" v-if="icon"></i>
    <span :class="['xb-breadcrumb__inner', to ? 'is-link' : '']" ref="link" role="link">
      <slot></slot>
    </span>
    <i v-if="separatorClass" class="xb-breadcrumb__separator" :class="separatorClass"></i>
    <span v-else class="xb-breadcrumb__separator" role="presentation">{{separator}}</span>
  </span>
</template>

<script>
export default {
  name: 'XbBreadcrumbItem',
  props: {
    icon: {
      type: String,
      default: ''
    },
    to: {},
    replace: Boolean
  },
  data() {
    return {
      separator: '',
      separatorClass: ''
    };
  },
  inject: ['xbBreadcrumb'],
  mounted() {
    this.separator = this.xbBreadcrumb.separator;
    this.separatorClass = this.xbBreadcrumb.separatorClass;
    const link = this.$refs.link;
    link.setAttribute('role', 'link');
    link.addEventListener('click', _ => {
      const { to, $router } = this;
      if (!to || !$router) return;
      this.replace ? $router.replace(to) : $router.push(to);
    });
  },
  methods: {

  }
};
</script>
