<template>
    <z-paging ref="paging" v-model="list" @query="handleQuery" @on-refresh="handleRefresh">
        <view class="fx-col p-30 gap-30">
            <college-item v-for="i in list" :item="i" class="mx-card" @click="goDetail(i)"/>
        </view>
    </z-paging>
</template>

<script setup>
import {ref} from 'vue';
import CollegeItem from "@/pagesOther/pages/college-library/components/college-item.vue";
import {useCacheStore} from "@/hooks/useCacheStore";
import {concernedUniversities} from "@/api/webApi/career-other";
import {useTransfer} from "@/hooks/useTransfer";

const paging = ref(null)
const list = ref([])
const {dispatchCache, removeCache} = useCacheStore()
const {transferTo} = useTransfer()

const handleRefresh = () => {
    removeCache(concernedUniversities)
}

const handleQuery = (pageNum, pageSize) => {
    const payload = {pageNum, pageSize}
    dispatchCache(concernedUniversities, payload)
        .then(res => paging.value.completeByTotal(res.rows, res.total))
        .catch(e => paging.value.complete(false))
}

const goDetail = (item) => {
    transferTo('/pagesOther/pages/college-library/detail/detail', ['code'], item)
}
</script>

<style scoped>

</style>