<template>
  <div class="menu">
    <div v-if="false" v-for="(i,k) in menuList" :class="`menuItem ${$route.path === i.path ? 'focus':''}`"
         @mouseenter="getChildren(i)" @click="toLink( i.webMenuId )">
      <div :class="`name`">{{ i.webMenuName }}</div>
      <div class="line"></div>
    </div>
    <div v-if="false" class="subMenu" v-show="(subMenuList||[]).length>0 && subMenuType === 1"
         @mouseleave="clearChildren">
      <div :class="`topMenuItem${$route.fullPath === ii.path ? ' active':''}`" v-for="(ii,k) in subMenuList"
           @click="toLink(ii.webMenuId)">
        <div class="icon">
          <img :src="ii.webMenuPic" alt="" style="width: 1.8vw;height: 1.8vw;object-fit: contain">
        </div>
        <div class="menuChildrenName">
              <span>
                {{ ii.webMenuName }}
              </span>
        </div>
      </div>
    </div>

    <div v-if="false" class="subMenu1"
         :style="{height:20 + 50 + 40*(Math.max(...subMenuList.map(e=>e.children.length || 0)))+'px'}"
         v-show="(subMenuList||[]).length>0 && subMenuType === 2"
         @mouseleave="clearChildren">
      <div class="subMenuList" :style="{width:100/subMenuList.length+'%'}"
           v-for="(ii,k) in subMenuList">
        <div class="subMenuListTitle" @click="toLink(ii.webMenuId)">
          <img class="subMenuListTitleIcon" :src="ii.configTypeIcon" alt=""
               style="width: 1vw;height: 1vw;object-fit: contain">
          <div class="subMenuListTitleSpan">{{ ii.webMenuName }}</div>
          <i class="el-icon-arrow-down subMenuListTitleIcon1"></i>
        </div>
        <div class="subMenuListItem" v-for="(iii,kkk) in ii.children"
             @click="toLink(iii.webMenuId)">
          <img :src="iii.webMenuPic" alt=""
               style="vertical-align: sub;width: 18px;height: 18px;line-height: 30px;object-fit: contain;margin-right: 6px">
          <span>
                {{ iii.webMenuName }}
              </span>
          <el-tag size="small" v-if="kkk <1">新品</el-tag>
        </div>
      </div>
    </div>

    <el-menu :default-active="activeIndex" class="el-menu-demo" style="height: 4.5vw" mode="horizontal"
             @select="handleSelect">
      <template v-for="(i,k) in menuList">
        <el-menu-item style="height: 4.5vw;line-height: 4.5vw;font-size: 1vw;" :index="i.webMenuId"
                      @click="toLink(i)"
                      v-if="(i.children || []).length ===0">{{
            i.webMenuName
          }}
        </el-menu-item>
        <el-submenu :index="i.webMenuId" v-else style="height: 4.5vw;line-height: 4.5vw">
          <template slot="title">
            <div style="height: 4.5vw;line-height: 4.5vw;font-size: 1vw;" @click="toLink(i)">{{
                i.webMenuName
              }}
            </div>
          </template>
          <template v-for="ii in i.children">
            <el-menu-item :index="ii.webMenuId" @click="toLink(ii)">
              {{ ii.webMenuName }}
            </el-menu-item>
            <!--            <el-submenu :index="ii.webMenuId" v-if="(ii.children || []).length >0">-->
            <!--              <template slot="title">{{ ii.webMenuName }}</template>-->
            <!--              <el-menu-item :index="iii.webMenuId" v-for="iii in ii.children">{{ iii.webMenuName }}</el-menu-item>-->
            <!--            </el-submenu>-->
          </template>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

<script>
import {selectConfigTypeList} from "@/api/menu";
import {listHwWebMenu, selectMenuTree} from "@/api/hwWebMenu";

