<template>
  <ie-page>
    <ie-navbar :title="pageTitle" />
    <view class="bg-back sticky z-2" :style="{ top: baseStickyTop + 'px' }">
      <view class="px-30 py-20 text-28 text-fore-light">
        包含<span class="text-primary mx-10 font-bold">{{ childCount }}</span>个专业
      </view>
    </view>
    <view class="bg-white z-1 relative">
      <uv-cell-group :border="false">
        <uv-cell v-for="child in majorData.children" :key="child.id" icon="" :title="child.name" :isLink="true"
          arrow-direction="right" @click="handleClick(child)"></uv-cell>
      </uv-cell-group>
    </view>
  </ie-page>
</template>
<script lang="ts" setup>
import { useTransferPage } from '@/hooks/useTransferPage';
import { Major } from '@/types';
import { useNavbar } from '@/hooks/useNavbar';

const { prevData, transferTo, routes } = useTransferPage();
const majorData = ref<Major.MajorItem>({} as Major.MajorItem);
const { baseStickyTop } = useNavbar();
const pageTitle = computed(() => {
  return majorData.value?.name || '';
});
const childCount = computed(() => {
  return majorData.value?.children?.length || 0;
});
onLoad(() => {
  majorData.value = prevData.value;
});
const handleClick = (item: Major.MajorItem) => {
  transferTo(routes.majorDetail, {
    data: item
  });
}
</script>
<style lang="scss" scoped></style>