<template>
  <div class="works-page">
    <div class="page-header">
      <h2>我的作品</h2>
    </div>

    <div v-if="loading" class="loading-wrap"><a-spin /></div>

    <div v-else-if="list.length === 0" class="empty-wrap">
      <a-empty description="还没有提交过作品" />
    </div>

    <div v-else class="works-grid">
      <div v-for="item in list" :key="item.id" class="work-card">
        <div class="work-cover">
          <img v-if="item.coverUrl" :src="item.coverUrl" />
          <div v-else class="cover-placeholder">
            <picture-outlined style="font-size: 32px" />
          </div>
        </div>
        <div class="work-body">
          <h3>{{ item.title || '未命名作品' }}</h3>
          <p class="work-contest">{{ item.contest?.contestName }}</p>
          <div class="work-meta">
            <span v-if="item.registration?.participantType === 'child'">
              创作者：{{ item.registration?.child?.name }}
            </span>
            <span class="work-time">{{ formatDate(item.createTime) }}</span>
          </div>
        </div>
      </div>
    </div>

    <div v-if="total > pageSize" class="pagination-wrap">
      <a-pagination v-model:current="page" :total="total" :page-size="pageSize" size="small" @change="fetchList" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { PictureOutlined } from '@ant-design/icons-vue'
import { publicMineApi } from '@/api/public'
import dayjs from 'dayjs'

const list = ref<any[]>([])
const loading = ref(true)
const page = ref(1)
const pageSize = ref(12)
const total = ref(0)

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

const fetchList = async () => {
  loading.value = true
  try {
    const res = await publicMineApi.works({ page: page.value, pageSize: pageSize.value })
    list.value = res.list
    total.value = res.total
  } catch { /* */ } finally {
    loading.value = false
  }
}

onMounted(fetchList)
</script>

<style scoped lang="scss">
$primary: #6366f1;

.works-page { max-width: 800px; margin: 0 auto; }

.page-header {
  margin-bottom: 20px;
  h2 { font-size: 20px; font-weight: 700; color: #1e1b4b; margin: 0; }
}

.loading-wrap, .empty-wrap { padding: 60px 0; display: flex; justify-content: center; }

.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.work-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba($primary, 0.06);
  transition: all 0.2s;

  &:hover { box-shadow: 0 4px 16px rgba($primary, 0.08); transform: translateY(-2px); }

  .work-cover {
    height: 140px; overflow: hidden;
    img { width: 100%; height: 100%; object-fit: cover; }
    .cover-placeholder {
      width: 100%; height: 100%;
      background: #f5f3ff;
      display: flex; align-items: center; justify-content: center;
      color: #c7d2fe;
    }
  }

  .work-body {
    padding: 14px 16px;
    h3 { font-size: 14px; font-weight: 600; color: #1e1b4b; margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .work-contest { font-size: 12px; color: #9ca3af; margin: 0 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .work-meta {
      display: flex; justify-content: space-between; align-items: center;
      span { font-size: 11px; color: #9ca3af; }
    }
  }
}

.pagination-wrap { display: flex; justify-content: center; margin-top: 24px; }

@media (max-width: 640px) {
  .works-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .work-card .work-cover { height: 110px; }
}
</style>
