<template>
  <scroll-view class="pb-safe" :scroll-y="false">
    <view class="mx-[32rpx] border-item" v-for="item in recruits" :key="item.id">
      <view class="text-[#303030] text-[28rpx] font-normal py-[32rpx]" @click="navigateTo(item.id)">
        {{ item.title }}
      </view>
    </view>
  </scroll-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>
