<template>
  <span
    v-if="disableTransitions"
    :class="classes"
    :style="styles"
    @click="handleClick">
    <span v-if="dotType || dotColor" :class="dotClasses" :style="dotStyles"></span>
    <slot name="default"></slot>
    <i v-if="closable" class="onestop-tag__close onestop-icon-close" @click="handleClose"></i>
  </span>
  <transition name="onestop-zoom-in-center" v-else>
    <span
      :class="classes"
      :style="styles"
      @click="handleClick">
      <span v-if="dotType || dotColor" :class="dotClasses" :style="dotStyles"></span>
      <slot name="default"></slot>
      <i v-if="closable" class="onestop-tag__close onestop-icon-close" @click="handleClose"></i>
    </span>
  </transition>
</template>

<script>
  export default {
    name: 'OnestopTag',
    props: {
      closable: Boolean, // 待拓展、暂时不放开
      type: String,
      hit: Boolean,
      disableTransitions: Boolean,
      backgroundColor: String,
      color: String,
      size: String,
      useRectangleRadius: Boolean,
      borderRadius: String,
      effect: {
        type: String,
        default: 'light',
        validator(val) {
          return ['dark', 'light'].indexOf(val) !== -1;
        }
      },
      dotType: String,
      dotColor: String,
      textTransform: String
    },
    methods: {
      handleClose(event) {
        event.stopPropagation();
        this.$emit('close', event);
      },
      handleClick(event) {
        this.$emit('click', event);
      }
    },
    computed: {
      dotStyles() {
        const { dotColor } = this
        let obj = {}

        if (dotColor) {
          obj.backgroundColor = dotColor
        }

        return obj
      },
      styles() {
        const { color, borderRadius, backgroundColor, textTransform } = this
        let obj = {}

        if (backgroundColor) {
          obj.backgroundColor = backgroundColor
        }

        if (color) {
          obj.color = color
        }

        if (borderRadius) {
          obj.borderRadius = borderRadius
        }

        if (textTransform) {
          obj.textTransform = textTransform
        }

        return obj
      },
      tagSize() {
        return this.size || (this.$ELEMENT || {}).size;
      },
      dotClasses () {
        const { dotType } = this;

        return [
          'onestop-tag-dot',
          dotType ? `onestop-tag-dot--${dotType}` : ''
        ];
      },
      classes() {
        const { type, tagSize, hit, effect, useRectangleRadius } = this;

        return [
          'onestop-tag',
          type ? `onestop-tag--${type}` : '',
          tagSize ? `onestop-tag--${tagSize}` : '',
          effect ? `onestop-tag--${effect}` : '',
          hit && 'is-hit',
          useRectangleRadius && 'is-rectangle'
        ];
      }
    }
  };
</script>

