<template>
  <div class="maxBox">
    <div class=" flex topfirst">
    <div class="title">数字项目管理平台</div>
      <div class="tabs flex">
      <div
        class="menuLsitItem"
        :class="item.moduleId == defaultActive ? 'this_class' : ''"
        v-for="(item, index) in menuData"
        :key="index"
        @click="handleClick(index, item.moduleId)"
        >
        <span class="menuName">{{ item.moduleName }}</span>
      </div>
      </div>
      <div class="bigScreen">
        <img v-if="accountType == 5 || accountType == 6" style="width:18px; margin-right:6px;" src='@/assets/images/menu/screenicon.png' class="icon" /> 
        <span v-if="accountType == 5 || accountType == 6" @click="toBigScreen()" style="margin-right:20px;">数据看板</span>
        <img style="width:16px; margin-right:6px; margin-top:2px;" src='@/assets/images/menu/closeicon.png' class="icon" /> 
        <span @click="toBack()">退出</span>
      </div>
    </div>
    <div class="flex contentBox" :style="{height:screenHeight+'px'}">
      <div class="left" v-if="menuTwo.length > 0">
        <!-- :default-active="menuTwo[0].path"      :default-active="activeName"-->
        <el-menu
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          :route="true"
        >
          <div v-for="(item, index) in menuTwo" :key="index">
          <!-- 没有三级菜单 -->
            <el-menu-item v-if="item.menuList == '' " :index="item.menuId" @click="selectEvent(0,item.menuId,item,0)">
              <div :class="item.menuId == showmenuId ? 'heightShow' : ''">
                <!-- <img v-if="item.menuId == showmenuId" style="width:20px;height:20px;margin-right:10px;padding-left:10px;" :src="require('@/assets/images/menu/un' + item.icon + '.png')" class="icon" />
                <img v-else style="width:20px;height:20px; margin-right:10px;" :src="require('@/assets/images/menu/' + item.icon + '.png')" class="icon" />   -->
                <span class="padding20" slot="title">{{ item.menuName }}</span> 
              </div>
            </el-menu-item>
            <!-- 有三级菜单 -->
            <el-submenu v-else :index="item.menuId">
              <template slot="title">
                <!-- <i class="el-icon-location"></i> -->
                <div :class="item.menuId == showmenuId ? 'heightShow' : ''"  @click="selectEvent(5,item.menuId,item,1,'noPath')">
                  <!-- <img v-if="item.menuId == showmenuId" style="width:20px;height:20px; margin-right:10px;padding-left:10px;" :src="require('@/assets/images/menu/un' + item.icon + '.png')" class="icon" /> 
                  <img v-else style="width:20px;height:20px; margin-right:10px;" :src="require('@/assets/images/menu/' + item.icon + '.png')" class="icon" />  -->
                 <span class="padding20">{{ item.menuName }}</span>
                </div>
              </template>

              <div v-if="menuTwo[index].menuList != ''">
                <div v-for="(item, index) in menuTwo[index].menuList">
                  <el-menu-item v-if="item.menuList == ''" :index="item.menuId" @click="selectEvent(1,item.menuId,item,0)">
                  <!-- 质检安检 -->
                    <div @click="selectEvent(0,item.menuId,item) " :class="item.menuId == showmenuId ? 'heightShow' : ''">
                      <span slot="title">{{ item.menuName }}</span>
                    </div>
                  </el-menu-item>

                  <!-- 有四级的 -->
                  <el-submenu v-else :index="item.menuId">
                      <template slot="title">
                         <div>{{ item.menuName }}</div>
                      </template>
                    <div v-if="item.menuList != ''">
                      <el-menu-item
                      @click="selectEvent2(4,item2.parentId,item2.menuName,item2)"
                        v-for="(item2, index) in item.menuList"
                        :key="index"
                        :index="item2.menuId"
                        >
                       <span>{{ item2.menuName }}</span>
                        </el-menu-item
                      >
                    </div>
                  </el-submenu>
                </div>
              </div>
            </el-submenu>
          </div>
        </el-menu>
      </div>
      <div class="right">
        <router-view>
          <noData></noData>
        </router-view>
      </div>
    </div>
  </div>
