<template>
  <div class="babys-container">
    <div class="header-section">
      <h2 class="page-title">宝贝管理</h2>
      <div class="header-actions">
        <el-button type="primary" @click="handleAdd">
          <i class="fa-solid fa-plus"></i>
          添加宝贝
        </el-button>
        <el-button @click="handleRefresh">
          <i class="fa-solid fa-refresh"></i>
          刷新
        </el-button>
      </div>
    </div>

    <el-divider></el-divider>

    <div v-loading="loading" class="babys-grid">
      <div v-for="baby in babyList" :key="baby.id" class="baby-card">
        <div class="baby-avatar">
          <img v-if="baby.avatar" :src="getEnvUrl(baby.avatar)" :alt="baby.name" />
          <div v-else class="avatar-placeholder">
            <i class="fa-solid fa-user"></i>
          </div>
        </div>

        <div class="baby-content">
          <div class="names">
            <h3 class="baby-name" :class="'sex-'+baby.sex">
              <i class="fa-solid fa-mars"></i> {{ baby.name }}
            </h3>
            <div class="birth">
                <el-tag><i class="fa-solid fa-cake-candles"></i> {{ formatDate(baby.birth) }}</el-tag>
            </div>
          </div>

          <div class="baby-info">
            <div class="info-left">
              <div class="info-item">
                <span><strong>父亲:</strong> {{ baby.father || '未绑定' }}</span>
              </div>
              <div class="info-item">
                <span><strong>母亲:</strong> {{ baby.mather || '未绑定' }}</span>
              </div>
            </div>
            <div class="info-right">
              <div class="info-item">
                <span><strong>身高:</strong> {{ baby.height || 0 }}cm</span>
              </div>
              <div class="info-item">
                <span><strong>体重:</strong> {{ baby.weight || 0 }}kg</span>
              </div>
            </div>
          </div>

          <div class="baby-footer">
            <el-tag :type="baby.status === 1 ? 'success' : 'info'" size="small">
              {{ baby.status === 1 ? '正常' : '禁用' }}
            </el-tag>
            <div class="baby-actions">
              <el-button size="small" type="primary" link @click="handleBindParents(baby)">
                <i class="fa-solid fa-link"></i>
              </el-button>
              <el-button size="small" type="primary" link @click="handleView(baby)">
                <i class="fa-solid fa-eye"></i>
              </el-button>
              <el-button size="small" type="primary" link @click="handleEdit(baby)">
                <i class="fa-solid fa-pen-to-square"></i>
              </el-button>
              <el-button size="small" type="danger" link @click="handleDelete(baby)">
                <i class="fa-solid fa-trash"></i>
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="babyList.length === 0 && !loading" class="empty-state">
      <el-empty description="暂无宝贝数据" :image-size="120" />
    </div>

    <!-- 编辑对话框 -->
    <BabyEdit
      v-model:visible="editDialogVisible"
      :editData="currentBaby"
      @success="handleEditSuccess"
    />

    <!-- 绑定父母对话框 -->
    <BindParents
      v-model:visible="bindParentsVisible"
      :babyData="currentBaby"
      @success="handleBindParentsSuccess"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import BabyEdit from './components/edit.vue';
import BindParents from './components/bindParents.vue';
import { getBabyList, deleteBaby } from '@/api/babyhealth';

interface Baby {
  id: number;
  name: string;
  nickname: string;
  sex: number;
  birth: string;
  height: number;
  weight: number;
  avatar: string;
  status: number;
  create_time: string;
}

const loading = ref(false);
const babyList = ref<Baby[]>([]);
const editDialogVisible = ref(false);
const bindParentsVisible = ref(false);
const currentBaby = ref<Baby | null>(null);

// 拼接接口路径
const getEnvUrl = (path: string) => {
  const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
  return `${API_BASE_URL}${path}`;
};

// 格式化日期
const formatDate = (date: string) => {
  if (!date) return '-';
  return date.substring(0, 10);
};

// 格式化性别
const formatGender = (gender: number) => {
  const map: Record<number, string> = {
    1: '男',
    2: '女'
  };
  return map[gender] || '未知';
};

