<template>
  <scroll-view class="h-full">
    <view class="font-semibold text-[#303030] text-[28rpx] mb-[32rpx] px-[32rpx]">
      {{ subMajorList.rootName }}
      <text class="text-[22rpx] text-[#bfbfbf] font-normal">
        ({{ subMajorList?.itemDtos.length || 0 }}个)
      </text>
    </view>

    <view class="px-[32rpx] flex flex-col gap-[48rpx] mt-[52rpx]">
      <view
        v-for="item in subMajorList.itemDtos"
        class="text-[#303030] text-[24rpx]"
        @click="navigatorToCareerInfo(item)"
      >
        {{ item.name }}
      </view>
    </view>
  </scroll-view>
</template>

<script lang="ts" setup>
const props = defineProps({
  subMajorList: {
    type: Object as () => {
      rootName: string
      _id: string
      itemDtos: any[]
    },
    default: () => ({
      rootName: '',
      _id: '',
      itemDtos: [],
    }),
  },
})

const navigatorToCareerInfo = (item: unknown) => {
  const _item = item as { id: string }
  uni.navigateTo({
    url: `/pages-sub/home/career/info?id=${_item.id}`,
  })
}
</script>

<style lang="scss" scoped>
:deep(.custom-collapse-item) {
  padding: 16rpx 0 !important;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
