<script setup lang="ts">
defineProps<{
  statusName: string
}>()

function getStatusClass(statusName: string) {
  switch (statusName) {
    case '新工单':
      return 'status-new'
    case '待处理':
      return 'status-pending'
    case '已完结':
      return 'status-completed'
    default:
      return 'status-default'
  }
}
</script>

<template>
  <view :class="['status-tag', getStatusClass(statusName)]">
    {{ statusName }}
  </view>
</template>

<style scoped>
.status-tag {
  padding: 4rpx 12rpx;
  border-radius: 16rpx;
  font-size: 24rpx;
}

.status-new {
  background-color: #E8F5E9;
  color: #4CAF50;
}

.status-pending {
  background-color: #FEF4EB;
  color: #FF9500;
}

.status-completed {
  background-color: #F0F7FF;
  color: #3498DB;
}

.status-default {
  background-color: #F5F5F5;
  color: #666;
}
</style>