<template>
  <div :class="_class">
    <!-- @slot Breadcrumb 内容 -->
    <slot></slot>
  </div>
</template>

<script>
  import Emitter from 'utils-lib/dist/emitter';
  const name = 'hive-breadcrumb';

  export default {
    name,
    mixins: [
      Emitter,
    ],
    props: {
      /**
       * 自定义分隔符,
       */
      separator: {
        type: String,
        default: '',
      },
    },
    computed: {
      _class() {
        return [
          name,
          {
            [`${name}-border`]: this.border,
          },
        ];
      },
    },
    watch: {
      separator() {
        this.updateChildren();
      },
    },

    mounted() {
      this.$on('item.click', this.onHanleClick);
      this.updateChildren();
    },
    updated() {
      this.$nextTick(() => {
        this.updateChildren();
      });
    },

    methods: {
      onHanleClick(key, value) {
        /**
         * 每个 Item 点击回调, 返回对应 key 值与 Item 的内容
         */
        this.$emit('onItemClick', [key, value]);
      },
      updateChildren() {
        this.$children.forEach((child, index) => {
          child.separator = this.separator;
          child.key = index;
          child.value = child.$el.innerText;
        });
      },
    },
  };
</script>
