<template>
  <div class="container">
    <div class="header">
      <div style="width: 1316px; justify-content: space-between" class="flx-align-center">
        <div class="flx-align-center">
          <span class="title">东西部协作就业平台</span>
          <span class="link" @click="router.push('/')">首页</span>
        </div>
        <span class="link" @click="login">{{ token ? '已登录' : '登录/注册' }}</span>
      </div>
    </div>
    <!-- <img :src="baseURL + '/' + imgUrl" height="640" style="width: 100%" /> -->
    <img src="@/assets/img/bg1.png" height="560" style="width: 100%" />
    <div class="flx-center">
      <div class="content">
        <div class="flx-center" style="margin: 64px 0 24px">
          <span class="line" />
          <span class="name">热招职位</span>
          <span class="line" />
        </div>
        <div v-loading="loading" class="position-list">
          <div v-for="item in positionList" :key="item.FID" class="position-item">
            <div @click="toPositionDetail(item.FID)">
              <div class="flx-justify-between" style="margin-bottom: 20px">
                <div class="position-title nowrap-ellipsis">
                  {{ item.JobName }}
                </div>
                <div>
                  <span class="salary">{{ item.FMINIMUMWAGE }}-{{ item.FMAXIMUMSALARY }}</span>
                  <span class="monthly-pay">元/月</span>
                </div>
              </div>
              <div class="position-label">
                <span>{{ item.FEDUCATIONALBACKGROUND }}</span>
                <el-divider direction="vertical" />
                <span>{{ item.FEXPERIENCE }}</span>
                <el-divider direction="vertical" />
                <span>招聘{{ item.FRECRUITSNUMBER }}人</span>
              </div>
            </div>
            <el-divider style="margin: 14px 0" />
            <div @click="toCompanyDetail(item.FirmID)">
              <div class="company">{{ item.FirmName }}</div>
              <div class="company-label">
                <span>{{ item.FFINANCINGS }}</span>
                <el-divider direction="vertical" />
                <span>{{ item.FSCALES }}</span>
                <el-divider direction="vertical" />
                <span>{{ item.FINDUSTRY }}</span>
              </div>
            </div>
          </div>
        </div>
        <div style="display: flex; justify-content: center; width: 100%; margin-bottom: 88px">
          <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>
    <div class="footer">
      <Footer />
    </div>
  </div>
  <loginVue v-model:show="show" />
</template>

<script lang="ts" setup>
import { baseURL } from '@/services'
import { getSpecialPicture, getSpecialPositon } from '@/services/api/specialRecruitment'
import { useGlobalStore } from '@/stores/modules/global'
import Footer from '@/Layout/footer.vue'
import loginVue from '@/views/login/index.vue'

const router = useRouter()
const route = useRoute()
const globalStore = useGlobalStore()

const token = computed(() => globalStore.getToken)
const show = ref(false)
const loading = ref(true)
const imgUrl = ref()
const positionList = ref([] as any)
const queryList = reactive({
  pageIndex: 0,
  pageSize: 12,
  FID: '',
  total: 0
})

const toPositionDetail = (FID: number) => {
  router.push({ path: '/recruitmentManagement/positionDetail', query: { FID } })
}

const toCompanyDetail = (FID: number) => {
  router.push({ path: '/recruitmentManagement/companyDetail', query: { FID } })
}

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

const login = () => {
  if (token.value) return
  show.value = true
}

const initSpecialPositon = async () => {
  loading.value = true
  const { FID } = route.query
  queryList.pageIndex += 1
  const res: any = await getSpecialPositon({ ...queryList, ...{ FID: Number(FID) } })
  if (res.code === 200) {
    positionList.value = [...positionList.value, ...res.data]
    queryList.total = res.total
    loading.value = false
  }
}

const init = async () => {
  const { FID } = route.query
  const res: any = await getSpecialPicture({ FID: Number(FID) })
  if (res.code === 200) {
    imgUrl.value = res.data.Picture as string
    // console.log(res)
    initSpecialPositon()
  }
}
init()
</script>

<style lang="scss" scoped>
.container {
  background: linear-gradient(180deg, #f2f8ff 0%, #f4f4f4 100%);
  .header {
    height: 80px;
    background: #022756;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    .title {
      height: 42px;
      font-size: 28px;
      font-weight: 500;
      color: #ffffff;
      margin-right: 50px;
    }
    .link {
      cursor: pointer;
      color: #177cfa;
    }
  }

  .content {
    width: 1316px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    .name {
      width: 128px;
      height: 50px;
      font-size: 32px;
      font-weight: 500;
      line-height: 50px;
      color: #177cfa;
    }
    .line {
      width: 112px;
      height: 0px;
      border: 1px solid #177cfa;
      margin: 0 24px;
    }

    .position-list {
      display: flex;
      flex-wrap: wrap;
      .position-item {
        cursor: pointer;
        width: calc((100% - 32px) / 3);
        flex: 0 0 calc((100% - 32px) / 3);
        margin: 0 16px 24px 0;
        box-sizing: border-box;
        background: #ffffff;
        border-radius: 12px;
        padding: 26px 20px 21px;

        &:nth-child(3n) {
          margin-right: 0;
        }
        .position-title {
          width: 50%;
          height: 18px;
          font-size: 18px;
          font-weight: 500;
          color: #222222;
          line-height: 18px;
        }

        .company {
          height: 14px;
          font-size: 14px;
          font-weight: 500;
          color: #666666;
          margin-bottom: 14px;
        }
      }
    }
  }

  .footer {
    padding: 0;
    width: 100%;
    background-color: #022756;
    z-index: 1;
  }
}
</style>
