<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-if="prod_list.length" v-for="item in prod_list" :key="item" style="height: 3rem;">
          <video-card :item="item"></video-card>
        </template>
      </van-list>
    </div>
    <div style="height: 2rem;"></div>
    <van-empty v-if="emptyStatus"
      class="custom-image"
      :image="no_image"
      description="暂无未看"
    />
  </div>
</template>

<script setup>
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, computed } from 'vue'
import { mainStore } from '@/store'
import { storeToRefs } from 'pinia'
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
import $ from 'jquery'
import _ from 'lodash';
import { wxInfo } from '@/utils/tools';

const $router = useRouter();

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

/****************** keepAlive 模块 *******************/

onActivated(() => { // keepAlive 重置后执行回调
  // TAG: pinia应用，动态刷新数据
  const store = mainStore()
  // 处理数据未刷新数据显示问题
  // 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;
  /**
   * 判断微信环境
   */
  if (wxInfo().isiOS || wxInfo().isAndroid) {
    // TAG: 手机微信浏览器位置变动了，需要手动调整位置，但是无刷新是起作用的
    const { scrollTop } = storeToRefs(store);
    if (scrollTop.value) {
      $("html,body").animate({ "scrollTop": scrollTop.value })
    }
    window.addEventListener('scroll',()=>{
      if (window.scrollY) {
        store.changeScrollTop(window.scrollY)
      }
    });
  }
});

const changeRouterKeepAlive = (path, keepAlive) => {
  $router.options.routes.map((item) => {
    if (item.path === path) {
      item.meta.keepAlive = keepAlive;
    }
  });
};

onBeforeRouteLeave((to, from) => {
  // 如果是从页面返回，需要重置keepAlive状态
  // 列表页 =》 详情页
  // TAG: keepAlive
  if (to.path === '/client/videoDetail' && to.query.type === 'read-only') {
    changeRouterKeepAlive(from.path, true);
  } else {
    changeRouterKeepAlive(from.path, false);
  }
})

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

</script>

<script>
import mixin from 'common/mixin';

export default {
  mixins: [mixin.init],
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {

  }
}
</script>

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