<template>
  <view class="pb-safe overflow-y-auto">
    <view class="mx-[32rpx] border-item" v-for="item in recruits" :key="item.id">
      <view
        class="text-[#303030] text-[28rpx] font-normal py-[32rpx] flex items-center justify-between"
        @click="navigateTo(item.id)"
      >
        {{ item.title }}
        <view class="i-carbon-chevron-down rotate-270"></view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getRecruits } from '@/service/index/api'

const props = defineProps({
  id: {
    type: Number,
    default: 0,
  },
})

type UniversityEnrollmentRegulation = {
  base_college_id: number
  college_name: string
  id: number
  title: string
  year: string
}
const recruits = ref<UniversityEnrollmentRegulation[]>([])

watch(
  () => props.id,
  (newVal) => {
    getRecruits(newVal).then((resp) => {
      if (resp.code === 200) {
        const result = resp.result as UniversityEnrollmentRegulation[]
        recruits.value = result
      }
    })
  },
)

const navigateTo = (id: number) => {
  uni.navigateTo({
    url: `/pages-sub/home/college/enrollmentIntroDetail?id=${id}`,
  })
}
</script>

<style lang="scss" scoped>
.border-item {
  border-bottom: 1px solid #ededed;
}
</style>
