<template>
  <div class="partner_site_menu" :class="{isPC:isPC}">
    <span class="menu_title" style="font-weight:600;margin-right: 32px;">{{title}}</span>
    <el-menu class="el-menu" mode="horizontal">
      <template v-for="menu in siteMenu">
        <el-submenu v-if="menu.children && menu.children.length" popper-append-to-body :key="menu.value" :index="menu.value">
          <div slot="title" :style="{color: menu.current?'#409EFF':''}">{{menu.label}}</div>
          <menu-list :menu-list="menu.children" :key="menu.value"></menu-list>
        </el-submenu>
        <el-menu-item v-else :key="menu.value" :style="{color: menu.current?'#409EFF':''}">
          <a :href="menu.host">{{menu.label}}</a>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>
<script>
import { mapActions, mapGetters } from "vuex"
import MenuList from "./PartnerSiteMenuList.vue"

export default {
  name: "PartnerSiteMenu",
  components: {
    MenuList
  },
  computed: {
    ...mapGetters([
      "siteMenu",
      "siteId"
    ]),
    title(){
      return this.$route.meta.title
    }
  },
  data(){
    return {
      isPC: true,
      dialogVisible: false,
    }
  },
  created(){
    this.isPC = this.$xdHelper.isPC();
  },
  methods: {
  }
}
</script>

<style>
.el-menu--horizontal{
  max-height: 70vh;
  .el-menu{
    max-height: 70vh;
    & > div{
      max-height: 70vh;
      overflow: auto;
    }
  }
}
</style>

<style lang="less" scoped>


.partner_site_menu{
  display: inline-flex;
  height: 50px;
  align-items: center;
  position: absolute;
  width: calc(100% - 150px);
  overflow-x: auto;
  overflow-y: hidden;


  &.isPC::-webkit-scrollbar {
    height: 6px;
  }

  &.isPC::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.25);
  }
  & > span {}
  .menu_title{
    flex-shrink: 0;
    @media screen and (max-width: 768px) {
      display: none;
    }
  }
  .el-menu{
    display: flex;
  }
  /deep/ .el-menu--horizontal {
    & > .el-submenu .el-submenu__title,
    & > .el-menu-item{
      height: 50px;
      line-height: 50px;
      color: #000000;
      font-size: 16px;
      padding: 0 20px;
    }

    .el-submenu__icon-arrow{
      display: inline !important;
      margin-top: 0;
      font-size: 16px;
    }
  }

}
</style>
