<template>
  <div class="">
    <van-tabs v-model:active="active" sticky :color="styleColor.baseColor" background="#F7F7F7" title-active-color="#222222" title-inactive-color="#777777" @click-tab="onClickTab">
      <van-tab title="待审核" :badge="prod_num" :title-style="titleStyle">
        <template v-if="!active">
          <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''" @load="onLoad">
            <template v-for="item in prod_list" :key="item">
              <b-video-card :item="item" status="PENDING" @on-click="onClick" />
            </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="finishedTextStatus ? '没有更多了' : ''" @load="onLoad">
            <template v-for="item in prod_list" :key="item">
              <b-video-card :item="item" status="PROCESS" />
            </template>
          </van-list>
        </template>
      </van-tab>
    </van-tabs>
    <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无审核信息" />
    <div style="height: 5rem;" />
  </div>
</template>

<script setup>
import BVideoCard from '@/components/BVideoCard/index.vue'
import no_image from '@images/que-shuju@2x.png'

import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/utils/axios';
import _ from 'lodash'
import { Toast } from 'vant';
import { styleColor } from '@/constant.js';

const titleStyle = {
  fontSize: '1rem'
}


/**
 * 重载刷新程序
 */
const onReload = (v) => {
  status.value = v
  offset.value = 0
  prod_list.value = []
  loading.value = true;
  finished.value = false;
  onLoad()
}

const active = ref(0)

const onClickTab = (v) => {
  if (!v.name) {
    onReload('apply')
  } else {
    onReload('checked')
  }
}

// 绑定页面数据
const status = ref('apply');
const prod_num = ref('');
const prod_list = ref([]);
const limit = ref(10)
const offset = ref(0)

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

/**
 * 向下滚动查询数据
 */
// 因为不能让空图标提前出来的写法
const emptyStatus = ref(false);
const finishedTextStatus = ref(false);
const onLoad = () => {
  // 异步更新数据
  axios.get('/srv/?a=check_prod_list', {
    params: {
      status: status.value,
      limit: limit.value,
      offset: offset.value
    }
  })
    .then(res => {
      if (res.data.code === 1) {
        prod_num.value = res.data.data.prod_num;
        _.each(res.data.data.prod, item => {
          item.status = item.status.toUpperCase()
        })
        prod_list.value = _.concat(prod_list.value, res.data.data.prod);
        prod_list.value = _.uniqBy(prod_list.value, 'id');
        offset.value = prod_list.value.length;
        loading.value = false;
        // 数据全部加载完成
        if (!res.data.data.prod.length) {
          // 加载状态结束
          finished.value = true;
        }
        //
        if (!prod_list.value.length) {
          finishedTextStatus.value = false;
          emptyStatus.value = true;
        } else {
          emptyStatus.value = false;
        }
      } else {
        console.warn(res);
        if (!res.data.show) return false;
        Toast({
          icon: 'close',
          message: res.data.msg
        });
      }
    })
    .catch(err => {
      console.error(err);
    })
};

// 审核请求操作后回调
const onClick = (id) => {
  prod_num.value--;
  _.remove(prod_list.value, item => item.id === id);
}

</script>

<style lang="less" scoped>
:global(.van-badge--top-right) {
  right: -10px;
}

:global(.van-sticky--fixed) {
  z-index: 1000;
}
</style>