<template>
  <view class="ml-tag" :class="[className || '', status ? `ss-${status}` : '', {'is-round': round}]" @tap="clickEvent">
    <view class="ml-tag-content">
      <slot>{{ content }}</slot>
    </view>
    <view class="ml-tag-close-warpper" v-if="closable" @tap="closeEvent">
      <ml-icon class="ml-tag-close-btn" name="close"></ml-icon>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'MlTag',
  options: {
    virtualHost: true
  },
  props: {
    status: String,
    round: Boolean,
    closable: Boolean,
    content: String,
    className: String
  },
  methods: {
    closeEvent (evnt: Event) {
      evnt.stopPropagation()
      this.$emit('close', {})
    },
    clickEvent (evnt: Event) {
      this.$emit('tap', {})
      this.$emit('click', {})
    }
  }
})
</script>

<style lang="scss">
.ml-tag {
  display: inline-flex;
  padding: 4rpx 16rpx;
  border: 2rpx solid #e8e8e8;
  margin: 0 8rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  &.is-round {
    border-radius: $ml-border-radius;
  }
  &.ss-primary {
    color: #fff;
    background: $ml-theme-primary-color;
  }
  &.ss-success {
    color: #fff;
    background: $ml-theme-success-color;
  }
  &.ss-info {
    background: #909399;
  }
  &.ss-warning {
    color: #fff;
    background: $ml-theme-warning-color;
  }
  &.ss-danger {
    color: #fff;
    background: $ml-theme-error-color;
  }
  &.ss-gray {
    background: $ml-gray-color;
  }
  &.ss-blue {
    color: #fff;
    background: $ml-blue-color;
  }
  &.ss-green {
    color: #fff;
    background: $ml-green-color;
  }
  &.ss-pink {
    color: #fff;
    background: $ml-pink-color;
  }
  &.ss-red {
    color: #fff;
    background: $ml-red-color;
  }
  &.ss-orange {
    color: #fff;
    background: $ml-orange-color;
  }
  &.ss-purple {
    color: #fff;
    background: $ml-purple-color;
  }
  &.ss-white {
    background: $ml-white-color;
  }
  .ml-tag-close-warpper {
    flex-shrink: 0;
    padding: 0 8rpx;
    cursor: pointer;
  }
  .ml-tag-close-btn {
    padding: 4rpx;
    font-size: 24rpx;
    &:hover {
      color: #fff;
      background: #909399;
      border-radius: 50%;
    }
  }
}
</style>
