<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"
            >进入专题</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 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: 1, pageSize: 10 })
const specialRecruitmentData = ref()
const loading = ref(true)

const toSpecialHome = () => {
  router.push('/specialRecruitment/home')
}

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

init()
</script>

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