<template>
  <div class="main-container">
    <search style="margin: 25px 0" />
    <div class="banner-group">
      <div class="job-menu">
        <el-menu class="el-menu-vertical-demo">
          <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.name }}</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">
            <el-descriptions v-for="item in 10" :key="item" :column="4">
              <template #title>
                <div style="font-size: 14px; font-weight: 400">销售</div>
              </template>
              <el-descriptions-item v-for="item1 in 4" :key="item1">
                <template #default>
                  <el-link :underline="false" href="/job">销售业务</el-link>
                </template>
              </el-descriptions-item>
            </el-descriptions>
          </el-scrollbar>
        </div>
      </div>
      <div class="street-list">
        <img v-for="(item, index) in streetImgList" :key="index" :src="item" />
      </div>
      <!-- <div style="width: 16px; height: 100%" @mouseover="mouseover" @mouseout="mouseout" /> -->
    </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 search from '@/components/search.vue'
import Frame376 from '@/assets/img/Frame376.png'
import Frame377 from '@/assets/img/Frame377.png'
import Frame378 from '@/assets/img/Frame378.png'
import Frame379 from '@/assets/img/Frame379.png'
import Frame380 from '@/assets/img/Frame380.png'
import Frame515 from '@/assets/img/Frame515.png'
import Frame381 from '@/assets/img/Frame381.png'
import Frame382 from '@/assets/img/Frame382.png'

const menuList = [
  {
    index: 0,
    name: '销售|客服|采购|淘宝'
  },
  {
    index: 1,
    name: '人力|行政|管理'
  },
  {
    index: 2,
    name: '网络|通信|电子|电气'
  },
  {
    index: 3,
    name: '市场|媒介|广告|设计'
  },
  {
    index: 4,
    name: '建筑|物业|农林牧渔|其他'
  },
  {
    index: 5,
    name: '生活| 服务业|超市|百货'
  },
  {
    index: 6,
    name: '法律|教育|翻译|出版'
  },
  {
    index: 7,
    name: '财会 | 金融 | 保险'
  },
  {
    index: 8,
    name: '医疗 | 制药 | 环保'
  },
  {
    index: 9,
    name: '珠宝/奢侈品/收藏品/工艺品'
  }
]

const streetImgList = [
  Frame376,
  Frame377,
  Frame378,
  Frame379,
  Frame380,
  Frame515,
  Frame382,
  Frame381
]

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) => {}

// 鼠标移入
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'
}

// 鼠标离开
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'
}
</script>

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