<template>
  <ie-page bg-color="#F6F8FA" :fix-height="true">
    <ie-navbar title="组卷作业" />
    <view class="bg-white">
      <uv-tabs :list="list" :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="paging" :fixed="false" v-model="dataList" :safe-area-inset-bottom="true"
          :use-safe-area-placeholder="true" :auto="false" 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="pt-10">
            <view class="card-item" v-for="item in dataList" :key="item.id">
              <activity-item :data="item" />
            </view>
          </view>
        </z-paging>
      </view>
    </view>
  </ie-page>
</template>

<script lang="ts" setup>
import { useImage } from '@/hooks/useImage';
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 list = [
  {
    name: '全部(0)',
    value: 'all'
  },
  {
    name: '未完成(0)',
    value: 'special'
  },
  {
    name: '已完成(0)',
    value: 'special'
  }
]
const dataList = ref<any[]>([]);
const paging = ref<any>(null);
const handleTabChange = (item: any) => {
  console.log(item);
  paging.value.reload();
}
const handleQuery = (page: number, pageSize: number) => {
  uni.$ie.showLoading();
  setTimeout(() => {
    uni.$ie.hideLoading();
    paging.value.complete([]);
  }, 1000);
}
const click = (item: any) => {
  console.log(item);
}

onMounted(() => {
  paging.value.reload();
});
</script>

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