<template>
  <div class="hae-tag" :class="{'active':selected, 'disabled':disableTag}" v-if="show" @click="selectTag">
    <span class="hae-tag-content">{{content}}</span>
    <span v-if="closable && !disableTag" @click="closeTag" class="iconfont close">&#xe652;</span>
  </div>
</template>
<script>
export default {
  name: 'tag',
  data () {
    return {
      show: true,
      selected: false
    }
  },
  props: {
    content: String,
    closable: {
      type: Boolean,
      default: true
    },
    disableTag: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    closeTag () {
      this.show = false;
    },
    selectTag () {
      if (this.disableTag) {
        return;
      }
      this.selected = !this.selected;
    }
  }
};
</script>
<style lang="less">
.hae-tag {
    display: inline-block;
    background: #FFFFFF;
    position: relative;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 2px 10px;
    font-size: 14px;
    margin: 10px;
}
.hae-tag.active {
    color: #108ee9;
    border-color: #108ee9;
}
.hae-tag.disabled {
  color: #cccccc;
}
.iconfont.close {
    position: absolute;
    color: #cccccc;
    top: -8px;
    right: -8px;
    background-color: #FFF;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>