<template>
  <div class="book-list-container">
    <el-row :gutter="16" class="book-card-list">
      <el-col
        v-for="(book, index) in books"
        :key="book.book_id + index"
        :span="8"
      >
        <div class="book-card" shadow="hover" @click="openBook(book)">
          <!-- 这里可根据实际书籍封面逻辑替换，示例用纯色背景占位 -->
          <div class="book-cover">{{ book.name }}</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 = {
    bookmarks: book.bookmarks,
  };
  const path = `/detail/${book.book_id}`;
  router.push({
    query,
    path,
  });
}
onMounted(() => {
  loadData();
});
</script>

<style scoped lang="scss">
.book-list-container {
  height: 100vh;
  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;
    }
  }
}
</style>
