<template>
    <z-paging ref="paging" v-model="list" :auto="false" @query="handleQuery">
        <template #top>
            <mx-condition class="px-40"/>
        </template>
        <view class="px-30 gap-30 fx-col">
            <paper-record-list-item v-for="item in list" :item="item"/>
        </view>
    </z-paging>
</template>

<script setup>
import {ref} from 'vue'
import {getExamRecords} from '@/api/webApi/paper.js';
import {createPropDefine} from "@/utils";
import PaperRecordListItem from "@/pagesOther/pages/topic-center/paper-record/components/paper-record-list-item.vue";
import {useProvideSearchModel} from "@/components/mx-condition/useSearchModelInjection";
import {useConditionPaperType} from "@/components/mx-condition/modules/useConditionPaperType";

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

const paging = ref(null)
const list = ref([])
const queryParams = ref({paperType: ''})
const {onSearch} = useProvideSearchModel([
    useConditionPaperType()
], queryParams)

onSearch(() => paging.value.reload())

const handleQuery = function (pageNum, pageSize) {
    getExamRecords({
        subjectId: props.subjectId,
        ...queryParams.value,
        pageNum, pageSize
    }).then(res => {
        paging.value.completeByTotal(res.rows, res.total)
    }).catch(e => {
        paging.value.complete(false)
    })
}
</script>

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