<template>
    <z-paging ref="paging" v-model="list" @query="handleQuery" @on-refresh="handleRefresh">
        <template #top>
            <view class="bg-white h-[44px] px-30 fx-row items-center">
                <uv-text type="warning" prefix-icon="bell" icon-style="color:var(--warning-color)" :text="rankTips"/>
            </view>
            <uv-line/>
        </template>
        <view class="p-20 fx-col gap-20">
            <college-item v-for="i in list" :item="i" class="mx-card" @click="handleDetail(i)"/>
        </view>
    </z-paging>
</template>

<script setup>
import {ref, computed} from 'vue'
import {useUserStore} from "@/hooks/useUserStore";
import {useTransfer} from "@/hooks/useTransfer";
import {useCacheStore} from "@/hooks/useCacheStore";
import CollegeItem from "@/pages/college-library/components/college-item.vue";
import {universityList} from "@/api/webApi/collegemajor";

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

const rankTips = computed(() => `${currentUser.value.provinceName || '湖南'}省招生院校竞争力排名`)

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

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

const handleDetail = (college) => {
    const {code} = college
    transferTo('/pages/college-library/detail/detail', {code})
}

</script>

<style scoped>

</style>