<template>
  <div>
    <template v-for="menu in menuList">
      <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>
        <partner-site-menu-list :menu-list="menu.children" :key="menu.value"></partner-site-menu-list>
      </el-submenu>
      <el-menu-item v-else :key="menu.value" :style="{color: menu.current?'#409EFF':''}">
        <a :href="menu.host" style="flex: 1;">{{menu.label}}</a>
      </el-menu-item>
    </template>
  </div>
</template>
<script>

export default {
  name: "PartnerSiteMenuList",
  props: {
    menuList: {
      type: Array,
      default: () => []
    }
  },
  data(){
    return {
    }
  },
  created(){
  },
  methods: {
   
  }
}
</script>

<style lang="less" scoped>

.partner_site_menu{
  display: inline-flex;
  height: 50px;
  align-items: center;
  position: absolute;
  width: calc(100% - 100px);
  overflow-x: auto;
  overflow-y: hidden;
  .menu_title{
    @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>
