<template>
  <view class="inline-flex items-center px-2 rounded text-xs font-medium StatusTag" :style="{ backgroundColor: bgColor, color: textColor, paddingTop: '2px', paddingBottom: '2px' }">
    {{ label }}
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import {
  getStatusText,
  getStatusColor,
  getStatusBgColor,
  getProjectStatusText,
  getProjectStatusColor,
  getProjectStatusBgColor
} from '@/utils'

type StatusTagType = 'task' | 'project'

const props = withDefaults(
  defineProps<{
    status: string
    type?: StatusTagType
    /** 自定义文本，传入后将覆盖 type 对应的默认文本 */
    label?: string
    /** 自定义颜色（十六进制），传入后将覆盖 type 对应的默认颜色 */
    color?: string
    /** 自定义背景色（十六进制），传入后将覆盖 type 对应的默认背景色 */
    bgColor?: string
  }>(),
  {
    type: 'task'
  }
)

const label = computed(() => {
  if (props.label) return props.label
  return props.type === 'project'
    ? getProjectStatusText(props.status)
    : getStatusText(props.status)
})

const textColor = computed(() => {
  if (props.color) return props.color
  return props.type === 'project' ? getProjectStatusColor(props.status) : getStatusColor(props.status)
})
const bgColor = computed(() => {
  if (props.bgColor) return props.bgColor
  return props.type === 'project' ? getProjectStatusBgColor(props.status) : getStatusBgColor(props.status)
})
</script>

<style scoped>
.StatusTag {
  min-width: 88rpx;
  padding: 0 10rpx;
  justify-content: center;
  white-space: nowrap;
}
</style>
