<!--
 * @Date: 2024-12-03 10:35:15
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-12-03 15:15:45
 * @FilePath: /tswj/src/views/client/searchPage.vue
 * @Description: 文件描述
-->
<template>
  <div class="search-page">
    <div style="background-color: #F7F7F7; height: auto; padding: 1rem;">
      <div style="background-color: #FFF; border-radius: 1rem; padding: 0.5rem 1rem; display: flex; align-items: center; justify-content: space-between;">
        <input type="text" v-model="performer_name" placeholder="请输入要搜索的表演者姓名" @blur="onSearch" style="border: 0; width: 100%;">
        <van-icon name="search" />
      </div>
    </div>
    <div class="book-video-list">
      <!-- <van-list ref="listRef" v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''"
        @load="onLoad" :immediate-check="immediateCheck"> -->
        <template v-for="item in search_prod_list" :key="item">
          <video-card :item="item">
            <template #bookDetailSub>
              <div style="color: #999999; padding: 0px 1rem 0.5rem;" @click="setComment(item)">
                {{ item.kg_name }} ｜ {{ item.localism_type }}
              </div>
            </template>
          </video-card>
        </template>
      <!-- </van-list> -->
    </div>
    <div style="height: 2rem;" />
    <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无作品信息" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { Cookies, $, _, axios, storeToRefs, mainStore, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
import { no_image } from '@/utils/generateIcons.js'
//import { } from '@/composables'
import { VideoCard } from '@/utils/generateModules'
import { prodListAPI } from '@/api/C/book'
import { killPages, store } from '@/hooks/useKeepAlive';

killPages()
const $route = useRoute();
const $router = useRouter();
console.warn($route.meta.title);
useTitle($route.meta.title);

const search_prod_list = ref([]);
const limit = ref(10)
const offset = ref(0)

// 处理书籍下作品列表
const loading = ref(false);
const finished = ref(false);
const immediateCheck = ref(false);

// 因为不能让空图标提前出来的写法
const finishedTextStatus = ref(false);
const emptyStatus = ref(false);

const book_id = $route.query.book_id;
const kg_id = $route.query.kg_id;


// 定义一个变量来表示是否滚动到底部
const isBottom = ref(false);

// 标记是否是第一次进入页面
const isFirstMount = ref(true);

// 滚动事件处理函数，这里添加了触发回调的逻辑
const handleScroll = () => {
  const scrollTop = window.scrollY; // 当前滚动距离
  const clientHeight = document.documentElement.clientHeight; // 视口高度
  const scrollHeight = document.documentElement.scrollHeight; // 页面总高度

  if (scrollTop + clientHeight >= scrollHeight) {
    // 在这里触发你的回调逻辑
    if (performer_name.value) {
      onLoad()
    }
  }
};

// 在组件挂载时添加滚动事件监听，并将第一次进入页面的标记设为false
onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

// 在组件卸载时移除滚动事件监听
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});

const performer_name = ref('');

/**
 * 向下滚动查询数据
 */
const onLoad = async () => {
  // 异步更新数据
  const { data, code } = await prodListAPI({ book_id, kg_id, limit: limit.value, offset: offset.value, performer_name: performer_name.value })
  if (code === 1) {
    search_prod_list.value = _.concat(search_prod_list.value, data.prod_list);
    search_prod_list.value = _.uniqBy(search_prod_list.value, 'id');
    offset.value = search_prod_list.value.length;
    loading.value = false;
    // 数据全部加载完成
    if (!data.prod_list.length) {
      // 加载状态结束
      finished.value = true;
    }
    // 空数据提示
    if (!search_prod_list.value.length) {
      finishedTextStatus.value = false;
    }
    emptyStatus.value = Object.is(search_prod_list.value.length, 0);
  }
};

const onSearch = async() => {
  offset.value = 0
  search_prod_list.value = []
  loading.value = true;
  finished.value = false;
  onLoad()
}

</script>

<style lang="less" scoped>

.bottom-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.07);
  z-index: 9999;

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