<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])
})

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

const handleQuery = function (pageNum, pageSize) {
    getWrongQuestions({subjectId: props.subjectId, pageNum, pageSize})
        .then(res => {
            const rows = res.rows.map(useQuestionTranslate)
            paging.value.completeByTotal(rows, res.total)
        })
        .catch(e => paging.value.complete(false))
}

const handleRefresh = function () {
    paging.value.refresh() // 这会直接刷新至当前分页
}
</script>

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