<template>
  <ie-page fix-height 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 #list>
          <college-list :absolute="true" @click="handleDetail" />
        </template>
        <template #rank>
          <college-rank @click="handleDetail" />
        </template>
      </ie-tabs-swiper>
    </ie-auto-resizer>
  </ie-page>
</template>
<script lang="ts" setup>
import type { SwiperTabItem, University } from "@/types";
import CollegeList from "@/pagesOther/pages/university/index/components/college-list.vue";
import CollegeRank from "@/pagesOther/pages/university/index/components/college-rank.vue";
import { useTransferPage } from "@/hooks/useTransferPage";
import { useAuth } from "@/hooks/useAuth";
import { EnumUserRole } from "@/common/enum";

const { hasPermission } = useAuth();
const { transferTo, routes } = useTransferPage();
const current = ref(0);
const tabs = ref<SwiperTabItem[]>([{
  name: '院校库',
  slot: 'list'
}, {
  name: '院校排名',
  slot: 'rank'
}]);

const handleChangeSwiper = function (e: any) {
  current.value = e.detail.current;
}
const handleDetail = (u: University.University) => {
  const hasAuth = hasPermission([EnumUserRole.VIP]);
  if (!hasAuth) {
    return;
  }
  const { id, code, name } = u
  transferTo(routes.universityDetail, { data: { id, code, name } })
}
</script>
<style lang="scss" scoped></style>