<!--
 * @Date: 2022-04-28 18:38:16
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-06-24 17:51:58
 * @FilePath: /tswj/src/views/me/unwatchList.vue
 * @Description: 文件描述
-->
<template>
  <div class="unwatch-list-page">
    <div class="book-video-list">
      <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''" @load="onLoad">
        <template v-for="item in prod_list" :key="item">
          <video-card v-if="prod_list.length" :item="item" />
        </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 { storeToRefs } from 'pinia'
import no_image from '@images/que-shuju@2x.png'
import { useUnwatchList } from '@/composables/useUnwatchList.js'
import VideoCard from '@/components/VideoCard/index.vue'
import { ref, onActivated } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
import $ from 'jquery'
import _ from 'lodash';
import { addPages, store } from '@/hooks/useKeepAlive'
import { useScrollTop } from '@/composables';

const { onLoad, prod_list, finished, loading, finishedTextStatus, emptyStatus } = useUnwatchList();

const { resetScrollTop } = useScrollTop(); // 页面滚动恢复
resetScrollTop('scrollTop');
/****************** keepAlive 模块 *******************/

// TAG: keepAlive 缓存页面
addPages()

onActivated(() => { // keepAlive 重置后执行回调
  // TAG: pinia应用，动态刷新数据
  // 处理数据未刷新数据显示问题
  // Pinia 解构方法：storeToRefs
  const { video_detail } = storeToRefs(store);
  // 如果作品信息有变化及时修正
  const arr = ref([]);
  _.each(prod_list.value, (item) => {
    if (item.id === video_detail.value.id) {
      item = video_detail.value
    }
    arr.value.push(item);
  })
  // 触发更新
  prod_list.value = arr.value;

  resetScrollTop('scrollTop');
});

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

/*********************************************************/

</script>

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