<template>
  <view class="k-tag">
    <view
      @click="handleClick"
      class="k-tag-wrap"
      :class="{
        'k-tag-large': size === 'large',
        'k-tag-middle': size === 'middle',
        'k-tag-small': size === 'small',
        'k-tag-round': round === true,
        'k-tag-rectangle': round === false,
        'k-tag-commercial': commercial === true,
        tint: tint === true,
        hollow: hollow === true,
      }"
      v-if="mode === 'default'"
      :style="{
        backgroundColor: [backgroundColor],
        borderColor: [borderColor],
        padding: `${computedPadding.y}px ${computedPadding.x}px`,
      }"
    >
      <view v-if="$slots['left-icon']" class="left-icon"
        ><slot name="left-icon"></slot
      ></view>
      <view
        class="k-tag-content"
        :style="{ computedFontSize: `${computedFontSize}px`, color: [color] }"
      >
        <slot />
      </view>
    </view>
    <view class="k-tag-wrap-member" v-else-if="mode === 'member'">
      <image
        :src="sliver"
        alt="sliver"
        v-if="memberType === 'sliver'"
        mode="heightFix"
      />
      <image
        :src="selectSliver"
        alt="selectSliver"
        v-else-if="memberType === 'selectSliver'"
        mode="heightFix"
      />
      <image
        :src="gold"
        alt="gold"
        v-if="memberType === 'gold'"
        mode="heightFix"
      />
      <image
        :src="platinum"
        alt="platinum"
        v-if="memberType === 'platinum'"
        mode="heightFix"
      />
    </view>
    <view class="k-tag-wrap-text" v-else-if="mode === 'text'">
      <view
        class="k-tag-content"
        :style="{ computedFontSize: `${computedFontSize}px`, color: [color] }"
      >
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  name: 'k-tag',
  data() {
    return {
      sliver: require('./images/tag-member-sliver.svg'),
      selectSliver: require('./images/tag-member-selectSliver.svg'),
      gold: require('./images/tag-member-gold.svg'),
      platinum: require('./images/tag-member-platinum.svg'),
    };
  },
  props: {
    commercial: {
      type: Boolean,
      default: false,
    },
    mode: {
      type: String,
      default: 'default', // default | member | text
    },
    size: {
      type: String,
      default: 'middle', // large | middle | small
    },
    fontSize: {
      type: Number,
      default: 12,
    },
    round: {
      type: Boolean,
      default: true,
    },
    tint: {
      type: Boolean,
      default: false,
    },
    hollow: {
      type: Boolean,
      default: false,
    },
    backgroundColor: {
      type: String,
      default: '',
    },
    color: {
      type: String,
      default: '',
    },
    borderColor: {
      type: String,
      default: '',
    },
    padding: {
      type: Object,
    },
    memberType: {
      type: String,
      default: 'sliver',
    },
  },
  computed: {
    computedFontSize() {
      if (this.fontSize) {
        return this.fontSize;
      } else {
        if (this.size === 'large') {
          return 14;
        } else {
          return 12;
        }
      }
    },
    computedPadding() {
      if (this.padding) {
        return this.padding;
      } else {
        if (this.size === 'large') {
          return {
            x: 12,
            y: this.hollow ? 5 : 6,
          };
        } else if (this.size === 'middle') {
          return {
            x: 8,
            y: 2,
          };
        } else if (this.size === 'small') {
          return {
            x: 8,
            y: 2,
          };
        } else {
          return {
            x: 0,
            y: 0,
          };
        }
      }
    },
  },
  methods: {
    handleClick(e: MouseEvent) {
      this.$emit('click', e);
    },
  },
});
</script>

<style scoped lang="scss">
.k-tag {
  display: inline-block;
  color: #fff;
  font-weight: 400;

  .k-tag-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: var(--k-color-neutral-01, #000);

    &.tint {
      background-color: var(--k-color-neutral-02, #000);
    }

    &.hollow {
      background-color: var(--k-color-neutral-05, #000);
      color: var(--k-color-neutral-02, #000);
      border: 1px solid var(--k-color-neutral-02, #000);
    }

    &.k-tag-commercial {
      background-color: var(--k-color-primary-01, #000);

      &.tint {
        background-color: var(--k-color-primary-02, #000);
      }

      &.hollow {
        background-color: var(--k-color-primary-06, #000);
        color: var(--k-color-primary-02, #000);
        border: 1px solid var(--k-color-primary-02, #000);
      }
    }

    .left-icon {
      margin-right: 5px;
    }
  }

  .k-tag-large {
    padding: 5.5px 12px;
    font-size: 14px;
    transform: scale(1);

    &.k-tag-round {
      border-radius: 30px;
    }
  }

  .k-tag-middle {
    padding: 2px 8px;
    font-size: 12px;
    transform: scale(1);

    &.k-tag-round {
      border-radius: 21px;
    }
  }

  .k-tag-small {
    font-size: 12px;
    transform: scale(0.7);
    padding: 2px 8px;

    &.k-tag-round {
      border-radius: 14.7px;
    }
  }

  .k-tag-rectangle {
    border-radius: 4px;
  }

  .k-tag-wrap-text {
    background-color: transparent;
    color: #ddd;
    font-size: 13px;
    font-weight: 400;
    height: 24px;
    line-height: 24px;
  }

  .k-tag-wrap-member {
    display: flex;
    justify-content: center;
    align-items: center;

    image {
      height: 33rpx;
    }
  }
}
</style>
