<!--
 * @Description: 
 * @Autor: Heloise
 * @Date: 2022-05-31 15:52:22
 * @LastEditors: Heloise
 * @LastEditTime: 2022-06-24 10:55:50
-->
<script>
  export default {
    name: 'ElTag',
    props: {
      text: String,
      closable: Boolean,
      type: String,
      hit: Boolean,
      disableTransitions: Boolean,
      color: String,
      size: String,
      isSelectClose: {
        type: Boolean, // 针对多选的select、cascader下标签x的样式
        default: false
      },
      effect: {
        type: String,
        default: 'light',
        validator(val) {
          return ['dark', 'light', 'plain', 'mix', 'circle'].indexOf(val) !== -1;
        }
      }
    },
    methods: {
      handleClose(event) {
        event.stopPropagation();
        this.$emit('close', event);
      },
      handleClick(event) {
        this.$emit('click', event);
      }
    },
    computed: {
      tagSize() {
        return this.size || (this.$ELEMENT || {}).size;
      }
    },
    render(h) {
      const { type, tagSize, hit, effect, isSelectClose } = this;
      const classes = [
        'el-tag',
        type ? `el-tag--${type}` : '',
        tagSize ? `el-tag--${tagSize}` : '',
        effect ? `el-tag--${effect}` : '',
        hit && 'is-hit',
        this.closable && 'is-closable'
      ];
      const closeClasses = ['el-tag__close', isSelectClose ? 'bi-iconfont-close-corner' : 'bi-iconfont-close'];
      const tagEl = (
        <span
          class={ classes }
          style={{ backgroundColor: this.color }}
          on-click={ this.handleClick }>
          { this.$slots.default }
          {
            this.closable && <i class={closeClasses} on-click={ this.handleClose }></i>
          }
        </span>
      );

      return this.disableTransitions ? tagEl : <transition name="el-zoom-in-center">{ tagEl }</transition>;
    }
  };
</script>
