<template>
  <!-- <s-transition
		mode="fade"
		:show="show"
	> -->
  <view class="s-tag-wrapper" v-if="show">
    <view
      class="s-tag"
      :class="[
        `s-tag--${shape}`,
        !plain && `s-tag--${type}`,
        plain && `s-tag--${type}--plain`,
        `s-tag--${size}`,
        plain && plainFill && `s-tag--${type}--plain--fill`,
        themeColor + '-theme',
      ]"
      @click.stop="clickHandler($event)"
      :style="[
        {
          marginRight: closable ? '10px' : 0,
          marginTop: closable ? '10px' : 0,
        },
        style,
      ]"
    >
      <slot name="icon">
        <view class="s-tag__icon" v-if="icon">
          <image
            v-if="$s.test.image(icon)"
            :src="icon"
            :style="[imgStyle]"
          ></image>
          <s-icon
            v-else
            :color="elIconColor"
            :name="icon"
            :size="iconSize"
          ></s-icon>
        </view>
      </slot>
      <text
        class="s-tag__text"
        :style="[textColor]"
        :class="[
          `s-tag__text--${type}`,
          plain && `s-tag__text--${type}--plain`,
          `s-tag__text--${size}`,
          `${themeColor}-theme-bg-text`,
        ]"
      >
        {{ text }}
      </text>
      <!-- #ifndef MP-WEIXIN -->
      <s-wave
        v-if="showRipple"
        :rippleBgColor="rippleBgColor"
        ref="wave"
      ></s-wave>
      <!-- #endif -->
    </view>
    <view
      class="s-tag__close"
      :class="[`s-tag__close--${size}`]"
      v-if="closable"
      @tap.stop="closeHandler"
      :style="{ backgroundColor: closeColor }"
    >
      <s-icon
        class="s-tag__close--weight"
        name="close"
        :size="closeSize"
        color="#999999"
  
      ></s-icon>
    </view>
  </view>
  <!-- </s-transition> -->
</template>

<script>
import props from './props.js'
/**
 * Tag 标签
 * @description tag组件一般用于标记和选择，我们提供了更加丰富的表现形式，能够较全面的涵盖您的使用场景
 * @tutorial https://www.uviewui.com/components/tag.html
 * @property {String}			type		标签类型info、primary、success、warning、error （默认 'primary' ）
 * @property {Boolean | String}	disabled	不可用（默认 false ）
 * @property {String}			size		标签的大小，large，medium，mini （默认 'medium' ）
 * @property {String}			shape		tag的形状，circle（两边半圆形）, square（方形，带圆角）（默认 'square' ）
 * @property {String | Number}	text		标签的文字内容
 * @property {String}			bgColor		背景颜色，默认为空字符串，即不处理
 * @property {String}			color		标签字体颜色，默认为空字符串，即不处理
 * @property {String}			borderColor	镂空形式标签的边框颜色
 * @property {String}			closeColor	关闭按钮图标的颜色（默认 #C6C7CB）
 * @property {String | Number}	name		点击时返回的索引值，用于区分例遍的数组哪个元素被点击了
 * @property {Boolean}			plainFill	镂空时是否填充背景色（默认 false ）
 * @property {Boolean}			plain		是否镂空（默认 false ）
 * @property {Boolean}			closable	是否可关闭，设置为true，文字右边会出现一个关闭图标（默认 false ）
 * @property {Boolean}			show		标签显示与否（默认 true ）
 * @property {String}			icon		内置图标，或绝对路径的图片
 * @property {String} 	fllowTheme  是否跟随主题,设置true以后会优先采用主题方案
 * @property {Boolean}			shadow		是否显示阴影
 * @property {Boolean}			showRipple		是否显示水波纹
 * @property {String}			rippleBgColor		水波纹颜色
 * @event {Function(index)} click 点击标签时触发 index: 传递的index参数值
 * @event {Function(index)} close closable为true时，点击标签关闭按钮触发 index: 传递的index参数值
 * @example <s-tag text="标签" type="error" plain plainFill></s-tag>
 */
