<template>
  <div class="choose-book-page content-bg">
    <div class="modify-top" />
    <!-- <div v-if="kg_id" :class="[kgInfo.multi_name ? 'height6rem' : 'height3rem', 'belong-school']"> -->
    <div v-if="kg_id" :class="[kgInfo.multi_name ? 'height3rem' : 'height3rem', 'belong-school']">
      <van-row align="center" justify="center" style="position: relative; top: 50%; transform: translateY(-50%)">
        <van-col span="2">
          <van-image round width="3rem" height="3rem" :src="kgInfo.logo ? kgInfo.logo : icon_logo"
            style="vertical-align: text-bottom" />
        </van-col>
        <van-col span="22">
          <div v-if="kgInfo.multi_name" class="title">
            <!-- 名字中间带空格，需要分割成两个名字 -->
            <p>{{ kgInfo.multi_name[0] }}</p>
            <p>{{ kgInfo.multi_name[1] }}</p>
          </div>
          <div v-else class="title">
            <p>{{ kgInfo.name }}</p>
          </div>
        </van-col>
      </van-row>
    </div>
    <div v-else style="height: 2.5rem" />
    <div style="position: relative">
      <div class="ding left" />
      <div style="position: relative; z-index: 100">
        <van-row>
          <van-col span="4" />
          <van-col span="16">
            <my-button type="custom" :custom-style="styleObject3">
              幼儿园爱心书籍
            </my-button>
          </van-col>
          <van-col span="4" />
        </van-row>
      </div>
      <div class="ding right" />
    </div>
    <div class="book-list">
      <!-- NOTICE: 新增搜索功能，需要时放出 -->
      <!-- <van-sticky>
        <van-search v-model="search_value" placeholder="请输入书籍名称" @search="onSearch" />
      </van-sticky> -->
      <template v-for="(item, key) in kgInfo.book_list" :key="key">
        <book-card v-if="item.show" :type="USER_ROLE.CLIENT" :item="item"
          @on-click="go('/client/bookDetail', { id: item.id, kg_id: $route.query.kg_id })" />
      </template>
      <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无书籍信息" />
    </div>
    <div style="height: 5rem" />
    <donate-bar :kg-id="kg_id">为幼儿园助力</donate-bar>
    <shortcut-fixed :type="USER_ROLE.CLIENT" :item="shortcutItem" :custom-style="customStyle" />
  </div>
</template>

<script setup>
import { no_image, icon_logo } from '@/utils/generateIcons';
import { MyButton, ShortcutFixed, BookCard } from '@/utils/generateModules';
import { styleObject3 } from '@/settings/designSetting.js';
import { useBookList } from '@/composables';
import { useGo } from '@/hooks/useGo';
import { killPages, store } from '@/hooks/useKeepAlive';
import { Cookies } from '@/utils/generatePackage.js'
import { DonateBar } from '@/utils/generateModules.js'
import { ref, watch } from 'vue'
import { USER_ROLE } from '@/constant'
import { sharePage } from '@/composables/useShare.js'

const $route = useRoute();
const go = useGo();
// 删除所有的 keep-alive 缓存
killPages();
// 清空记录位置
store.changeScrollTop(0);

const { kg_id, kgInfo, emptyStatus } = useBookList();

// 配置快捷访问
const shortcutItem = ref([])
const isClient = Cookies.get('userType') === 'client' ? true : false; // 判断C端入口位置，访客/客户
if (isClient) {
  shortcutItem.value = ['home', 'me', 'rank']
} else {
  shortcutItem.value = ['me']
}
const customStyle = {
  bottom: '8rem'
}

/********************* 搜索功能栏 **********************/
const search_value = ref('')
const onSearch = () => { // 前端过滤搜索结果
  kgInfo.value.book_list.forEach(item => {
    if (item.name.indexOf(search_value.value) === -1) {
      item.show = false;
    }
  });
}
watch(
  search_value,
  (v) => {
    if (!v) {
      kgInfo.value.book_list.forEach(item => {
        item.show = true;
      });
    }
  }
)
/**************************************************/

setTimeout(() => {
  // TAG：微信分享
  if (isClient) {
    // 自定义分享内容
    const title = kgInfo.value.multi_name ? `${kgInfo.value.multi_name[0]} ${kgInfo.value.multi_name[1]}` : kgInfo.value.name
    sharePage({ title, imgUrl: kgInfo.value.logo });
  } else {
    sharePage({});
  }
}, 500)
</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;

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

  .height3rem {
    height: 3rem;
  }

  .height6rem {
    height: 6rem;
  }

  .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-image: url('http://gyzs.onwall.cn/ding-left%402x.png');
    background-size: contain;
    background-repeat: no-repeat;

    &.left {
      left: 8rem;
    }

    &.right {
      right: 8rem;
    }
  }

  .fix-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;

    .text {
      text-align: center;
      padding: 0.7rem;
      margin: 0.8rem;
      font-size: 1rem;
      font-weight: bold;
      border-radius: 24px;
      // border: 1px solid F7F7F7;
      color: #713610;
      background-color: @base-color;
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
    }
  }
}
</style>