<!--
 * @Author: peerless_hero peerless_hero@outlook.com
 * @Date: 2023-07-11 02:12:08
 * @LastEditors: peerless_hero peerless_hero@outlook.com
 * @LastEditTime: 2023-07-11 03:15:44
 * @FilePath: \uni\packages\tag\index.vue
 * @Description:
 *
-->
<template>
  <Text
    class="th-tag"
    :class="className"
    text-center
    inline-block
    min-w-128rpx
    h-48rpx
    fs-24
    font-500
    leh-48
    border-2rpx
    border-solid
    rounded-16rpx
  >
    &nbsp;&nbsp;&nbsp;{{ text }}&nbsp;&nbsp;&nbsp;
  </Text>
</template>

<script lang="ts" setup name="Tag">
import { computed } from 'vue'

const props = withDefaults(
  defineProps<{
  /** 类型 */
    type?: 'default' | 'error' | 'warning'
    /** 显示文本 */
    text?: string
  }>(),
  {
    type: 'default',
  },
)

const className = computed(() => {
  switch (props.type) {
    case 'error':
      return 'th-tag-error'
    case 'warning':
      return 'th-tag-warning'
    default:
      return 'th-tag-default'
  }
})
</script>

<style lang="scss">
.th-tag {

  &.th-tag-default {
    background-color: #f9f9f9;
    border-color: #cccccc;
    color: #393939;
  }

  &.th-tag-error {
    background-color: #fef0f0;
    border-color: #fbc7c7;
    color: #e43d33;
  }

  &.th-tag-warning {
    background-color: #fff6e8;
    border-color: #f6ddb8;
    color: #f3a73f;
  }
}
</style>
