<template>
  <view class="zui-tag" :class="classRender" :style="styleRender" @click="onClick">
    <slot></slot>
  </view>
</template>

<script>
import color from 'color';

export default {
  name: 'ZuiTag',
  props: {
    type: {
      type: String,
      default: 'default',
    },
    size: {
      type: String,
      default: 'md',
    },
    round: Boolean,
    circle: Boolean,
    square: Boolean,
    theme: String,
    color: String,
    fontColor: String,
  },
  computed: {
    styleRender: function() {
      if (this.color) {
        if (this.color.includes('linear-gradient')) {
          return `
            color: ${this.fontColor};
            background: ${this.color};
            border: none;
          `.trim();
        }
        const config = {
          primary: `
            color: ${this.fontColor};
            border-color: ${this.color};
            background-color: ${this.color};
          `.trim(),
          secondary: `
            color: ${this.color};
            background-color: ${color(this.color).lightness(95)};
          `.trim(),
          plain: `
            border-color: ${this.color};
            color: ${this.color};
            background-color: ${color(this.color).lightness(95)};
          `.trim(),
          ghost: `
            border-color: ${this.color};
            color: ${this.color};
          `.trim(),
        };
        return config[this.type] || `color: ${this.color};`.trim();
      }
      return `color: ${this.fontColor};`;
    },
    classRender: function() {
      const classList = [
        this.size,
        this.type,
        this.theme,
        this.round ? 'round' : '',
        this.square ? 'square' : '',
        this.color ? 'custom' : '',
      ];
      if (this.$options && this.$options.propsData && this.$options.propsData.className) {
        return `${this.$options.propsData.className} ${classList.join(' ')}`;
      }
      return classList.join(' ');
    }
  },
  methods: {
    onClick: function() {
      this.$emit('click');
    }
  }
};
</script>

<style lang="scss">
@import './index.scss';
</style>
