<template>
  <z-paging ref="paging" v-model="list" :default-page-size="5" @query="handleQuery">
    <view class="p-30 fx-col gap-30">
      <wrong-book-item v-for="item in list" :question="item" @delete="handleRefresh" />
    </view>
  </z-paging>
</template>

<script setup>
import { ref } from 'vue'
import { getWrongQuestions } from '@/api/webApi/paper.js';
import WrongBookItem from './wrong-book-item.vue';
import { createPropDefine } from "@/utils";
import { useQuestionTranslate } from "@/components/mx-question/useQuestionTranslate";

const props = defineProps({
  subjectId: createPropDefine(0, [Number, String]),
  startDate: createPropDefine('', String),
  endDate: createPropDefine('', String)
})

const list = ref([])
const paging = ref(null)

const handleQuery = function (pageNum, pageSize) {
  uni.$ie.showLoading()
  getWrongQuestions({ subjectId: props.subjectId, start: props.startDate, end: props.endDate, pageNum, pageSize })
    .then(res => {
      const rows = res.rows.map(useQuestionTranslate)
      paging.value.completeByTotal(rows, res.total)
    })
    .catch(e => paging.value.complete(false))
    .finally(() => {
      uni.$ie.hideLoading()
    })
}

const handleRefresh = function () {
  paging.value.refresh() // 这会直接刷新至当前分页
}
const reload = () => {
  paging.value.reload()
}
watch([() => props.startDate, () => props.endDate], () => {
  reload()
})
</script>

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