<template>
  <div class="detail-card">
    <div class="card-header">
      <h3 class="card-title">详细资料</h3>
      <el-button type="primary" :icon="Edit" size="small" @click="$emit('edit')">
        编辑
      </el-button>
    </div>
    <el-descriptions :column="2" border>
      <el-descriptions-item label="姓名">
        {{ userInfo?.name || "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="性别">
        {{ getSexText(userInfo?.sex) }}
      </el-descriptions-item>
      <el-descriptions-item label="生日">
        {{ userInfo?.birth || "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag :type="userInfo?.status === 1 ? 'success' : 'danger'" size="small">
          {{ userInfo?.status === 1 ? "正常" : "禁用" }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="注册时间" :span="2">
        {{ formatDate(userInfo?.create_time) }}
      </el-descriptions-item>
      <el-descriptions-item label="最后登录IP" :span="2">
        {{ userInfo?.last_login_ip || "-" }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup>
import { Edit } from "@element-plus/icons-vue";

defineProps({
  userInfo: {
    type: Object,
    default: null
  },
  formatDate: {
    type: Function,
    required: true
  },
  getSexText: {
    type: Function,
    required: true
  }
});

defineEmits(["edit"]);
</script>

<style scoped lang="less">
.detail-card {
  background: var(--el-bg-color);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
  border: 1px solid var(--el-border-color-lighter);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s;

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--el-border-color-lighter);

  .card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--el-text-color-primary);
  }
}

@media (max-width: 768px) {
  .detail-card {
    padding: 16px;
  }
}
</style>