export default {
  name: 's-tag',
  mixins: [uni.$s.mpMixin, uni.$s.mixin, props],
  data() {
    return {}
  },
  computed: {
    typeColor() {
      let scolor = '#000'
      const { type } = this
      if (type === 'info') scolor = 'rgb(116,115,115)'
      if (type === 'success') scolor = '#55BB5A'
      if (type === 'error') scolor = '#D81307'
      if (type === 'primary') scolor = '#597EF7'
      if (type === 'warning') scolor = '#FF8F00'
      return scolor
    },
    style() {
      const style = {}
      if (this.bgColor) {
        style.backgroundColor = this.bgColor
      }
      if (this.color) {
        style.color = this.color
      }
      if (this.borderColor) {
        style.borderColor = this.borderColor
      }
      return style
    },
    // nvue下，文本颜色无法继承父元素
    textColor() {
      const style = {}
      if (this.color) {
        style.color = this.color
      }
      return style
    },
    imgStyle() {
      const width =
        this.size === 'large'
          ? '17px'
          : this.size === 'medium'
          ? '15px'
          : '13px'
      return {
        width,
        height: width,
      }
    },
    // 文本的样式
    closeSize() {
      const size = this.size === 'large' ? 14 : this.size === 'medium' ? 14 : 14
      return size
    },
    // 图标大小
    iconSize() {
      const size = this.size === 'large' ? 21 : this.size === 'medium' ? 19 : 16
      return size
    },
    // 图标颜色
    elIconColor() {
      return this.iconColor
        ? this.iconColor
        : this.plain
        ? this.type
        : '#ffffff'
    },
  },
  methods: {
    // 点击关闭按钮
    closeHandler() {
      this.$emit('close', this.name)
    },
    // 点击标签
    clickHandler(el) {
        // #ifndef MP-WEIXIN
      this.showRipple && this.$refs.wave.getWaveQuery(el, '.s-tag')
        // #endif
      this.$emit('click', this.name)
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../../libs/css/components.scss';

.s-tag-wrapper {
  position: relative;
}

.s-tag {
  @include flex;
  align-items: center;
  border-style: solid;
  position: relative;
  overflow: hidden;

  &--circle {
    border-radius: 100px;
  }

  &--square {
    border-radius: 4px;
  }

  &__icon {
    margin-right: 4px;
  }
  &--shadow {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  &__text {
    &--mini {
      font-size: 12px;
      /* line-height: 12px; */
    }

    &--medium {
      font-size: 12px;
      /* line-height: 13px; */
    }

    &--large {
      font-size: 12px;
      /* line-height: 15px; */
    }
  }

  &--mini {
    height: 46rpx;
    line-height: 46rpx;
    padding: 0px 16rpx;
  }

  &--medium {
    height: 24px;
    line-height: 24px;
    padding: 4px 14px;
  }

  &--large {
    height: 28px;
    line-height: 28px;
    padding: 6px 18px;
  }

  &--primary {
    background-color: $s-primary;
    border-width: 1rpx;
    border-color: $s-primary;
  }

  &--primary--plain {
    border-width: 1rpx;
    border-color: $s-primary;
  }

  &--primary--plain--fill {
    background-color: #d8e1ff;
  }

  &__text--primary {
    color: #ffffff;
  }

  &__text--primary--plain {
    color: $s-primary;
  }

  &--error {
    background-color: $s-error;
    border-width: 1rpx;
    border-color: $s-error;
  }

  &--error--plain {
    border-width: 1rpx;
    border-color: $s-error;
  }

  &--error--plain--fill {
    background-color: #fef0f0;
  }

  &__text--error {
    color: #ffffff;
  }

  &__text--error--plain {
    color: $s-error;
  }

  &--warning {
    background-color: $s-warning;
    border-width: 1rpx;
    border-color: $s-warning;
  }

  &--warning--plain {
    border-width: 1rpx;
    border-color: $s-warning;
  }

  &--warning--plain--fill {
    background-color: #fff2f1;
  }

  &__text--warning {
    color: #ffffff;
  }

  &__text--warning--plain {
    color: $s-warning;
  }

  &--success {
    background-color: $s-success;
    border-width: 1rpx;
    border-color: $s-success;
  }

  &--success--plain {
    border-width: 1rpx;
    border-color: $s-success;
  }

  &--success--plain--fill {
    background-color: #ecffed;
  }

  &__text--success {
    color: #ffffff;
  }

  &__text--success--plain {
    color: $s-success;
  }

  &--info {
    background-color: $s-info;
    border-width: 1rpx;
    border-color: $s-info;
  }

  &--info--plain {
    border-width: 1rpx;
    border-color: $s-info;
  }

  &--info--plain--fill {
    background-color: #f4f4f5;
  }

  &__text--info {
    color: #ffffff;
  }

  &__text--info--plain {
    color: $s-info;
  }

  &__close {
    position: absolute;
    z-index: 999;
    top: 14px;
    right: 14px;
    border-radius: 100px;
    background-color: #c6c7cb;
    @include flex(row);
    align-items: center;
    justify-content: center;
    /* #ifndef APP-NVUE */
    transform: scale(0.8) translate(80%, -80%);
    /* #endif */
    /* #ifdef APP-NVUE */
    transform: scale(0.8) translate(50%, -50%);
    /* #endif */

    &--mini {
      width: 20px;
      height: 20px;
    }

    &--medium {
      width: 20px;
      height: 20px;
    }

    &--large {
      width: 20px;
      height: 20px;
    }
    &--weight {
      ::v-deep.uicon-close {
        font-weight: 800 !important;
      }
    }
  }
}
</style>
