<template>
  <span :class="[wrapperClass, {'item-link': to}]">
    <span class="breadcrumb-item-text" @click="link()"><slot></slot></span>
    <span class="breadcrumb-item-separator">
      <slot name="separator">
        <template v-if="xBreadcrumb.separator">{{ xBreadcrumb.separator }}</template>
        <i v-else class="breadcrumb-item-separator-icon" :class="[xBreadcrumb.separatorIcon]"></i>
      </slot>
    </span>
  </span>
</template>
<script>
import { LIB_NAME } from '../../../../src/util'
const wrapperClass = `${LIB_NAME}-breadcrumb-item`

export default {
  name: 'xBreadcrumbItem',
  inject: ['xBreadcrumb'],
  props: {

    // 路由跳转对象，同 vue-router 的 to
    to: { // eslint-disable-line
      type: [String, Object]
    },

    // 在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录
    replace: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      wrapperClass
    }
  },
  methods: {
    link() {
      if (this.to && this.$router) {
        const go = this.replace ? 'replace' : 'push'
        this.$router[go](this.to)
      }
    }
  }
}
</script>
