<template>
  <ie-page bg-color="#F6F8FA" :fix-height="true">
    <ie-navbar title="组卷作业" />
    <view class="bg-white">
      <uv-tabs :current="currentTab" :list="tabList" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"
        :scrollable="false" @change="handleTabChange"></uv-tabs>
    </view>
    <view class="flex-1 min-h-1 relative">
      <view class="absolute inset-0">
        <z-paging ref="pagingRef" :fixed="false" v-model="dataList" :safe-area-inset-bottom="true"
          :use-safe-area-placeholder="true" :auto="false" bg-color="#F6F8FA" empty-view-text="暂无发布组卷作业～"
          :empty-view-img="resolvePath('/pagesStudy/static/image/icon-empty.png')" :empty-view-style="emptyViewStyle"
          :empty-view-img-style="emptyViewImgStyle" :empty-view-title-style="emptyViewTextStyle" @query="handleQuery">
          <view v-if="dataList.length > 0" class="">
            <view class="mt-20" v-for="item in dataList" :key="item.id">
              <paper-work-item :data="item" />
            </view>
          </view>
        </z-paging>
      </view>
    </view>
  </ie-page>
</template>

<script lang="ts" setup>
import { useImage } from '@/hooks/useImage';
import PaperWorkItem from '@/pagesStudy/components/paper-work-item.vue';
import { getPaperWorkList, getPaperWorkStatistic } from '@/api/modules/study';
import { Study } from '@/types';
import { EnumPaperWorkState } from '@/common/enum';

const { resolvePath } = useImage();
const activeStyle = {
  color: '#1A1A1A'
}
const inactiveStyle = {
  color: '#999999'
}
const emptyViewStyle = {
  marginTop: '-200rpx'
}
const emptyViewImgStyle = {
  width: '364rpx',
  height: '252rpx'
}
const emptyViewTextStyle = {
  color: '#B3B3B3',
  fontSize: '30rpx',
  marginTop: '40rpx'
}
const tabList = ref([
  {
    name: '全部(0)',
    value: '全部',
    state: undefined
  },
  {
    name: '未完成(0)',
    value: '未完成',
    state: EnumPaperWorkState.NOT_COMPLETED
  },
  {
    name: '已完成(0)',
    value: '已完成',
    state: EnumPaperWorkState.COMPLETED
  }
])
const dataList = ref<Study.PaperWork[]>([]);
const pagingRef = ref();
const currentTab = ref(0);
const handleTabChange = (item: any) => {
  currentTab.value = item.index;
  pagingRef.value.reload();
}
const handleQuery = (page: number, pageSize: number) => {
  uni.$ie.showLoading();
  const params = {
    pageNum: 1,
    pageSize: 10000
  } as { state?: EnumPaperWorkState };
  const state = tabList.value[currentTab.value].state;
  if (state) {
    params.state = state;
  }
  getPaperWorkList(params).then(res => {
    pagingRef.value.completeByTotal(res.rows, res.total);
  }).catch(err => {
    pagingRef.value.complete(false);
  }).finally(() => {
    uni.$ie.hideLoading();
  });

}
const loadStatistic = () => {
  getPaperWorkStatistic().then(res => {
    tabList.value.forEach(item => {
      const cate = res.data.find(c => c.hasOwnProperty(item.value))
      if (cate) {
        item.name = `${item.value}(${cate[item.value]})`;
      }
    });
  });
}

loadStatistic();

onShow(() => {
  nextTick(() => {
    pagingRef.value.refresh();
  });
});
</script>

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