<template>
  <div class="book-list-container">
    <el-header class="header">微方志</el-header>

    <div class="book-card-list">
      <div
        class="book-card"
        v-for="(book, index) in books"
        shadow="hover"
        @click="openBook(book)"
      >
        <div class="book-cover"></div>
        <div class="book-name">{{ book.name }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import { getDocList } from "@/api/index";
import router from "@/router";
// 模拟接口返回数据类型
interface Book {
  book_id: string;
  name: string;
  upload_time: string;
  sort_order: number;
  publish_time: string;
  bookmarks: string;
  coverUrl?: string; // 实际开发可补充封面字段，这里模拟可选
}
const books = ref<Book[]>();
async function loadData() {
  const res = await getDocList();
  books.value = res;
}

function openBook(book) {
  const query = {
    title: book.name,
  };
  const path = `/detail/${book.book_id}`;
  localStorage.setItem(`bookmarks-${book.book_id}`, book.bookmarks);
  router.push({
    query,
    path,
  });
}
onMounted(() => {
  loadData();
});
</script>

<style lang="scss" scoped>
.header {
  background-color: #444;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.book-list-container {
  height: 100vh;
  background-image: url(@/assets/images/5.jpg);
  background-size: cover;
  .book-card-list {
    padding: 30px 8%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
    .book-card {
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
      }
      .book-cover {
        background-image: url(@/assets/images/default2.jpg);
        background-size: cover;
        aspect-ratio: 2/3;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: 楷体;
        font-size: 20px;
        margin-bottom: 10px;
      }
      .book-name {
        font-size: 16px;
        text-align: center;
        @media (min-width: 768px) {
          font-size: 18px;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .book-card-list {
    padding: 20px;
    // grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) ;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px;
  }
}
</style>
