<script>
  export default {
    name: 'ElTag',
    props: {
      text: String,
      closable: Boolean,
      type: String,
      border: {
        type: Boolean,
        default: true
      },
      hit: {
        type: Boolean,
        default: true
      },
      disableTransitions: Boolean,
      color: String,
      textColor: {
        type: String,
        default: '#053DC8'
      },
      size: {
        type: String,
        default: 'medium'
      },
      effect: {
        type: String,
        default: 'light',
        validator(val) {
          return ['dark', 'light', 'plain'].indexOf(val) !== -1;
        }
      }
    },
    methods: {
      handleClose(event) {
        event.stopPropagation();
        this.$emit('close', event);
      },
      handleClick(event) {
        this.$emit('click', event);
      },
      colorRgb() {
        // 16进制颜色值的正则
        var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
        // 把颜色值变成小写
        var color = this.color.toLowerCase();
        if (reg.test(color)) {
          // 如果只有三位的值，需变成六位，如：#fff => #ffffff
          if (color.length === 4) {
            var colorNew = '#';
            for (var i = 1; i < 4; i += 1) {
              colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
            }
            color = colorNew;
          }
          // 处理六位的颜色值，转为RGB
          var colorChange = [];
          for (var j = 1; j < 7; j += 2) {
            colorChange.push(parseInt('0x' + color.slice(j, j + 2), 0));
          }
          return colorChange.join(',');
        } else {
          return color;
        }
      }
    },
    computed: {
      tagSize() {
        return this.size || (this.$ELEMENT || {}).size;
      }
    },
    render(h) {
      const { type, tagSize, hit, effect, border } = this;
      const classes = [
        'el-tag',
        type ? `el-tag--${type}` : '',
        tagSize ? `el-tag--${tagSize}` : '',
        effect ? `el-tag--${effect}` : '',
        border ? '' : 'el-tag-border-none',
        hit && 'is-hit'
      ];
      let style = {};
      if (this.color) {
        const $color = this.colorRgb(this.color);
        if (this.effect === 'dark') {
          style = {
            borderColor: `rgba(${$color}, 1)`,
            backgroundColor: `rgba(${$color}, 1)`
          };
        } else if (this.effect === 'plain') {
          style = {
            color: `rgba(${$color}, 1)`,
            borderColor: `rgba(${$color}, 1)`
          };
        } else {
          style = {
            color: `rgba(${$color}, 1)`,
            borderColor: `rgba(${$color}, 0.2)`,
            backgroundColor: `rgba(${$color}, 0.1)`
          };
        }
      }
      const tagEl = (
        <span
          class={ classes }
          style={ style }
          on-click={ this.handleClick }>
          {
            this.type === 'text' && <i class="dot" style={{ backgroundColor: this.textColor }}></i>
          }
          { this.$slots.default }
          {
            this.closable && <i class="el-tag__close el-icon-close" on-click={ this.handleClose }></i>
          }
        </span>
      );

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