<template>
  <scroll-view class="h-full">
    <view class="font-semibold text-[#303030] text-[28rpx] px-[32rpx]">
      {{ subMajorList.name }}
      <text class="text-[22rpx] text-[#bfbfbf] font-normal">({{ subMajorList.count }}个)</text>
    </view>

    <Collapse v-model="collapseValue" accordion type="line">
      <CollapseItem v-for="(item, index) in subMajorList.items" :key="item.key" :name="`${index}`">
        <template #title="{ expanded }">
          <view class="header">
            <text :class="`text-[26rpx] text-[#303030] ${expanded ? 'text-[#1580FF]!' : ''}`">
              {{ item.name }}
            </text>
            <view class="flex items-center justify-between">
              <text
                :class="`mr-[12rpx] text-[26rpx] text-[#303030] ${expanded ? 'text-[#1580FF]!' : ''}`"
              >
                {{ item.childMajors.length }}
              </text>
              <view
                class="i-carbon-chevron-down rotate-180 text-[16rpx] text-[#1580FF]"
                v-if="expanded"
              ></view>
              <view class="i-carbon-chevron-down text-[16rpx]" v-else></view>
            </view>
          </view>
        </template>
        <view class="flex flex-col gap-[48rpx] h-full mb-[40rpx]">
          <view
            class="text-[24rpx] text-[#303030] ml-[32rpx]"
            v-for="childMajor in item.childMajors"
            :key="childMajor.zymc"
            @click="navigatorToMajorInfo(childMajor)"
          >
            <view class="ml-[32rpx]">
              {{ childMajor.zymc }}
            </view>
          </view>
        </view>
      </CollapseItem>
    </Collapse>
  </scroll-view>
</template>

<script lang="ts" setup>
import Collapse from '@/pages-sub/components/collapse/Collapse.vue'
import CollapseItem from '@/pages-sub/components/collapse/CollapseItem.vue'

const props = defineProps({
  subMajorList: {
    type: Object as () => {
      name: string
      key: string
      count: number
      itemsCount: number
      items: any[]
    },
    default: () => ({
      name: '',
      key: '',
      count: 0,
      itemsCount: 0,
      items: [],
    }),
  },
})

const collapseValue = ref<string>('0')

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

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

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
}

:deep(.uni-collapse-item__wrap-content) {
  border-bottom: 0;
}
</style>
