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

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