<template>
    <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"
         style="display: flex;height: 60px;justify-content: space-between;background: #E70618">
<!--        <logo v-if="showLogo" :collapse="isCollapse" />-->
      <div class="logo-img-wrapper" @click="$tab.openPage('Menu','/index')">
<!--        <img src="../../../assets/images/logo.jpg" style="height: 60px">-->
        <el-image :src="require('@/assets/images/logo.png')" />
      </div>
      <el-scrollbar ref="scrollContainer" @wheel.native.prevent="handleScroll2" style="width: 65%;" wrap-class="scrollbar-wrapper" wrap-style="overflow-x:hidden;margin 0px 0px">
            <el-menu
                class="menu"
                :default-active="activeMenu"
                :collapse="isCollapse"
                activ
                :unique-opened="true"
                :collapse-transition="false"
                mode="horizontal"
            >
              <!--                active-text-color="#E70618"-->
              <!--                :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"-->
              <!--                :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"-->
                <sidebar-item
                    v-for="(route, index) in sidebarRouters"
                    :key="route.path  + index"
                    :item="route"
                    :base-path="route.path"
                />
            </el-menu>
        </el-scrollbar>
      <navbar />
    </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import Logo from "./Logo";
import SidebarItem from "./SidebarItem";
import Navbar from "../Navbar";
import variables from "@/assets/styles/variables.scss";

export default {
    components: { SidebarItem, Logo ,Navbar},
    computed: {
        ...mapState(["settings"]),
        ...mapGetters(["sidebarRouters", "sidebar"]),
        activeMenu() {
            const route = this.$route;
            const { meta, path } = route;
            // if set path, the sidebar will highlight the path you set
            if (meta.activeMenu) {
                return meta.activeMenu;
            }
            return path;
        },
        showLogo() {
            return this.$store.state.settings.sidebarLogo;
        },
        variables() {
            return variables;
        },
        isCollapse() {
            return !this.sidebar.opened;
        },
      scrollWrapper() {
        return this.$refs.scrollContainer.$refs.wrap
      }
    },
  methods: {
    // 当鼠标滚轮滚动时，控制滚动条移动
    handleScroll2(e) {
      const eventDelta = e.wheelDelta || -e.deltaY * 40
      const $scrollWrapper = this.scrollWrapper
      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft - eventDelta / 4
      this.$emit('scroll')
    },
    handleScroll(e) {
      e.preventDefault();
      const eventDelta = e.shiftKey ? (e.deltaY || e.detail || e.wheelDelta) : 0;
      const $scrollWrapper = this.scrollWrapper;
      $scrollWrapper.scrollLeft += eventDelta;
      this.$emit('scroll');
    },

  }
};
</script>

<style lang="scss" scoped>
  .menu{
    display: flex;
  }
  ::v-deep .el-scrollbar__view{
    height: 60px;
  }
  ::v-deep .el-menu.el-menu--horizontal{
    border-bottom: unset;
    height: 60px;
    background-color: #E70618;
  }
  ::v-deep .el-submenu__title{
    height: 60px;
    display: grid;
    line-height: unset;
    i{
      display: none;
    }
    text-align: center;
    align-items: center;
    grid-template-rows: 55% 45%;
    background-color: #E70618;
    color: white;
    .top{
      margin-bottom: -9px;
    }
    .bottom{
      margin-top: -9px;
    }
  }
  ::v-deep .el-menu-item {
    height: 60px;
    display: grid;
    line-height: unset;
    text-align: center;
    align-items: center;
    grid-template-rows: 55% 45%;
    background-color: #E70618;
    color: white;
    .top{
      margin-bottom: -9px;
    }
    .bottom{
      margin-top: -9px;
    }
  }
  ::v-deep .el-submenu__title:hover {

    background-color: #ffffff41;
  }
  ::v-deep .el-menu-item:hover {
  background-color: #ffffff41;
  color: white !important;
}
  ::v-deep .icon-width{
    height:1.5em !important;
    width:1.5em !important;
  }
  ::v-deep .el-menu-item.is-active {
    background-color: #eb5359 !important;
  }

  ::v-deep .el-scrollbar {
    .el-scrollbar__thumb {
      background: lightgray;

      transition: background 0.4s;
    }

    .el-scrollbar__thumb:hover {
      background: darkgray;
    }
  }

  .logo-img-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-left: 25px;

    .el-image {
      height: 70%;
      max-width: 100px;
    }
  }


</style>
