<template>
  <a-modal
    v-model:open="visible"
    title="动物详情"
    width="800px"
    :footer="null"
    @cancel="handleClose"
  >
    <div v-if="animal" class="animal-detail">
      <!-- 基本信息 -->
      <a-card title="基本信息" class="mb-4">
        <a-row :gutter="16">
          <a-col :span="6">
            <div class="animal-avatar">
              <a-avatar
                :src="animal.avatar"
                :alt="animal.name"
                :size="120"
                shape="square"
              >
                {{ animal.name?.charAt(0) }}
              </a-avatar>
            </div>
          </a-col>
          <a-col :span="18">
            <a-row :gutter="16">
              <a-col :span="8">
                <div class="detail-item">
                  <label>动物ID:</label>
                  <span>{{ animal.id }}</span>
                </div>
              </a-col>
              <a-col :span="8">
                <div class="detail-item">
                  <label>名称:</label>
                  <span>{{ animal.name }}</span>
                </div>
              </a-col>
              <a-col :span="8">
                <div class="detail-item">
                  <label>类型:</label>
                  <a-tag color="blue">{{ animal.type }}</a-tag>
                </div>
              </a-col>
              <a-col :span="8">
                <div class="detail-item">
                  <label>品种:</label>
                  <span>{{ animal.breed }}</span>
                </div>
              </a-col>
              <a-col :span="8">
                <div class="detail-item">
                  <label>年龄:</label>
                  <span>{{ animal.age }}岁</span>
                </div>
              </a-col>
              <a-col :span="8">
                <div class="detail-item">
                  <label>性别:</label>
                  <span>{{ animal.gender }}</span>
                </div>
              </a-col>
              <a-col :span="8">
                <div class="detail-item">
                  <label>颜色:</label>
                  <span>{{ animal.color }}</span>
                </div>
              </a-col>
              <a-col :span="8">
                <div class="detail-item">
                  <label>状态:</label>
                  <a-tag :color="getStatusColor(animal.status)">
                    {{ getStatusText(animal.status) }}
                  </a-tag>
                </div>
              </a-col>
              <a-col :span="8">
                <div class="detail-item">
                  <label>健康状态:</label>
                  <span>{{ animal.health_status }}</span>
                </div>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-card>

      <!-- 详细描述 -->
      <a-card title="详细描述" class="mb-4">
        <p>{{ animal.description || '暂无描述' }}</p>
      </a-card>

      <!-- 位置信息 -->
      <a-card title="位置信息" class="mb-4">
        <div class="detail-item">
          <label>当前位置:</label>
          <span>{{ animal.location }}</span>
        </div>
      </a-card>

      <!-- 时间信息 -->
      <a-card title="时间信息">
        <a-row :gutter="16">
          <a-col :span="8">
            <div class="detail-item">
              <label>创建时间:</label>
              <span>{{ formatDate(animal.createdAt) }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="detail-item">
              <label>更新时间:</label>
              <span>{{ formatDate(animal.updatedAt) }}</span>
            </div>
          </a-col>
        </a-row>
      </a-card>
    </div>
  </a-modal>
</template>

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

interface Animal {
  id: number
  name: string
  type: string
  breed: string
  age: number
  gender: string
  color: string
  avatar: string
  description: string
  status: 'available' | 'adopted' | 'unavailable'
  health_status: string
  location: string
  createdAt: string
  updatedAt: string
  [key: string]: any
}

interface Props {
  animal: Animal | null
  visible: boolean
}

interface Emits {
  (e: 'update:visible', value: boolean): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const visible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 格式化日期
const formatDate = (dateStr: string) => {
  return new Date(dateStr).toLocaleString('zh-CN')
}

// 获取状态颜色
const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    available: 'green',
    adopted: 'blue',
    unavailable: 'red'
  }
  return colorMap[status] || 'default'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    available: '可领养',
    adopted: '已领养',
    unavailable: '不可领养'
  }
  return textMap[status] || status
}

// 关闭弹窗
const handleClose = () => {
  visible.value = false
}
</script>

<style scoped>
.animal-detail {
  .animal-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  
  .detail-item {
    margin-bottom: 12px;
    
    label {
      display: inline-block;
      width: 80px;
      color: #666;
      font-weight: 500;
    }
    
    span {
      color: #333;
    }
  }
  
  .mb-4 {
    margin-bottom: 16px;
  }
}
</style>