<template>
  <ie-page :fix-height="true" bg-color="#F6F8FA" :safe-area-inset-bottom="false">
    <ie-navbar title="专业详情" />
    <ie-auto-resizer>
      <ie-tabs-swiper v-model="current" :list="tabs" :scrollable="false">
        <template #major-overview>
          <major-overview v-if="overviewData" :data="overviewData" />
        </template>
        <template #open-college>
          <related-university v-if="overviewData" :data="overviewData" />
        </template>
      </ie-tabs-swiper>
    </ie-auto-resizer>
  </ie-page>
</template>
<script lang="ts" setup>
import { getMajorOverviewByCode } from '@/api/modules/major';
import { Major, SwiperTabItem } from '@/types';
import { useTransferPage } from '@/hooks/useTransferPage';
import MajorOverview from './components/major-overview.vue';
import RelatedUniversity from './components/related-university.vue';
const current = ref(0);
const tabs = ref<SwiperTabItem[]>([
  {
    name: '专业概况',
    slot: 'major-overview'
  },
  {
    name: '开设院校',
    slot: 'open-college'
  },
]);
const { prevData } = useTransferPage();
const overviewData = ref<Major.MajorOverview | null>(null);
const loadData = async () => {
  uni.$ie.showLoading();
  try {
    const res = await getMajorOverviewByCode(prevData.value.code);
    overviewData.value = {
      ...res.data,
      code: prevData.value.code,
    } as Major.MajorOverview;
  } finally {
    uni.$ie.hideLoading();
  }
}
const handleChangeSwiper = (e: any) => {
  current.value = e.detail.current;
}
onLoad(() => {
  loadData();
});
</script>
<style lang="scss" scoped></style>