<template>
  <div class="main-container">
    <div class="search-group">
      <el-input v-model="searchValue" placeholder="请输入搜索关键字" class="input-with-select">
        <template #prepend>
          <el-select v-model="selectValue" placeholder="Select" style="width: 115px">
            <el-option label="找工作" value="1" />
            <el-option label="找企业" value="2" />
            <el-option label="找人才" value="3" />
          </el-select>
        </template>
        <template #append>
          <el-button :icon="Search" />
        </template>
      </el-input>
    </div>
    <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>
                <template #default>
                  <el-link :underline="false">销售业务</el-link>
                </template>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #default>
                  <el-link :underline="false">销售业务</el-link>
                </template>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #default>
                  <el-link :underline="false">销售业务</el-link>
                </template>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #default>
                  <el-link :underline="false">销售业务</el-link>
                </template>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #default>
                  <el-link :underline="false">销售业务</el-link>
                </template>
              </el-descriptions-item>
            </el-descriptions>
          </el-scrollbar>
        </div>
      </div>
      <div class="banner-main">
        <el-carousel height="410px">
          <el-carousel-item v-for="item in 4" :key="item">
            <el-image
              style="width: 100%; height: 100%"
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
            />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
const searchValue = ref()
const selectValue = ref()
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: '医疗 | 制药 | 环保'
  }
]

const mouseover = (row?: any) => {
  const jobMenuJob: any = document.querySelector('.job-menu-sub')
  jobMenuJob.style.display = 'block'
}

const mouseout = (row?: any) => {
  const jobMenuJob: any = document.querySelector('.job-menu-sub')
  jobMenuJob.style.display = 'none'
}
</script>

<style lang="scss" scoped>
.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  // overflow: hidden;
  .search-group {
    width: 920px;
    border-radius: 20px;
    margin: 40px 0;
    .el-input {
      height: 100%;
      :deep(.el-input__wrapper) {
        height: 60px;
      }
    }
  }
  .banner-group {
    height: 424px;
    display: flex;
    .job-menu {
      width: 238px;
      height: 410px;
      position: relative;
      padding: 16px 0;
      background-color: #ffffff;
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
      box-sizing: border-box;
      // background: rgba(79, 90, 102, 0.6);
      .el-menu {
        border-right: 0;
        // background: transparent;
        .menu-item-title {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .el-menu-item {
          // color: #ffffff !important;
          height: 42px;
        }
      }

      .job-menu-sub {
        display: none;
        position: absolute;
        top: 0;
        left: 238px;
        z-index: 10;
        width: 700px;
        height: 410px;

        background: #fff;
        .el-scrollbar {
          padding: 16px 23px 0 24px;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
        }
        :deep(.el-descriptions__label) {
          margin-right: 0;
        }
      }
    }
    .banner-main {
      width: 700px;
      height: 410px;
    }
  }
}

:deep(.input-with-select .el-input-group__prepend) {
  background-color: #ffffff;
}
</style>
