<template>
  <div class="main-container">
    <el-carousel height="560px" style="width: 100%">
      <el-carousel-item v-for="item in posterList" :key="item">
        <img :src="baseURL + '/' + item.FPOSTERPICTURE" style="width: 100%; height: 100%" />
      </el-carousel-item>
    </el-carousel>
    <autocomplete
      style="margin: 25px 0"
      :list="querySearch"
      placeholder="搜索职位、公司"
      @search-change="searchChange"
      @query-search-async="querySearchAsync"
    />
    <div class="banner-group">
      <div style="width: 444px; box-sizing: border-box" @mouseover="mouseover" @mouseout="mouseout">
        <div class="job-menu">
          <el-menu>
            <el-scrollbar height="400px">
              <el-menu-item
                v-for="item in menuList"
                :key="item.index"
                @mouseover="mouseover(item)"
                @mouseout="mouseout(item)"
              >
                <template #title>
                  <div class="menu-item-title">
                    <span>{{ item.FDATAVALUE }}</span>
                    <el-icon><i-ep-ArrowRight /></el-icon>
                  </div>
                </template>
              </el-menu-item>
            </el-scrollbar>
          </el-menu>
          <div class="job-menu-sub" @mouseover="mouseover" @mouseout="mouseout">
            <el-scrollbar height="400px">
              <div style="margin-bottom: 16px">{{ FDATAVALUE }}</div>
              <div class="job-menu-sub-list">
                <div v-for="(item, index) in subMenuList" :key="index" class="job-menu-sub-item">
                  <div class="job-menu-sub-label nowrap-ellipsis">{{ item.FDATAVALUE }}</div>
                  <div style="flex: 1">
                    <div class="job-menu-sub-content">
                      <span v-for="(col, cIndex) in item.JobS" :key="cIndex">
                        <router-link
                          :to="{
                            path: '/recruitmentManagement/personal',
                            query: {
                              searchValue: col.FDATAVALUE.replace(/[\(（][^\)）]+[\)）]/g, '')
                            }
                          }"
                          style="text-decoration: none"
                        >
                          <el-link :underline="false">{{ col.FDATAVALUE }}</el-link>
                        </router-link>
                      </span>
                    </div>
                    <el-divider v-show="item.JobS.length" style="margin: 6px 0 0 0" />
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </div>
      </div>
      <div class="street-list">
        <img
          v-for="(item, index) in streetList"
          :key="index"
          :src="baseURL + '/' + item.FCOVERPICTURE"
        />
      </div>
    </div>
    <!-- 热招职位 -->
    <div class="hot-position">
      <div class="n-title">热招职位</div>
      <el-tabs v-model="activeName" class="hot-position-tabs" stretch @tab-click="handleClick">
        <el-tab-pane
          v-for="(item, index) in tabsList"
          :key="index"
          :label="item.label"
          :name="item.name"
          class="hot-position-tab-pane"
        >
          <div v-if="hotPositionList.length">
            <div class="position-list">
              <div v-for="col in hotPositionList" :key="col.jobfid" class="position-item">
                <div @click="toPositionDetail(col.jobfid)">
                  <div class="flx-justify-between" style="margin-bottom: 20px">
                    <div class="position-title nowrap-ellipsis">
                      {{ col.jobname }}
                    </div>
                    <div>
                      <span class="salary">{{ col.fminimumwage }}-{{ col.fmaximumsalary }}</span>
                      <span class="monthly-pay">元/月</span>
                    </div>
                  </div>
                  <div class="position-label">
                    <span>{{ col.feducationalbackground }}</span>
                    <el-divider direction="vertical" />
                    <span>{{ col.fexperience }}</span>
                    <el-divider direction="vertical" />
                    <span>招聘{{ col.FRECRUITSNUMBER }}人</span>
                  </div>
                </div>
                <el-divider style="margin: 14px 0" />
                <div>
                  <div class="company">{{ col.firmname }}</div>
                  <div class="company-label">
                    <span>{{ col.ffinancings }}</span>
                    <el-divider direction="vertical" />
                    <span>{{ col.fscales }}</span>
                    <el-divider direction="vertical" />
                    <span>{{ col.findustry }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="flx-center" style="text-align: center">
              <span class="n-more" @click="toSeeMorePosition">查看更多</span>
            </div>
          </div>
          <el-empty v-else description="暂无职位" />
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 热门企业 -->
    <div class="hot-company">
      <div class="n-title">热门企业</div>
      <div class="company-list">
        <div v-for="item in hotCompanyList" :key="item.FirmFID" class="company-item">
          <div class="company-tp" @click="toCompanyDetail(item.FirmFID)">
            <img :src="baseURL + '/' + item.FLOGO" width="50" height="50" />
            <div class="company-tp-rg flx-column-start-between">
              <span>{{ item.FirmName }}</span>
              <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 class="company-bt">
            <div class="company-position-list flx-direction-column">
              <div
                v-for="col in item.JobS"
                :key="col.JobFID"
                class="company-position-item"
                @click="toPositionDetail(col.JobFID)"
              >
                <div class="flx-justify-between" style="margin-bottom: 22px">
                  <div
                    class="nowrap-ellipsis"
                    style="width: 207px; text-align: left"
                    :title="col.JobName"
                  >
                    {{ col.JobName }}
                  </div>
                  <div>
                    <span class="salary">{{ col.FMINIMUMWAGE }}-{{ col.FMAXIMUMSALARY }}</span>
                    <span class="monthly-pay">元/月</span>
                  </div>
                </div>
                <div class="hot-position-item-ft">
                  <span class="nowrap-ellipsis" :title="col.FWORKPLACE">{{
                    `${col.FWORKPLACE.split('/')[1]} ${col.FWORKPLACE.split('/')[2]} ${
                      col.FWORKPLACE.split('/')[3]
                    }`
                  }}</span>
                  <span>{{ col.FEXPERIENCE }} </span>
                  <span>{{ col.FEDUCATIONALBACKGROUND }}</span>
                </div>
              </div>
            </div>
            <div v-if="item.JobS && item.JobS?.length" class="company-bt-btn">
              <span>查看更多职位</span>
            </div>
          </div>
        </div>
      </div>
      <span class="n-more" style="margin-top: 8px">查看更多</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { baseURL } from '@/services'
import {
  getPosition,
  getUserPostionList,
  getHotPosition,
  getHotCompany
} from '@/services/api/recruitmentManagement'
import { getStreet } from '@/services/api/streetOfficeSpecialTopic'
import { getPoster } from '@/services/api/common'
import { useUserInfoStore } from '@/stores/modules/userInfo'
import autocomplete from '@/components/autocomplete.vue'
import seeMorePosition from './seeMorePosition.vue'

const router = useRouter()
const userInfoStore = useUserInfoStore()
const menuList = ref([] as any)
const FDATAVALUE = ref()

const streetList = ref()
const posterList: any = ref([])
const hotPositionList: any = ref([])
const hotCompanyList: any = ref([])
const querySearch = ref([])

const tabsList = [
  { label: '市场', name: 'LevelJob_18' },
  { label: '运营', name: 'LevelJob_04' },
  { label: '销售', name: 'LevelJob_05' },
  { label: '技术', name: 'LevelJob_01' },
  { label: '服务业', name: 'LevelJob_11' },
  { label: '设计', name: 'LevelJob_15' },
  { label: '管理', name: 'LevelJob_09' },
  { label: '人力/财务/行政', name: 'LevelJob_07' }
]
const activeName = ref('LevelJob_18')

watch(
  () => userInfoStore,
  () => {
    if (
      JSON.stringify(userInfoStore.personalInfo) === '{}' &&
      JSON.stringify(userInfoStore.companyInfo) !== '{}'
    ) {
      router.push('/recruitmentManagement/enterprise')
    }
  },
  { immediate: true, deep: true }
)

const handleClick = (tab: any, e: any) => {
  activeName.value = tab.props.name
  initHotPosition()
}

const querySearchAsync = async (searchVal: string) => {
  const res: any = await getUserPostionList({
    pageIndex: 1,
    pageSize: 10,
    Filter: { FNAME: searchVal }
  })
  if (res.code === 200) {
    querySearch.value = res.data || []
  }
}

const searchChange = (searchValue: string) => {
  router.push({ path: '/recruitmentManagement/personal', query: { searchValue } })
}

const toSeeMorePosition = () => {
  router.push({ path: '/recruitmentManagement/seeMorePosition' })
}

const subMenuList = computed(() => {
  if (!FDATAVALUE.value) return []
  const list = JSON.parse(JSON.stringify(menuList.value)) || []
  const row = list.filter((item: any) => item.FDATAVALUE === FDATAVALUE.value)?.[0]?.JobS
  return row ? row : []
})

// 鼠标移入
const mouseover = (row?: any) => {
  const jobMenuJob: any = document.querySelector('.job-menu-sub')
  const jobMenu: any = document.querySelector('.job-menu')
  jobMenuJob.style.display = 'block'
  jobMenu.style.borderRadius = '12px 0 0 12px'
  jobMenuJob.style.borderRadius = '0 12px 12px 0'
  if (row.FDATAVALUE) FDATAVALUE.value = row.FDATAVALUE
}

// 鼠标离开
const mouseout = (row?: any) => {
  const jobMenuJob: any = document.querySelector('.job-menu-sub')
  const jobMenu: any = document.querySelector('.job-menu')
  jobMenuJob.style.display = 'none'
  jobMenu.style.borderRadius = '12px'
  jobMenuJob.style.borderRadius = '12px'
  if (!row) return
}

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

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

const initHotPosition = async () => {
  const res: any = await getHotPosition({ FNUMBER: activeName.value })
  if (res.code === 200) {
    hotPositionList.value = res.data || []
  }
}

const initHotCompany = async () => {
  const res: any = await getHotCompany({ FNUMBER: activeName.value })
  if (res.code === 200) {
    hotCompanyList.value = res.data || []
  }
}

const init = async () => {
  const res: any = await getPosition()
  if (res.code === 200) {
    // menuList.value = res.data.LevelJobS.filter((item: any, i: number) => i < 10)
    menuList.value = res.data?.LevelJobS || []
  }

  const street: any = await getStreet()
  if (street.code === 200) {
    streetList.value = street.data.sort((a: any, b: any) => a.FSERIALNUMBER - b.FSERIALNUMBER)
  }
  const poster: any = await getPoster({ Type: 'O' })
  if (street.code === 200) {
    posterList.value = poster.data || []
  }
  await initHotPosition()
  await initHotCompany()
}

onMounted(() => {
  init()
})
</script>

<style lang="scss" scoped>
@import url(./style/index.scss);
</style>
