<template>
  <div class="main-container">
    <search />
    <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="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 class="home-login">
        <div class="login">
          <el-avatar
            :size="60"
            :icon="UserFilled"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
          <text>Hi！欢迎登录！</text>
          <div class="login-btn">
            <el-button type="primary">登录</el-button>
            <el-button>注册</el-button>
          </div>
        </div>
        <div class="headlines">
          <div class="news-group">
            <h2>政策公告</h2>
            <text>更多&nbsp;>></text>
          </div>
          <el-scrollbar height="152px">
            <el-link
              v-for="item in 10"
              :key="item"
              title="关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知"
              >关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知</el-link
            >
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { UserFilled } from '@element-plus/icons-vue'
import search from '@/components/search.vue'

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 {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  // overflow: hidden;
  .banner-group {
    // width: 1316px;
    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;
    }
    .home-login {
      width: 262px;
      height: 410px;
      display: flex;
      flex-direction: column;

      .login {
        width: 100%;
        height: 184px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #ffffff;
        padding: 20px;
        box-sizing: border-box;
        margin-bottom: 5px;
        border-top-right-radius: 6px;
        text {
          margin-top: 15px;
          font-weight: 500;
        }
        .login-btn {
          margin-top: 15px;
        }
      }
      .headlines {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 20px;
        background-color: #ffffff;
        border-bottom-right-radius: 6px;
        // overflow-y: scroll;
        .news-group {
          display: flex;
          justify-content: space-between;
          margin-bottom: 12px;
          h2 {
            margin: 0;
            font-weight: 500;
            font-size: 18px;
            line-height: 18px;
            font-family: Source Han Sans CN;
            color: #333;
          }
          text {
            font-size: 13px;
            color: #1787fb;
            cursor: pointer;
          }
        }
        .el-link {
          height: 22px;
          margin-bottom: 5px;
        }
        :deep(.el-link__inner) {
          font-family: Source Han Sans CN;
          display: inline-block;
          width: 200px; /* 设置宽度 */
          overflow: hidden; /* 隐藏超出部分 */
          text-overflow: ellipsis; /* 显示省略号 */
          white-space: nowrap; /* 阻止文本换行 */
        }
      }
    }
  }
}
</style>