export default {
  name: 'Index',
  data() {
    return {
      activeIndex: 0,
      menuList: [],
      subMenuList: [],
      subMenuType: 0,
      subMenuPath: ''
    }
  },
  mounted() {
    this.getMenu()
  },
  methods: {
    toLink(e) {
      let id = e.webMenuId
      console.log()
      if (!id) return
      if(id === 7){
        this.$router.push('/productCenter')
      }else if (id === 2){
        this.$router.push('/contactUs')
      }else if (id === 4){
        this.$router.push('/industrySolutions')
      } else if (id === 1) {
        this.$router.push('/index')
      } else if (e.ancestors.split(',').includes("2")) {
        this.$router.push('/contactUs#item' + id)
      } else if (e.ancestors.split(',').includes("7")) {
        this.$router.push('/productCenter#item' + id)
      }else{
        this.$router.push('/test?id=' + id)
      }
    },
    getMenu() {
      selectMenuTree().then(e => {
        this.menuList = e.data
      })
    },
    getChildren(e) {
      console.log(e)
      if (e.children) {
        this.subMenuList = e.children
        this.subMenuType = e.webMenuType || 1
        this.subMenuPath = e.path
      } else {
        this.subMenuList = []
        this.subMenuType = 0
        this.subMenuPath = ''
      }
    },
    clearChildren() {
      this.subMenuList = []
      this.subMenuType = 0
      this.subMenuPath = ''
    },
    handleSelect(e) {
      console.log(e)
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/style.less";

.menu {
  position: relative;

  .focus, .menuItem:hover {
    font-weight: 700;
    color: #3076f8;
    background-color: #ebf1ff;

    .line {
      width: 100%;
      height: 2px;
      position: absolute;
      bottom: 0;
      left: 0;
      background-color: #3076f8;
    }
  }

  .menuItem {
    //width: 120px;
    padding: 0 2vw;
    position: relative;
    display: inline-block;
    cursor: pointer;
    transition: all 0.2s;


    .name {
      line-height: @top-height;
      font-size: 1vw;
      letter-spacing: 2px;
    }
  }


  .subMenu {
    position: absolute;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    height: @menuHeight;
    display: flex;
    justify-content: center;
    background-color: #fff;
    z-index: -1;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.04);


    .topMenuItem.active, .topMenuItem:hover {
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

      .menuChildrenName {
        color: @standard-color;
      }
    }

    .topMenuItem {
      width: @menuHeight;
      height: @menuHeight;
      transition: all 0.2s;

      .icon {
        width: 100%;
        height: 36%;
        margin-top: 22%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .menuName {
        height: 20%;
        font-size: 0.9vw;
        color: #111;
        letter-spacing: 1px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .subMenuList {
      position: absolute;
      width: 80%;
      height: @menuHeight;
    }
  }

  .subMenu1 {
    position: absolute;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    min-height: @menuHeight;
    display: flex;
    justify-content: center;
    background-color: #fff;
    z-index: -1;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.04);


    .subMenuList {
      max-width: 14vw;
      display: inline-block;
      text-align: left;
      vertical-align: top;
      border-right: 1px solid #0001;

      &:last-child {
        border-right: 0;
      }

      .subMenuListTitle {
        height: 50px;
        cursor: pointer;
        position: relative;

        .subMenuListTitleIcon {
          position: absolute;
          top: 50%;
          left: 2vw;
          width: 1vw;
          height: 1vw;
          transform: translateY(-50%);
        }

        .subMenuListTitleIcon1 {
          position: absolute;
          top: 50%;
          right: 2vw;
          width: 1vw;
          height: 1vw;
          font-size: 1vw;
          transform: translateY(-50%);
        }

        .subMenuListTitleSpan {
          position: absolute;
          letter-spacing: 0.1vw;
          top: 50%;
          left: calc(2vw + 1vw + 0.5vw);
          transform: translateY(-50%);
          font-size: 1vw;
          font-weight: 500;
        }
      }

      .subMenuListItem {
        padding-left: 2vw;
        cursor: pointer;
        font-size: 14px;
        line-height: 40px;

        &:hover {
          color: @standard-color;
          background-color: #0001;
        }
      }
    }
  }
}


@menuHeight: 11vw;
/deep/ .el-submenu.is-active .el-submenu__title {
  height: 4.5vw;
}

/deep/ .el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 4.5vw;
}

/deep/ .el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
  display: none;
}

/deep/ .el-submenu__title {
  margin: 0 20px
}

</style>


