<!--
 * @Author: hookehuyr hookehuyr@gmail.com
 * @Date: 2022-04-28 11:38:10
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-09-05 14:18:48
 * @FilePath: /tswj/src/views/me/collection.vue
 * @Description:
-->
<template>
  <div class="book-video-list">
    <!-- <template v-for="item in prodList" :key="item">
      <video-card :item="item" />
    </template> -->
    <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''"
      @load="onLoad">
      <template v-for="item in prodList" :key="item">
        <video-card :item="item" />
      </template>
    </van-list>
    <div style="height: 2rem;" />
  </div>
  <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无收藏" />
</template>

<script setup>
import VideoCard from '@/components/VideoCard/index.vue'
import no_image from '@images/que-shuju@2x.png'
import { onBeforeRouteLeave } from 'vue-router'
import { ref, onMounted } from 'vue'
import _ from 'lodash'
import { useScrollTop } from '@/composables';
import { myFavorAPI } from '@/api/C/me.js'

const { resetScrollTop, store } = useScrollTop(); // 页面滚动恢复
resetScrollTop('scrollTopCollection');

onBeforeRouteLeave(() => {
  // 监听记录滚动位置
  store.changeScrollTopCollection(window.scrollY)
});

// 处理书籍下作品列表
const prodList = ref([])
// 因为不能让空图标提前出来的写法
const emptyStatus = ref(false);

// onMounted(async () => {
//   // 获取收藏列表
//   const { data } = await myFavorAPI();
//   if (!data.prod.length) {
//     emptyStatus.value = true;
//   } else {
//     prodList.value = data.prod;
//     _.each(prodList.value, (item) => {
//       item.type = 'read-only'; // 特殊标识，判断入口 为keepAlive使用
//     })
//     emptyStatus.value = false;
//   }
// });
const limit = ref(100)
const offset = ref(0)

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

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

/**
 * 向下滚动查询数据
 */
const onLoad = async () => {
  // 异步更新数据
  const { data, code } = await myFavorAPI({ limit: limit.value, offset: offset.value })
  if (code === 1) {
    _.each(data.prod, (item) => {
      item.type = 'read-only' // 特殊标识，判断入口 为keepAlive使用
    })
    prodList.value = _.concat(prodList.value, data.prod);
    prodList.value = _.uniqBy(prodList.value, 'id');
    offset.value = prodList.value.length;
    loading.value = false;
    // 数据全部加载完成
    if (prodList.value.length === data.favor_num) {
      // 加载状态结束
      finished.value = true;
    }
    // 空数据提示
    if (!prodList.value.length) {
      finishedTextStatus.value = false;
    }
    emptyStatus.value = Object.is(prodList.value.length, 0);
  }
};
</script>

<style lang="less" scoped>
</style>