<template>
  <span class="bgo-tag" :class="getClass()" :style="tagStyle" @click="onClick">
    <span class="bgo-tag__text">
      <slot></slot>
    </span>
    <van-icon
      v-if="closeable"
      name="cross"
      class="bgo-tag__close-icon"
      @click.stop="onClose"
    />
  </span>
</template>

<script>
export default {
  name: "BgoTag",
  props: {
    type: {
      type: String,
      default: "default",
      validator(value) {
        return (
          ["default", "primary", "error", "success", "warning"].indexOf(
            value
          ) !== -1
        );
      },
    },
    // 是否可关闭
    closeable: {
      type: Boolean,
      default: false,
    },
    // 是否朴素（线框）模式
    plain: {
      type: Boolean,
      default: false,
    },
    // Tag尺寸
    size: {
      type: String,
      default: "medium",
      validator(value) {
        return ["small", "medium", "large"].indexOf(value) !== -1;
      },
    },
    // 背景颜色
    color: {
      type: String,
    },
    // 文本颜色
    textColor: {
      type: String,
    },
  },
  computed: {
    tagStyle() {
      let style = {};

      if (this.color) {
        style.backgroundColor = this.color;
      }

      if (this.textColor) {
        style.color = this.textColor;
      }

      return style;
    },
  },
  methods: {
    /**
     * 根据参数，构造标签样式类列表
     */
    getClass() {
      const classes = [];

      if (this.type) {
        classes.push("bgo-tag--" + this.type);
      }

      if (this.size) {
        classes.push("bgo-tag--" + this.size);
      }

      if (this.plain) {
        classes.push("hairline hairline--surround");
        classes.push("bgo-tag--plain");
      }

      return classes.join(" ");
    },

    /**
     * 点击标签
     */
    onClick(event) {
      this.$emit("click", event);
    },

    /**
     * 点击关闭按钮
     */
    onClose(event) {
      this.$emit("close", event);
    },
  },
};
</script>

<style lang="scss">
@import "./index";
@import "~@bingoit/mobile-ui/lib/style/hairline";
</style>
