<template>
  <div class="book-list-container">
    <!-- <van-nav-bar title="微方志" class="nav-bar">
      <template #right>
        <van-icon name="search" size="20" />
      </template>
    </van-nav-bar> -->
    <el-header class="header">微方志</el-header>

    <!-- <van-row class="book-card-list">
      <van-col
        span="8"
        v-for="(book, index) in books"
        :key="book.book_id + index"
      >
        <div class="book-card" shadow="hover" @click="openBook(book)">
          <div class="book-cover"></div>
          <div class="book-name">{{ book.name }}</div>
        </div>
      </van-col>
    </van-row> -->
    <el-row :gutter="16" class="book-card-list">
      <el-col
        v-for="(book, index) in books"
        :key="book.book_id + index"
        :span="8"
        :lg="4"
      >
        <div class="book-card" shadow="hover" @click="openBook(book)">
          <div class="book-cover"></div>
          <div class="book-name">{{ book.name }}</div>
        </div>
      </el-col>
    </el-row>
  </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) {
  console.log(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: 50px 13%;
    .book-card {
      border-radius: 8px;
      cursor: pointer;
      transition: all ease 0.3s;
      &:hover {
        transform: translateY(-10px);
      }
      .book-cover {
        background-image: url(@/assets/images/default2.jpg);
        background-size: cover;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        font-family: 楷体;
        font-size: 20px;
        margin-bottom: 10px;
        width: 150px; /* 固定宽度 */
        height: 200px; /* 高度按比例计算（2:3） */
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding: 10px;
      }
    }
  }
}

@media (max-width: 768px) {
  .book-card-list {
    padding: 30px;
    .book-card {
      border-radius: 8px;

      .book-cover {
        background-color: rgba(65, 184, 131, 0.4);
        padding: 50px 10px;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        font-family: 楷体;
        font-size: 18px;
        margin-bottom: 10px;
        width: 150px; /* 固定宽度 */
        height: 150px; /* 高度按比例计算（2:3） */
      }
    }
  }
}
</style>
