<script setup lang="ts">
import { subjectStore } from '@/stores'
import subjectApi from '@/api/subject/subject'
import Card from './Card.vue'
import LoadIcon from '@/page/system/mailbox/components/LoadIcon.vue'
import { debounce } from '@/hooks'

const { subject } = subjectStore()

const trainType = ref(1)
const list = ref<anyObj>([])
const page = reactive({
  current: 1,
  size: 12,
  total: -1,
})

const listLoading = ref(false)
async function getList() {
  listLoading.value = true
  try {
    const { data: res } = await subjectApi.getGroupPaperList({
      trainType: trainType.value,
      subjectId: subject.id,
      ...page,
    })
    list.value.push(...res.data.rows)
    page.total = res.data.totalRows
  } catch {}
  listLoading.value = false
}

const scrollBoxRef = ref()
async function handleScroll(event: any) {
  if (list.value.length >= page.total) return
  if (listLoading.value) return
  if (event.target.scrollTop + event.target.offsetHeight >= scrollBoxRef.value?.offsetHeight - 50) {
    page.current++
    try {
      await getList()
    } catch {
      page.current--
    }
  }
}

const debounceScroll = debounce(handleScroll, 200, false)

const pageLoading = ref(false)
const pageError = ref(false)
async function init() {
  page.current = 1
  list.value = []
  pageError.value = false
  pageLoading.value = true
  try {
    await getList()
  } catch {
    pageError.value = true
  }
  pageLoading.value = false
}

function toDetail(item: anyObj) {}

watch(trainType, () => init())

onActivated(() => {
  init()
})
</script>
<template>
  <div class="page">
    <BackBar :leftText="`【${subject.name}】历史组卷`"></BackBar>
    <div class="main">
      <div v-if="list.length" class="hidden_scroll" @scroll="debounceScroll">
        <div ref="scrollBoxRef" class="scroll-box">
          <div
            v-for="i in list"
            :key="i.id"
            class="train-record-list-item pointer"
            @click="toDetail(i)"
          >
            <Card v-bind="i"></Card>
          </div>
        </div>
        <LoadIcon v-if="listLoading"></LoadIcon>
      </div>
      <Empty
        v-else
        class="empty"
        :type="pageLoading ? 'loading' : pageError ? 'network' : 'learn'"
        :content="pageError ? '网络出问题啦～' : '暂无组卷记录'"
      ></Empty>
    </div>
    <div class="select-box">
      <SelectTab
        v-model="trainType"
        :dataList="[
          { value: 1, label: '章节组卷' },
          { value: 2, label: '知识点组卷' },
        ]"
      ></SelectTab>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  padding: $space-4_h $space-8 0;
  position: relative;
  @include main_bg;
  .main {
    padding-top: 4.67vh;
    height: calc(100% - 81px);
    overflow: hidden;
    display: flex;
    .hidden_scroll {
      height: 100%;
      margin: 0 auto;
      .scroll-box {
        display: grid;
        grid-template-columns: repeat(4, 398px);
        grid-template-rows: 374px;
        grid-auto-rows: 374px;
        gap: 40px;
      }
    }
  }
  .select-box {
    position: absolute;
    top: 3.5vh;
    right: 64px;
    :deep(.select-list) {
      width: 1172px;
      .data-item {
        width: 50%;
      }
      .active {
        background: linear-gradient(269deg, #86e6ff 2.25%, #9effda 51.93%, #5fdcfd 99.65%);
        backdrop-filter: blur(3px);
      }
    }
  }
}
</style>
