<template>
  <div class="book-video-list">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      :finished-text="finishedTextStatus ? '没有更多了' : ''"
      @load="onLoad"
    >
      <template v-for="item in prodList" :key="item" style="height: 3rem">
        <audit-video-card :item="item"></audit-video-card>
      </template>
    </van-list>
    <!-- <template v-for="item in prodList" :key="item" style="height: 3rem">
      <audit-video-card :item="item"></audit-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 no_image from '@images/que-shuju@2x.png';
  import AuditVideoCard from '@/components/AuditVideoCard/index.vue';
  import _ from 'lodash';

  import { myProdAPI } from '@/api/C/me.js';

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

  const limit = ref(30);
  const offset = ref(0);

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

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

  /**
   * 向下滚动查询数据
   */
  const onLoad = async () => {
    // 异步更新数据
    const { data, code } = await myProdAPI({ limit: limit.value, offset: offset.value });
    if (code === 1) {
      _.each(data.prod, (item) => {
        item.status = item.status.toUpperCase();
        item.path = 'myVideoList';
      });
      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.prod_num) {
        // 加载状态结束
        finished.value = true;
      }
      // 空数据提示
      if (!prodList.value.length) {
        finishedTextStatus.value = false;
      }
      emptyStatus.value = Object.is(prodList.value.length, 0);
    }
  };
</script>

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

  export default {
    mixins: [mixin.init],
    data() {
      return {};
    },
    mounted() {},
    methods: {},
  };
</script>

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