// 刷新列表
const handleRefresh = () => {
  fetchBabyList();
};

// 添加宝贝
const handleAdd = () => {
  currentBaby.value = null;
  editDialogVisible.value = true;
};

// 查看详情
const handleView = (row: Baby) => {
  ElMessage.info('详情功能待实现');
};

// 编辑宝贝
const handleEdit = (row: Baby) => {
  currentBaby.value = row;
  editDialogVisible.value = true;
};

// 删除宝贝
const handleDelete = (row: Baby) => {
  ElMessageBox.confirm(`确定要删除宝贝「${row.name}」吗？删除后不可恢复。`, '警告', {
    type: 'warning'
  })
    .then(async () => {
      try {
        loading.value = true;
        const res = await deleteBaby(row.id);
        if (res.code === 200) {
          ElMessage.success('删除成功');
          fetchBabyList();
        } else {
          ElMessage.error(res.msg || '删除失败');
        }
      } catch (error) {
        console.error('删除失败:', error);
        ElMessage.error('删除失败');
      } finally {
        loading.value = false;
      }
    })
    .catch(() => {});
};

// 绑定父母
const handleBindParents = (row: Baby) => {
  currentBaby.value = row;
  bindParentsVisible.value = true;
};

// 编辑/添加成功回调
const handleEditSuccess = () => {
  fetchBabyList();
};

// 绑定父母成功回调
const handleBindParentsSuccess = () => {
  fetchBabyList();
};

// 获取宝贝列表
const fetchBabyList = async () => {
  loading.value = true;
  try {
    const res = await getBabyList();
    // console.log('获取宝贝列表响应:', res);
    if (res.code === 200) {
      babyList.value = res.data || [];
    } else {
      ElMessage.error(res.msg || '获取宝贝列表失败');
    }
  } catch (error) {
    console.error('获取宝贝列表失败:', error);
    ElMessage.error('获取宝贝列表失败');
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  fetchBabyList();
});
</script>

<style scoped lang="less">
.babys-container {
  background: var(--el-bg-color);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid var(--el-border-color-lighter);
  min-height: 100vh;

  .header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;

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

    .header-actions {
      display: flex;
      gap: 12px;
    }
  }

  .babys-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;

    .baby-card {
      background: var(--el-bg-color);
      border-radius: 12px;
      border: 1px solid var(--el-border-color-lighter);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      transition: all 0.3s;
      overflow: hidden;

      &:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        transform: translateY(-4px);
        border-color: var(--el-color-primary-light-7);
      }

      .baby-avatar {
        width: 100%;
        height: 200px;
        background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .avatar-placeholder {
          width: 80px;
          height: 80px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.5);
          display: flex;
          align-items: center;
          justify-content: center;

          .fa-solid {
            font-size: 40px;
            color: var(--el-color-primary);
          }
        }
      }

      .baby-content {
        padding: 20px;

        .names{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        .baby-name {
          font-size: 20px;
          font-weight: 600;
        //   color: var(--el-text-color-primary);
          line-height: 1.4;
        }
        .baby-nickname {
          display: flex;
          align-items: center;
          margin: 0 0 16px 0;
          font-size: 14px;
          color: var(--el-text-color-regular);
          line-height: 1.6;
        }

        .baby-info {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          margin-bottom: 16px;

          .info-left,
          .info-right {
            display: flex;
            flex-direction: column;
            gap: 10px;
            flex: 1;
          }

          .info-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: var(--el-text-color-regular);

            .fa-solid {
              font-size: 16px;
              color: var(--el-color-primary);
            }
          }
        }

        .baby-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-top: 16px;
          border-top: 1px solid var(--el-border-color-lighter);

          .baby-actions {
            display: flex;
            gap: 8px;
          }
        }
      }
    }
  }

  .empty-state {
    padding: 80px 20px;
    text-align: center;
  }

  .sex-0,.sex-1,.sex-2{

  }

  .sex-0{
    
  }
  .sex-1{
    
    color: #409eff;
  }
  .sex-2{
    color: #ff69b4;
  }
}
</style>
