<template>
  <a-modal
    v-model:open="visible"
    title="用户详情"
    width="800px"
    :footer="null"
    @cancel="handleClose"
  >
    <div v-if="user" class="user-detail">
      <!-- 基本信息 -->
      <a-card title="基本信息" class="mb-4">
        <a-row :gutter="16">
          <a-col :span="8">
            <div class="detail-item">
              <label>用户ID:</label>
              <span>{{ user.id }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="detail-item">
              <label>用户名:</label>
              <span>{{ user.username }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="detail-item">
              <label>昵称:</label>
              <span>{{ user.nickname || '-' }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="detail-item">
              <label>邮箱:</label>
              <span>{{ user.email || '-' }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="detail-item">
              <label>手机号:</label>
              <span>{{ user.phone || '-' }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="detail-item">
              <label>状态:</label>
              <a-tag :color="getStatusColor(user.status)">
                {{ getStatusText(user.status) }}
              </a-tag>
            </div>
          </a-col>
        </a-row>
      </a-card>

      <!-- 统计信息 -->
      <a-card title="统计信息" class="mb-4">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-statistic title="积分" :value="user.points" />
          </a-col>
          <a-col :span="6">
            <a-statistic title="等级" :value="user.level" />
          </a-col>
          <a-col :span="6">
            <a-statistic title="余额" :value="user.balance" prefix="¥" />
          </a-col>
          <a-col :span="6">
            <a-statistic title="旅行次数" :value="user.travel_count" />
          </a-col>
        </a-row>
      </a-card>

      <!-- 时间信息 -->
      <a-card title="时间信息">
        <a-row :gutter="16">
          <a-col :span="8">
            <div class="detail-item">
              <label>注册时间:</label>
              <span>{{ formatDate(user.created_at) }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="detail-item">
              <label>更新时间:</label>
              <span>{{ formatDate(user.updated_at) }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="detail-item">
              <label>最后登录:</label>
              <span>{{ user.last_login_at ? formatDate(user.last_login_at) : '-' }}</span>
            </div>
          </a-col>
        </a-row>
      </a-card>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { User } from '@/api/user'

interface Props {
  user: User | 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> = {
    active: 'green',
    inactive: 'red',
    pending: 'orange'
  }
  return colorMap[status] || 'default'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    active: '正常',
    inactive: '禁用',
    pending: '待审核'
  }
  return textMap[status] || status
}

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

<style scoped>
.user-detail {
  .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>