<template>
  <div class="choose-book-page content-bg">
    <div class="modify-top"></div>
    <div class="belong-school" v-if="kg_id">
      <van-row align="center" justify="center" style="position: relative; top: 50%; transform: translateY(-50%);">
        <van-col span="2">
          <van-image v-if="kgInfo.logo" round width="3rem" height="3rem" lazy-load :src="kgInfo.logo"
            style="vertical-align: text-bottom;">
            <template v-slot:error>加载失败</template>
          </van-image>
          <van-image v-else round width="3rem" height="3rem" lazy-load :src="icon_avatar"
            style="vertical-align: text-bottom;">
            <template v-slot:error>加载失败</template>
          </van-image>
        </van-col>
        <van-col span="22">
          <p class="title">{{ kgInfo.name }}</p>
        </van-col>
      </van-row>
    </div>
    <div v-else style="height: 2.5rem;"></div>
    <div style="position: relative;">
      <div class="ding left"></div>
      <div style="position: relative; z-index: 100;">
        <van-row>
          <van-col span="4"></van-col>
          <van-col span="16">
            <my-button type="custom" :custom-style="styleObject3">幼儿园爱心书籍</my-button>
          </van-col>
          <van-col span="4"></van-col>
        </van-row>
      </div>
      <div class="ding right"></div>
    </div>
    <div class="book-list">
      <template v-for="(item, key) in kgInfo.book_list" :key="key">
        <book-card type="C" :item="item" @on-click="go('/client/bookDetail', { id: item.id })"></book-card>
      </template>
      <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无书籍信息" />
    </div>
    <div style="height: 1rem;"></div>
    <shortcut-fixed type="C" :item="shortcutItem"></shortcut-fixed>
  </div>
</template>

<script setup>
import { _ } from '@/utils/generatePackage'
import { no_image, icon_avatar } from '@/utils/generateIcons'
import { MyButton, ShortcutFixed, BookCard } from '@/utils/generateModules'
import { styleObject3 } from '@/settings/designSetting.js'
import { useBookList, useShortcutBar } from '@/composables';
import { useGo } from '@/hooks/useGo'
import { killPages, store } from '@/hooks/useKeepAlive'

const go = useGo()

// 删除所有的 keep-alive 缓存
killPages();
// 清空记录位置
store.changeScrollTop(0);

const { kg_id, kgInfo, emptyStatus } = useBookList();
const { shortcutItem } = useShortcutBar(); // 配置快捷跳转条
</script>

<style lang="less" scoped>
@import url('@css/content-bg.less');

:global(.custom-image .van-empty__image) {
  // margin-top: 15vh;
  width: 10rem;
  height: 10rem;
}

.choose-book-page {
  .belong-school {
    padding: 1.5rem;
    height: 3rem;

    .title {
      color: #222222;
      display: inline-block;
      vertical-align: super;
      margin-left: 2rem;
    }

  }

  .book-list {
    margin: 1rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.13);
  }

  .ding {
    z-index: 69;
    position: absolute;
    top: 2.5rem;
    width: 1rem;
    height: 3rem;
    background-image: url('@images/ding-left@2x.png');
    background-size: contain;
    background-repeat: no-repeat;

    &.left {
      left: 8rem;
    }

    &.right {
      right: 8rem;
    }
  }
}
</style>