<template>
  <div>
    <headCarousel></headCarousel>
    <div class="stickyBox py-5">
      <headSearch text="职位类型" @handleSearch="handleSearch"></headSearch>
    </div>
    <hotJobs></hotJobs>
    <div class="default-width">
      <!-- <jobTypeCard class="mb-5" page @handleJobClick="handleJobClick" isSingle></jobTypeCard> -->
      <homeJobTypeCard></homeJobTypeCard>
      <advertisementPage class="my-3"></advertisementPage>
      <hotPromotedPositions></hotPromotedPositions>
      <PopularEnterprises class="mt-10"></PopularEnterprises>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name:'personal-index'})
import headCarousel from './components/headCarousel.vue'
import headSearch from '@/components/headSearch'
import hotJobs from './components/hotJobs.vue'
// import jobTypeCard from '@/components/jobTypeCard'
import homeJobTypeCard from './components/homeJobTypeCard'
import hotPromotedPositions from './components/hotPromotedPositions.vue'
import PopularEnterprises from './components/popularEnterprises.vue'
import advertisementPage from './components/advertisement.vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const handleSearch = (val) => {
  if (val) router.push(`/recruit/personal/position?content=${val}`)
}
</script>

<style lang="scss" scoped>
.stickyBox {
  position: sticky;
  top: 48px;
  z-index: 999;
  background-color: var(--default-bgc);
}
</style>