<template>
  <div>
    <div class="d-flex align-center justify-center">
      <div class="home-title">
        精选企业
        <div class="home-title-line"></div>
      </div>
    </div>
    <HotPromoted v-if="items.length" class="mt-5" :items="items"></HotPromoted>
    <Empty v-else :elevation="false" class="mt-3" message="暂无精选企业"></Empty>
    <div v-if="items.length" class="text-center">
      <v-hover v-slot="{ isHovering, props }">
        <v-btn v-bind="props" v-ripple.center class="buttons btnColor" :class="isHovering ? 'elevation-10' : 'elevation-5'" @click.stop="handleToMore">{{ $t('enterprise.moreBtn') }}</v-btn>
      </v-hover>
    </div>
  </div>
</template>

<script setup name="popularEnterprises">
import HotPromoted from '@/components/Enterprise/hotPromoted.vue'
import { ref } from 'vue'
import { getHotEnterprise } from '@/api/enterprise'
import { dealDictArrayData, dealDictObjData } from '@/utils/position'

const items = ref([])

// 热门企业
const getHotEnterpriseList = async () => {
  const { list } = await getHotEnterprise({ pageNo: 1, pageSize: 9 })
  items.value = list.map(e => {
    let jobList = []
    const enterprise = dealDictObjData({}, e.enterprise)
    if (e.jobList && e.jobList.length) jobList = dealDictArrayData([], e.jobList).slice(0, 2)
    return { enterprise, jobList, active: false }
  })
}
getHotEnterpriseList()

const handleToMore = () => {
  window.open('/recruit/personal/company')
}
</script>