<template>
  <div class="book-video-list">
    <template v-for="item in prodList" :key="item" style="height: 3rem;">
      <video-card :item="item"></video-card>
    </template>
    <div style="height: 2rem;"></div>
  </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使用
    })
  }
});
</script>

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