<template>
  <div
    :class="className"
    v-on="listeners"
  >
    <!-- @slot tag内容 -->
    <slot />
    <Icon
      icon="clear"
      v-if="closable"
      class="hive-tag__close"
      @click="onClose"
    />
  </div>
</template>

<script>
import Icon from '../icon';

const name = 'hive-tag';
export default {
  name,
  components: {
    Icon
  },
  props: {
    /**
     * 是否可关闭
     */
    closable: Boolean
  },
  computed: {
    className() {
      return [
        'hive-tag',
        {
          'hive-tag--closable': this.closable
        }
      ];
    },
    listeners() {
      const { close, ...otherEvent } = this.$listeners;
      return { ...otherEvent };
    }
  },
  methods: {
    onClose(e) {
      e.stopPropagation();
      /**
       * 关闭tag的回调
       */
      this.$emit('close');
    }
  }
};
</script>
