<template>
  <span :class="_class">
    <router-link
      v-if="to"
      :to="to"
      :target="target"
      :class="_linkClass"
      @click.stop="onClick(key,value)"
    >
      <slot />
    </router-link>
    <span
      v-else
      :class="_linkClass"
    >
      <slot />
    </span>
    <!-- @click.exact="onClick($event, false)"
    @click.ctrl="onClick($event, true)"
    @click.meta="onClick($event, true)" -->

    <span
      :class="_separatorClass"
      v-html="separator"
      v-if="_showSeparator"
    />
    <Icon
      v-if="!_showSeparator"
      :class="_separatorClass"
      icon="right"
    />
  </span>
</template>

<script>
import Emitter from 'utils-lib/dist/emitter';
import Link from '../scripts/mixins/link';
import Icon from '../icon';
const name = 'hive-breadcrumb__item';

export default {
  name,
  components: {
    Icon
  },
  mixins: [Link, Emitter],
  data() {
    return {
      separator: '',
      showSeparator: false
    };
  },
  computed: {
    _showSeparator() {
      console.log(this);
      return this.separator !== undefined && this.separator !== '';
    },
    _class() {
      return [name];
    },
    _linkClass() {
      return [`${name}-link`, `${name}__text`];
    },
    _separatorClass() {
      return [`hive-breadcrumb__separator`];
    }
  },
  methods: {
    onClick(key, value) {
      this.dispatch('hive-breadcrumb', 'item.click', [key, value]);
    }
  }
};
</script>
