<template>
  <div class="growth-record-view">
    <div class="page-header">
      <h2><FileImageOutlined /> 成长档案</h2>
      <p class="page-desc">记录孩子成长的每一个精彩瞬间</p>
    </div>

    <a-spin :spinning="loading">
      <div class="growth-grid" v-if="records.length > 0">
        <div v-for="record in records" :key="record.id" class="growth-card">
          <div class="card-image" v-if="record.images && record.images.length > 0">
            <img :src="record.images[0]" alt="成长照片" />
            <div class="image-count" v-if="record.images.length > 1">
              <PictureOutlined /> {{ record.images.length }}
            </div>
          </div>
          <div class="card-image placeholder" v-else>
            <FileImageOutlined />
          </div>

          <div class="card-content">
            <h3>{{ record.title }}</h3>
            <p v-if="record.content">{{ record.content }}</p>
            <div class="card-meta">
              <span><CalendarOutlined /> {{ formatDate(record.recordDate) }}</span>
              <span v-if="record.class">
                <TeamOutlined /> {{ record.class.name }}
              </span>
            </div>
          </div>
        </div>
      </div>

      <div class="empty-state" v-else>
        <InboxOutlined class="empty-icon" />
        <p>暂无成长记录</p>
      </div>
    </a-spin>

    <div class="pagination-section" v-if="total > pageSize">
      <a-pagination
        v-model:current="currentPage"
        :total="total"
        :page-size="pageSize"
        @change="onPageChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import {
  FileImageOutlined,
  PictureOutlined,
  CalendarOutlined,
  TeamOutlined,
  InboxOutlined,
} from '@ant-design/icons-vue';
import { getChildGrowthRecords, getChildren, type GrowthRecord } from '@/api/parent';
import dayjs from 'dayjs';

const route = useRoute();
const router = useRouter();
const loading = ref(false);
const records = ref<GrowthRecord[]>([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(12);
const currentChildId = ref<number | null>(null);

const formatDate = (date: string) => dayjs(date).format('YYYY-MM-DD');

const onPageChange = (page: number) => {
  currentPage.value = page;
  loadRecords();
};

const loadRecords = async () => {
  loading.value = true;
  try {
    let childId = route.query.childId ? Number(route.query.childId) : null;

    // 如果没有指定childId，自动获取第一个孩子
    if (!childId) {
      const children = await getChildren();
      if (children && children.length > 0) {
        childId = children[0].id;
        router.replace({ query: { childId: String(childId) } });
      } else {
        loading.value = false;
        return;
      }
    }

    currentChildId.value = childId;

    const data = await getChildGrowthRecords(childId, {
      page: currentPage.value,
      pageSize: pageSize.value,
    });
    records.value = data.items;
    total.value = data.total;
  } catch (error: any) {
    message.error(error.response?.data?.message || '加载数据失败');
  } finally {
    loading.value = false;
  }
};

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

<style scoped lang="scss">
$primary-color: #52c41a;
$primary-light: #f6ffed;

.growth-record-view {
  .page-header {
    margin-bottom: 24px;

    h2 {
      margin: 0 0 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .page-desc {
      margin: 0;
      color: #999;
    }
  }

  .growth-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
  }

  .growth-card {
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s;

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

    &:active {
      transform: scale(0.98);
    }

    .card-image {
      position: relative;
      height: 180px;
      background: #fafafa;

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

      .image-count {
        position: absolute;
        bottom: 8px;
        right: 8px;
        background: rgba(0, 0, 0, 0.6);
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        display: flex;
        align-items: center;
        gap: 4px;
      }

      &.placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 48px;
        color: #d9d9d9;
      }
    }

    .card-content {
      padding: 16px;

      h3 {
        margin: 0 0 8px;
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      p {
        margin: 0 0 12px;
        font-size: 14px;
        color: #666;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .card-meta {
        display: flex;
        gap: 16px;
        font-size: 12px;
        color: #999;

        span {
          display: flex;
          align-items: center;
          gap: 4px;
        }
      }
    }
  }

  .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #999;

    .empty-icon {
      font-size: 64px;
      color: #d9d9d9;
    }
  }

  .pagination-section {
    margin-top: 24px;
    text-align: center;
  }
}

// =============== 移动端响应式 ===============
@media screen and (max-width: 768px) {
  .growth-record-view {
    .page-header {
      margin-bottom: 16px;

      h2 {
        font-size: 18px;
      }

      .page-desc {
        font-size: 13px;
      }
    }

    .growth-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .growth-card {
      border-radius: 10px;

      .card-image {
        height: 120px;

        .image-count {
          padding: 2px 6px;
          font-size: 11px;
          bottom: 6px;
          right: 6px;
        }

        &.placeholder {
          font-size: 32px;
        }
      }

      .card-content {
        padding: 12px;

        h3 {
          font-size: 14px;
          margin-bottom: 6px;
        }

        p {
          font-size: 12px;
          margin-bottom: 8px;
          -webkit-line-clamp: 2;
        }

        .card-meta {
          flex-direction: column;
          gap: 4px;
          font-size: 11px;
        }
      }
    }

    .empty-state {
      padding: 40px 16px;

      .empty-icon {
        font-size: 48px;
      }
    }

    .pagination-section {
      margin-top: 16px;
    }
  }
}

// 平板适配
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .growth-record-view {
    .growth-grid {
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
  }
}
</style>
