<template>
  <div class="main-container">
    <search style="margin: 25px 0" @search-change="searchChange" />
    <div class="banner-group">
      <div style="width: 444px; box-sizing: border-box" @mouseover="mouseover" @mouseout="mouseout">
        <div class="job-menu">
          <el-menu>
            <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-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: { FDATAVALUE: col.FDATAVALUE }
                          }"
                          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 class="position-list">
            <div v-for="col in 6" :key="col" class="position-item">
              <div class="flx-justify-between" style="margin-bottom: 20px">
                <div class="position-title nowrap-ellipsis">
                  销售经理销售经理销售经理销售经理销售经理销售经理
                </div>
                <div>
                  <span class="salary">6000-8000</span>
                  <span class="monthly-pay">元/月</span>
                </div>
              </div>
              <div class="position-label">
                <span>大专</span>
                <el-divider direction="vertical" />
                <span>1-3年</span>
                <el-divider direction="vertical" />
                <span>招聘2人</span>
              </div>
              <el-divider style="margin: 14px 0" />
              <div class="company">深圳市世杰创益酒店酒店管理限公司</div>
              <div class="company-label">
                <span>大专</span>
                <el-divider direction="vertical" />
                <span>1-3年</span>
                <el-divider direction="vertical" />
                <span>招聘2人</span>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <span class="n-more">查看更多</span>
    </div>

    <!-- 热门企业 -->
    <div class="hot-company">
      <div class="n-title">热门企业</div>
      <div class="company-list">
        <div v-for="item in 6" :key="item" class="company-item">
          <div class="company-tp">
            <img src="@/assets/img/icon-zhao.png" width="50" height="50" />
            <div class="company-tp-rg flx-column-start-between">
              <span>博彦科技</span>
              <div class="company-label">
                <span>大专</span>
                <el-divider direction="vertical" />
                <span>1-3年</span>
                <el-divider direction="vertical" />
                <span>招聘2人</span>
              </div>
            </div>
          </div>
          <div class="company-bt">
            <div class="company-position-list flx-direction-column">
              <div v-for="col in 3" :key="col" class="company-position-item">
                <div class="flx-justify-between" style="margin-bottom: 22px">
                  <div
                    class="nowrap-ellipsis"
                    style="width: 207px"
                    title="软件测试 (学信网可查,学信网可查)"
                  >
                    软件测试 (学信网可查,学信网可查)
                  </div>
                  <div>
                    <span class="salary">6000-8000</span>
                    <span class="monthly-pay">元/月</span>
                  </div>
                </div>
                <div class="hot-position-item-ft">
                  <span>深圳 福田区 新洲</span>
                  <span>经验不限 </span>
                  <span>学历不限</span>
                </div>
              </div>
            </div>
            <div 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 } from '@/services/api/recruitmentManagement'
import { getStreet } from '@/services/api/streetOfficeSpecialTopic'
import search from '@/components/search.vue'

const router = useRouter()

const menuList = ref([] as any)
const FDATAVALUE = ref()

const streetList = ref()

const tabsList = [
  { label: '市场', name: 0 },
  { label: '运营', name: 1 },
  { label: '销售', name: 2 },
  { label: '技术', name: 3 },
  { label: '服务业', name: 4 },
  { label: '设计', name: 5 },
  { label: '管理', name: 6 },
  { label: '人力/财务/行政', name: 7 }
]
const activeName = ref(0)

const handleClick = (tab: string) => {
  router.push({ path: '/recruitmentManagement/enterprise' })
}

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

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

  const street: any = await getStreet()
  if (street.code === 200) {
    streetList.value = street.data.sort((a: any, b: any) => a.FSERIALNUMBER - b.FSERIALNUMBER)
  }
}

init()
</script>

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