<template>
  <ie-page>
    <ie-navbar :title="prevData.name" transparent bg-color="#FFFFFF" title-color="black" keep-title-color />
    <uv-skeletons v-if="loading" :skeleton="skeleton" />
    <ie-image v-else :src="baseInfo.bannerUrl || baseInfo.logo" custom-class="w-full h-[240px]" mode="aspectFill" />
    <view class="-mt-60 z-1 rounded-t-3xl p-30 bg-white">
      <college-info :info="baseInfo" :loading="loading" />
    </view>
    <uv-gap height="10" bg-color="#F6F8FA" />
    <uv-sticky :offset-top="appStore.isH5 ? 0 : baseStickyTop">
      <ie-tabs-swiper v-model="current" :cache-count="1" :list="tabs" :scrollable="false" />
    </uv-sticky>
    <college-profile v-show="current === 0" :loading="loading" />
    <college-brochure v-show="current === 1" />
    <plan-enroll-list v-show="current === 2" mode="plan" :list="planList" />
    <plan-enroll-list v-show="current === 3" mode="enroll" :list="enrollList" />
    <college-exam v-show="current === 4" />
  </ie-page>
</template>
<script lang="ts" setup>

import { useTransferPage } from "@/hooks/useTransferPage";
import { UniversityDetail, University } from "@/types/university";
import { MajorItem } from "@/types/major";
import { getUniversitiesStyle, universityDetail } from "@/api/modules/university";
import { getMajorTree } from "@/api/modules/major";
import CollegeInfo from "@/pagesOther/pages/university/detail/components/college-info.vue";
import { SwiperTabItem } from "@/types";
import { useNavbar } from "@/hooks/useNavbar";
import { useAppStore } from "@/store/appStore";
import { MAJOR_TREE, UNIVERSITY_DETAIL } from "@/types/injectionSymbols";
import CollegeProfile from "@/pagesOther/pages/university/detail/components/college-profile.vue";
import CollegeBrochure from "@/pagesOther/pages/university/detail/components/college-brochure.vue";
import CollegeExam from "@/pagesOther/pages/university/detail/components/college-exam.vue";
import PlanEnrollList from "@/pagesOther/pages/university/detail/components/plan-enroll-list.vue";

const { prevData } = useTransferPage()
const { baseStickyTop } = useNavbar()
const detail = ref<UniversityDetail>({} as UniversityDetail)
const baseInfo = computed<University>(() => detail.value.baseInfo || {} as University)
const planList = computed(() => detail.value.planHistories || [])
const enrollList = computed(() => detail.value.enrollHistories || [])
const majorTree = ref<MajorItem[]>([])
const loading = ref(true)
const appStore = useAppStore()

const current = ref(0)
const tabHeight = computed(() => appStore.sysInfo.screenHeight - baseStickyTop.value)
const tabs = ref<SwiperTabItem[]>([{
  name: '概况',
  slot: 'profile'
}, {
  name: '简章',
  slot: 'brochure'
}, {
  name: '计划',
  slot: 'plan'
}, {
  name: '录取',
  slot: 'enroll'
}, {
  name: '考试大纲',
  slot: 'exam'
}])
const skeleton = [
  {
    type: 'line',
    style: 'height: 240px;'
  }
]

provide(UNIVERSITY_DETAIL, detail)
provide(MAJOR_TREE, majorTree)
onMounted(() => {
  uni.$ie.showLoading()
  loading.value = true
  universityDetail({ code: prevData.value.code })
    .then(res => {
      detail.value = res.data
      return getUniversitiesStyle({ code: prevData.value.code })
    })
    .then(res => {
      baseInfo.value.images = res.data
      return getMajorTree({})
    })
    .then(res => {
      majorTree.value = res.data
    })
    .finally(() => {
      uni.$ie.hideLoading()
      loading.value = false
    })
})
// 必须手动触发才能保证 navbar.transparent 正常工作
onPageScroll(() => {
})
</script>

<style lang="scss" scoped>
::v-deep .uv-tabs__wrapper__nav__item__text {
  white-space: nowrap;
}
</style>