<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="prod_num" :title-style="titleStyle">
        <template v-if="!active">
          <van-list v-model:loading="loading" :finished="finished" :finished-text="prod_list.length ? '没有更多了' : ''" @load="onLoad">
            <template v-for="item in prod_list" :key="item" style="height: 3rem;">
              <b-video-card :item="item" status="PENDING" @on-click="onClick"></b-video-card>
            </template>
          </van-list>
          <van-empty v-if="!prod_list.length"
            class="custom-image"
            :image="no_image"
            description="暂无审核信息"
          />
        </template>
      </van-tab>
      <van-tab title="已审核" :title-style="titleStyle">
        <template v-if="active">
          <van-list v-model:loading="loading" :finished="finished" :finished-text="prod_list.length ? '没有更多了' : ''" @load="onLoad">
            <template v-for="item in prod_list" :key="item" style="height: 3rem;">
              <b-video-card :item="item" status="PROCESS"></b-video-card>
            </template>
          </van-list>
          <van-empty v-if="!prod_list.length"
            class="custom-image"
            :image="no_image"
            description="暂无审核信息"
          />
        </template>
      </van-tab>
    </van-tabs>
  </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';

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 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;
        }
      } 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>

<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>