<style>
  .mainContainer {
    height: 100%;
    display: flex;
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 0;
    font-size: 14px;
  }

  .mainContainer .mainLeftMenu {
    position: relative;
    display: flex;
    color: #fff;
  }

  .mainContainer .leftMenu1 {
    background: #444444;
    cursor: pointer;
    width: 130px;
    height: 100%;
    overflow-y: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .mainContainer .asideInner {
    background: rgba(0, 0, 0, 0.15);
    padding: 6px 6px;
    width: 100%;
    border-radius: 3px;
    font-weight: bold;
  }

  .mainContainer .aside-logo {
    height: 60px;
    background: #444444;
    color: #f2f2f2;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    padding: 0 15px;
    display: flex;
    align-items: center;
  }

  .mainContainer .leftUl li {
    list-style-type: none;
    display: block;
    height: 60px;
    padding: 10px;
    width: 100%;
  }

  .mainContainer .menu-item {
    height: 60px;
    padding: 0 10px;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    flex-direction: row;
  }

  .mainContainer .vue-line-clamp {
    word-break: break-all;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 5px;
  }

  .mainContainer .menu-item:hover {
    color: #fff;
    background-color: #666666;
    cursor: pointer;
  }

  .mainContainer .menuActive {
    color: #000000 !important;
    background: #ffffff !important;
  }

  .mainContainer .leftMenu2 {
    border-right: 1px solid #E6E6E6;
    position: relative;
    width: 130px;
    height: 100%;
    overflow-y: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .mainContainer .is-show-menu-1 {
    position: absolute;
    width: 30px;
    background: #F3F3F3;
    color: #A1A4A9;
    border-radius: 10px 0 0 10px;
    padding: 2px 8px;
    right: 0;
    top: 17px;
    cursor: pointer;
  }

  .mainContainer .menu-item-2-title {
    width: 100%;
    color: #909399;
    border-bottom: 1px solid #E6E6E6;
    height: 59px;
    line-height: 59px;
    padding-left: 28px;
  }

  .leftMenu2 .el-submenu__title span {
    padding-left: 20px;
  }

  .leftMenu2 .el-submenu__icon-arrow {
    right: 80%;
  }

  .leftMenu2 .el-submenu__title:hover {
    background: transparent;
    color: #5DA8FC;
  }

  .leftMenu2 .el-submenu__title:hover i {
    color: #5DA8FC;
  }

  .leftMenu2 .el-menu-item:hover {
    background-color: transparent;
    color: #5DA8FC;
  }

  .mainContainer .el-menu-item.is-active {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background-color: transparent;
    cursor: pointer;
    color: #303133;
  }

  .leftMenu2 .el-menu-item-group__title {
    padding: 0 0 7px 20px !important;
  }

  .leftMenu2 .el-menu {
    border-right: 0;
  }

  .mainLeftMenu .is-show-menu-2 {
    position: absolute;
    width: 30px;
    background: #F3F3F3;
    color: #A1A4A9;
    border-radius: 0 10px 10px 0;
    padding: 2px 8px;
    right: -30px;
    top: 17px;
    cursor: pointer;
    z-index: 10;
  }

  .mainContainer .checkBlock {
    width: 104px;
    height: 42px;
    line-height: 42px;
    text-indent: 15px;
    display: inline-block;
    text-align: left;

  }

  .isActive {
    background: #ebedf0 !important;
    border-radius: 4px;
  }

  .el-submenu .el-menu-item {
    padding-left: 0 !important;
    min-width: 129px !important;
    padding: 0 !important;
    text-align: center;
  }

  .mainContainer .mainRightContent {
    width: 100%;
    height: 100%;
    background-color: #f3f3f3;
    -webkit-box-orient: vertical;
    flex-direction: column;
    display: flex;
    flex: 1;
    flex-basis: auto;
    box-sizing: border-box;
    min-width: 0;
  }

  .mainContainer .mainRightTop {
    width: 100%;
    height: 60px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    color: #909399;
  }

  .mainContainer .mainRightLeft {
    width: 110px;
    height: 60px;
    line-height: 62px;
    text-align: center;
    margin-left: 30px;
    cursor: pointer;
    position: relative;
    top: -2px;
  }

  .mainContainer .marinRightList {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 300px;
    float: right;
  }

  .marinRightList ul {
    display: flex;
    width: 100%;
    justify-content: space-around;
  }

  .marinRightList ul li {
    display: block;
    list-style-type: none;
    cursor: pointer;
    color: #909399;
    outline: none;
    border: none;
  }

  .mainRightLeft:hover {
    color: #303133;
  }

  .marinRightList ul li:hover {
    color: #303133;
  }

  .marinRightList ul li .el-dropdown>span:hover {
    color: #303133;
  }

  .marinRightList ul li .el-dropdown>span {
    color: #909399;
  }

  .mainContainer .main_routerPage {
    padding: 20px;
    overflow-y: scroll;
  }

  .mainContainer .firstActive {
    background-color: #fff !important;
    color: #000000 !important;
  }

</style>
<template>
  <div class="mainContainer">
    <div class="mainLeftMenu" flex="dir:left">
      <div class="is-show-menu-2" v-if="isShowOne" @click="showTwo=true,isShowOne=false">&gt;&gt;</div>
      <div class="leftMenu1">
        <div class="aside-logo">
          <div class="asideInner" @click="CommonJump('mallIndex'),firstCked=0,showTwo=false">{{currentUser.MallName}}
          </div>
        </div>
        <ul>
          <li class="menu-item" @mouseover="mouseOver(item)" @mouseout="mouseOutMenu()" v-for="(item,index) in MenuList"
            :class="{'firstActive':firstCked==item.MenuId}" @click="firstCked=item.MenuId" :key="index">
            <i class="iconfont" :class="item.IconClass"></i>
            <div class="vue-line-clamp">{{item.MenuName}}</div>
          </li>
        </ul>
      </div>
      <div class="leftMenu2" v-if="showTwo">
        <div class="is-show-menu-1" @click="hideTwo()">
          &lt;&lt;
        </div>
        <div class="menu-item-2-title">
          {{secondItem.MenuName}}
        </div>
        <div>
          <el-menu :default-active="defaultActive" :unique-opened="true" class="el-menu-vertical-demo">
            <template v-for="(childItem,childIndex) in secondItem.SubList">
              <el-submenu v-if="childItem.ThirdList.length>0" :index="childItem.MenuId+''" :key="childIndex">
                <template slot="title">
                  <span>{{childItem.MenuName}}</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item :index="thirdChild.MenuId+''" @click.native="clickMenu(thirdChild,secondItem)"
                    v-for="(thirdChild,thirdIndex) in childItem.ThirdList" :key="thirdIndex">
                    <div class="checkBlock" :class="defaultActive==thirdChild.MenuId?'isActive':''">
                      {{thirdChild.MenuName}}</div>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <template v-else>
                <el-menu-item :index="childItem.MenuId+''" @click.native="clickMenu(childItem,secondItem)"
                  :key="childItem.MenuId">
                  <div class="checkBlock" style="margin-left:-7px;"
                    :class="defaultActive==childItem.MenuId?'isActive':''">{{childItem.MenuName}}</div>
                </el-menu-item>
              </template>
            </template>
          </el-menu>
        </div>
      </div>
    </div>
    <div class="mainRightContent">
      <div class="mainRightTop">
        <div class="mainRightLeft" @click="goLittlePrograme">微信小程序</div>
        <div class="marinRightList">
          <ul>
            <li style="display:none;">缓存</li>
            <li style="display:none;" title="教程管理">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  教程管理<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>操作教程</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
            <li :title="currentUser.MallName">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  {{currentUser.MallName}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item disabled>{{currentUser.MallName}}</el-dropdown-item>
                  <el-dropdown-item disabled>{{currentUser.Account}}({{currentUser.MobilePhone}})</el-dropdown-item>
                  <el-dropdown-item @click.native="CommonJump('index')">返回系统</el-dropdown-item>
                  <el-dropdown-item @click.native="loginOut">退出</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
          </ul>
        </div>
      </div>
      <div class="main_routerPage" :style="{height: Height+'px'}">
        <router-view />
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        //是否显示关闭后的箭头
        isShowOne: false,
        showTwo: false,
        defaultActive: '9',
        currentUser: {},
        Height: 0,
        MenuList: [], //菜单列表
        secondItem: {},
        firstCked: 0
      };
    },
    created() {
      this.currentUser = this.getLocalStorage();
    },
    methods: {
      //退出登录
      loginOut() {
        let that = this;
        that.Confirm("确认要退出系统吗?", function () {
          localStorage.removeItem("mall_userInfo");
          location.href = '/';
        });
      },
      //获取菜单列表
      getMenuList() {
        this.apipost("/api/Tenant/GetMenuList", {}, res => {
          if (res.data.resultCode == 1) {
            this.MenuList = res.data.data;
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //点击关闭二级窗口
      hideTwo() {
        this.showTwo = false;
        this.isShowOne = true;
      },
      //鼠标移入
      mouseOver(item) {
        this.showTwo = true;
        this.isShowOne = false;
        this.secondItem = item;
      },
      //鼠标移除
      mouseOutMenu() {
        this.MenuList.forEach(item => {
          if (item.MenuId == this.firstCked) {
            this.secondItem = item;
          }
        })
      },
      //菜单点击
      clickMenu(item, secondItem) {
        //选中当前大类
        this.firstCked = secondItem.MenuId;
        this.defaultActive = item.MenuId + '';
        if (item.MenuUrl && item.MenuUrl != '') {
          this.$router.push({
            path: item.MenuUrl
          });
        }
      },
      refreshpage() {
        var isFind = 0;
        let path = this.$route.path.split("?")[0];
        if (this.MenuList && this.MenuList.length > 0) {
          this.MenuList.forEach(item => {
            if (item.SubList && item.SubList.length) {
              item.SubList.forEach(subItem => {
                if (isFind == 0 && subItem.MenuUrl == path) {
                  isFind = 1;
                  this.defaultActive = subItem.MenuId + '';
                  this.firstCked = item.MenuId + '';
                  this.mouseOver(item);
                }
                if (isFind == 0 && subItem.ThirdList && subItem.ThirdList.length > 0) {
                  subItem.ThirdList.forEach(childItem => {
                    if (isFind == 0 && childItem.MenuUrl == path) {
                      isFind = 1;
                      this.defaultActive = childItem.MenuId + '';
                      this.firstCked = item.MenuId + '';
                      this.mouseOver(item);
                    }
                  })
                }
              });
            }
          });
        }
      },
      //跳转微信小程序
      goLittlePrograme() {
        let routeData = this.$router.resolve({
          name: 'Fsetting',
          query: {
            FIndex: 1
          }
        });
        window.open(routeData.href, "_blank");
      }
    },
    mounted() {
      this.getMenuList();
      if (this.$route.query.FIndex) {
        this.CommonJump('mallIndex');
      }
      this.Height = document.documentElement.clientHeight - 60;
      //监听浏览器窗口变化　
      window.onresize = () => {
        this.Height = document.documentElement.clientHeight - 60
      }
      this.refreshpage();
    },
    watch: {
      MenuList: {
        handler: function (val, oldVal) {
          this.refreshpage();
        },
        deep: true
      }
    }
  };

</script>
