<template>
  <div class="">
    <van-tabs v-model:active="active" sticky @click-tab="onClickTab" color="#F9D95C" background="#F7F7F7"
    title-active-color="#222222" title-inactive-color="#777777">
      <van-tab title="待审核" badge="24" :title-style="titleStyle">
        <template v-if="!active">
          <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <template v-for="item in dataList" :key="item" style="height: 3rem;">
              <b-video-card :item="item" status="PENDING"></b-video-card>
            </template>
          </van-list>
        </template>
      </van-tab>
      <van-tab title="已审核" :title-style="titleStyle">
        <template v-if="active">
          <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <template v-for="item in dataList1" :key="item" style="height: 3rem;">
              <b-video-card :item="item" status="PROCESS"></b-video-card>
            </template>
          </van-list>
        </template>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import dataList from '@/mock/video_list'
import dataList1 from '@/mock/video_list1'
import BVideoCard from '@/components/BVideoCard/index.vue'

import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/utils/axios';
import $ from 'jquery'
import { Toast } from 'vant';
const $route = useRoute();
const $router = useRouter();

const titleStyle = {
  fontSize: '1rem'
}

const active = ref(0)
let tabStatus = ref('PENDING')
const onClickTab = () => {
    console.warn(0);
}

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

const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    for (let i = 0; i < 20; i++) {
      list.value.push(list.value.length + 1);
    }

    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (list.value.length >= 100) {
      finished.value = true;
    }
  }, 1000);
};

  onMounted(() => {
    
  })
</script>

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

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

    }
  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
:global(.van-badge--top-right) {
  right: -10px;
}
:global(.van-sticky--fixed) {
  z-index: 1000;
}
</style>