<template>
    <view class="fx-col gap-10 -mx-20">
        <college-item v-for="u in recommends" :item="u" hidden-address class="mx-border-b"
                      @click="goCollege(u)"/>
    </view>
</template>

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

const props = defineProps({
    major: createPropDefine({}, Object),
    detail: createPropDefine({}, Object)
})

const {transferTo} = useTransfer()
const {dispatchCache} = useCacheStore()
const recommends = ref([])

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

watch([() => props.major.code, () => props.detail?.baseInfo?.code], async ([majorCode, collegeCode]) => {
    if (!majorCode || !collegeCode) return
    const payload = {code: majorCode, pageNum: 1, pageSize: 6}
    const res = await dispatchCache(getUniversityByCode, payload)
    recommends.value = res.rows.filter(c => c.code != collegeCode).slice(0, 5)
})
</script>

<style scoped>

</style>