<template>
  <span class="qf-breadcrumb-item">
    <span
      :class="['qf-breadcrumb-inner', to ? 'is-link' : '']"
      ref="link"
      role="link">
      <slot></slot>
    </span>
    <i v-if="separatorClass" class="qf-breadcrumb-separator" :class="separatorClass"></i>
    <span v-else class="qf-breadcrumb-separator" role="presentation">{{separator}}</span>
  </span>
</template>
<script>

export default {
  name: 'QfBreadcrumbItem',
  props: {
    to: {},
    replace: Boolean
  },
  data() {
    return {
      separator: '',
      separatorClass: ''
    };
  },
  inject: ['breadcrumb'],
  mounted() {
    this.separator = this.breadcrumb.separator;
    this.separatorClass = this.breadcrumb.separatorClass;
    let self = this;
    if (this.to) {
      let link = this.$refs.link;
      link.setAttribute('role', 'link');
      link.addEventListener('click', _ => {
        let to = this.to;
        self.replace ? self.$router.replace(to)
          : self.$router.push(to);
      });
    }
  }
};
</script>