</template>
<script>
import noData from './noDataPage.vue'
export default {
  components:{noData},
  data() {
    return {
      accountType:1,
      defaultActive:"",
      activeName: "",
      userInfo: "", //返回的信息
      menuData: [], //第一级
      menuTwo: [], //第二级
      menuThree: [], //第三级
      menuId: "",
      heightShow:false,
      showmenuId:'',
      parentId:'',
      isShow:false,
      screenHeight:0
    };
  },
  watch: {
    "$route.path"(toPath, fromPath) {
      localStorage.setItem('path',toPath) //存储当前地址
    },
  },
  created() {
    this.screenHeight = document.body.scrollHeight-120;
    this.userInfo = this.$store.state.userInfo;
    this.accountType = this.userInfo.accountType
    this.menuData = this.userInfo.menuAuthority.moduleList;
    // this.$router.push({path:this.menuData[1].modulePath})
    console.log('menuData',this.menuData)
    this.menuId = this.menuData[1].moduleId;
    this.menuData = this.menuData.filter((item) => {
      return item.labelName == "衢州版";
    });

    let currentPath = localStorage.getItem('path') // 获取地址
    console.log('currentPath',currentPath)
    console.log('currentPath',this.$route.path)

    let defaultActive = localStorage.getItem('active')
   
    //  默认进来的时候
    if(!defaultActive ){
       this.defaultActive=this.menuData[0].moduleId;
       if(this.menuData[0].menuList.length > 0){
         console.log('默认进来的时候',this.menuTwo )
        this.menuTwo = this.menuData[0].menuList;
       
        // this.activeName = this.menuTwo[0].menuId
         this.handleClick(0, this.menuData[0].moduleId)
       }else{
         this.$router.push({ path: this.menuData[0].modulePath })
       }
    }else{
    // 刷新进来的时候
      this.defaultActive = localStorage.getItem('active');
      let dres= this.menuData.find(item=>item.moduleId==defaultActive);
      if(dres){
        console.log('this.menuTwo',this.menuTwo)
        // this.activeName = this.menuTwo[0].menuId
        if(dres.menuList.length > 0){
          this.menuTwo=dres.menuList
          this.showmenuId = this.menuTwo[0].menuId
        }
      }
    }
  },
  beforeDestroy() {
    localStorage.removeItem("active");
    console.log("beforeDestroy函数执行了");
  },

  destroyed() {
    console.log("destroyed函数执行了");
  },

  methods: {
    // 退出
    toBack(){
      if(this.accountType == 5 || this.accountType == 6){
        window.open("/index.html#/login", "_self");
      }else{
        window.open("/index.html#/projectList", "_self"); 
      }
      localStorage.setItem('model','defaultModel')
      localStorage.removeItem("active");
      localStorage.removeItem("path"); 
    },
    // 跳转到数据看板
    toBigScreen() {
      let arr = this.$store.state.userInfo.menuAuthority.moduleList
      let arr2=[]
      arr.forEach(element => {
        if(element.moduleType==4){
          arr2.push(element)
          return
        }
      });
      console.log('数据看板',arr2)
      let routeUrl = this.$router.resolve({
        path: arr2[0].modulePath,
      });
      window.location.href = routeUrl.href
      window._paq.push(['trackEvent', '点击', '数据看板','进入数据看板' ])
    },
    handleClick(val, id) {
      console.log(val, id);
      localStorage.setItem("menuId", id);
      this.menuId = id;
      this.defaultActive = id;  // tab栏点击
      localStorage.setItem('active',this.defaultActive)
      if(this.menuData[val].menuList.length > 0){
        this.menuTwo = this.menuData[val].menuList;
        console.log("二级路由内容", this.menuTwo);
        // this.activeName = this.menuTwo[0].menuId;
        this.showmenuId = this.menuTwo[0].menuId;
        if(this.menuTwo[0].menuList == ''){
          this.$router.push({ path: this.menuTwo[0].path})
        }else{
          this.$router.push({ path: this.menuTwo[0].menuList[0].path})
        } 
      }else{
        this.$router.push({ path: this.menuData[val].modulePath })
        this.menuTwo = []
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    selectEvent(type,index,val,max,noPath){
      console.log('当前点击',index)
      console.log('val',val)
     
      if(index == val.menuId){
         if(!noPath ){
        this.$router.push({ path: val.path })
      } 
      }
      // 如果没有子项
      if(val.menuList == ''){
        if(!noPath ){
        this.$router.push({ path: val.path })
       }
      }else{
        this.showmenuId == val.menuId
      }
      if(type == 0){
        this.showmenuId = index
      }
      //如果有四级 存储父级的index
      if(val.menuList != ''){
        let arr = val.menuList
        console.log('下级',arr)
        let arr2 = arr.filter((item)=>{
          return item.menuList != ""
        })
        if(arr2 != null){
          localStorage.setItem('maxId',index)
          console.log('存储',localStorage.getItem('maxId'))
        }
      }
      if(type == 1){
        this.showmenuId = val.parentId
      }
    },
    selectEvent2(type,menuId,index,val){
      if(index == val.menuName) {
         this.$router.push({ path: val.path })
       }
      if(type == 4){
        let maxId = localStorage.getItem('maxId')
        console.log('父级',maxId)
        this.showmenuId = maxId
      }
    }
  },
};
</script>
<style lang="less" scoped>
.maxBox{
  font-family: Emoji !important;
  src: local('Apple Color Emojiji'), local('Segoe UI Emoji'),
    local('Segoe UI Symbol'), local('Noto Color Emoji');
  unicode-range: U+1F000-1F644, U+203C-3299;
}
.padding20{
  padding-left:20px;
}
.four{
  color:red;
}
.heightShow{
  background-color: #396df7;
  border-radius: 14px;
  color: #fff;
  width: 210px;
  height: 45px;
  line-height: 45px;
  margin-top:15px;
  margin-right:1px;
  box-shadow:0px 3px 5px rgba(57, 109, 247, 0.4);
}
::v-deep .heightShow+ .el-submenu__icon-arrow{
   color: #fff!important;
   margin-top: -12px;

}
.title{
    flex:1.5;
    font-size: 26px;
    margin-left: 20px;
    margin-right: 50px;
}
.tabs{
    flex:8;
}
// 第二版
.menuLsitItem {
    margin-left: 40px;
    color: #333;
    cursor: pointer;
    .menuName {
      font-size: 18px;
    }
  }
  .this_class {
    color: #396df7 !important;
    position: relative;
  }
  .this_class::before {
    content: '';
    width: 48%;
    background: #396df7;
    height: 4px;
    position: absolute;
    bottom: 16px;
    bottom:-60%;
    left: 30%;
    z-index: 99;
    border-radius: 2px;
  }
.bigScreen{
    flex:1.5;
    margin-right:100px;
    cursor: pointer;
    span {
      margin-right: 40px;
      font-size: 16px;
    }
}
.topfirst {
  height: 76px;
  width: 100%;
  display:inline-block;
  background-color: rgb(255, 255, 255);
  // box-shadow: 0px 6px 11px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 2px 10px 0px rgba(52, 104, 246, 0.2);
  border-radius:10px;
}
.contentBox{
  padding:20px 20px 20px 0px ;
}
.flex {
  display: flex;
  align-items: center;
  .left {
    // margin-top:30px;
    // margin-right: 20px;
    flex: 1.2;
    height: 100%;
    overflow-y: auto;
    overflow-x: auto;
    background-color:rgb(255, 255, 255);
    box-shadow:0px 3px 10px rgba(57, 109, 247, 0.4);
    border-radius:10px;
  }
  ::-webkit-scrollbar { 
        width: 2px;
      } 
  .right {
    flex: 8;
    height: 100%;
    margin-left:20px;
    background-color:rgb(255, 255, 255);
    box-shadow: 0px 2px 10px 0px rgba(52, 104, 246, 0.2);
    border-radius:10px;
    padding:25px;
    box-sizing:border-box;
    overflow:auto;
    .noData{
        width:300px;
        height:200px;
    }
    .pnoData{
        color:rgb(38, 95, 246);
    }
  }
}
.el-menu--inline .el-menu-item.is-active span::before{
  content: "";
  width: 4px;
  height:4px;
  background: #396df7;
  position: absolute;
  left: 30px;
  top: 25px;
}
::v-deep .el-tabs__item {
  font-size: 18px;
//   color:rgb(146, 146, 146);
  margin-right: 40px;
}
::v-deep .el-tabs__nav-wrap::after {
  width: 0px;
  background-color: rgb(38, 95, 246);
}
::v-deep .el-menu{
  border-right: none;
}
::v-deep .el-menu-item.is-active {
    // color: white;
    // font-size:16px;
    // border-radius:14px;
    // margin-left:20px;
    // height: 45px;
    // margin-top:10px;
    // line-height: 45px;
    // width: 200px;
    // background-color:rgb(57, 109, 247);
    // background-color:white;
}
::v-deep .el-menu-item__title{
    font-size:18px;
}
::v-deep .el-submenu .el-menu-item{
  // padding: 0 20px;
}
// ::v-deep .el-menu--horizontal > .el-menu-item {
//      border-right: none; 
//      text-decoration: none; 
// }
@font-face {
  font-family: Emoji !important;
  src: local('Apple Color Emojiji'), local('Segoe UI Emoji'),
    local('Segoe UI Symbol'), local('Noto Color Emoji');
  unicode-range: U+1F000-1F644, U+203C-3299;
}

</style>

