<template>
  <div v-loading="loading" class="special-container">
    <div class="special-list">
      <div v-for="(item, index) in specialRecruitmentData" :key="index" class="special-item">
        <img :src="baseURL + '/' + item.PICTURE" width="398" height="280" />
        <div class="special-title nowrap-ellipsis" :title="item.FNAME">{{ item.FNAME }}</div>
        <div class="special-detail">{{ item.FSUBTITLE }}</div>
        <div class="flx-justify-between">
          <span
            v-show="!item.FSTATE"
            class="special-tag"
            style="cursor: pointer"
            @click="toSpecialHome(item.FID)"
            >进入专题</span
          >
          <span v-show="item.FSTATE" class="special-tag" style="color: #666666; background: #f8f8f8"
            >专题已结束</span
          >
          <span class="special-date">{{ item.FDATE }}</span>
        </div>
        <span class="piece">招聘</span>
      </div>
      <div style="display: flex; justify-content: center; width: 100%; margin-bottom: 12px">
        <span
          v-if="queryList.pageIndex * queryList.pageSize < queryList.total"
          class="n-more"
          style="text-align: center"
          @click="loadMore"
          >查看更多</span
        >
        <span v-else class="n-more" style="text-align: center">没有更多了</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { baseURL } from '@/services'
import { getSpecialRecruitment } from '@/services/api/specialRecruitment'

const router = useRouter()
const queryList = ref({ pageIndex: 0, pageSize: 10, total: 0 })
const specialRecruitmentData = ref()
const loading = ref(true)

const toSpecialHome = (FID: number) => {
  router.push({ path: '/specialRecruitment/home', query: { FID } })
}

const loadMore = () => {
  if (queryList.value.pageIndex * queryList.value.pageSize >= queryList.value.total) return
  init()
}

const init = async () => {
  loading.value = true
  queryList.value.pageIndex += 1
  const res: any = await getSpecialRecruitment(queryList.value)
  if (res.code === 200) {
    specialRecruitmentData.value = res.data
    loading.value = false
  }
}

init()
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
