<template>
  <el-menu
    :unique-opened="true"
    :default-active="$route.path"
    router
    :class="mClass"
    :collapse="isCollapse"
    :style="{ width: isCollapse ? (menuCollapseShowName == true ? '68px' : '45px') : '200px' }"
  >
    <el-menu-item @click="collapseChange" :index="$route.path" class="navigate">
      <i class="el-icon-qz-menu"></i>
      <span>{{ t(`asideMenu.title`) }}</span>
    </el-menu-item>

    <!-- :popper-class="isCollapse?'el-menu-new-popper':''" -->
    <el-submenu
      :index="String(i)"
      @mouseenter.native="mouseenter"
      v-for="(v,i) in leftMenuList"
      :key="i"
      class="firstLevelMenue"
      :popper-class="v.is_active === '3' ? 'menu-popup__hidden' : (isCollapse?'el-menu-new-popper':'')"
      :title="v.is_active === '3' ? translate(v) || (v.name?v.name:v.res_na) : ''"
      @click.native.stop="v.is_active === '3' && see(v)"
	   v-show="v.is_active!='2'"
    >
      <template slot="title">
        <img v-if="v.resIconNo" :src="syncUrl ? syncUrl(v.resIconNo) : v.resIconNo" style="width: 32px;height: 32px;">
        <img v-else src="../img/nomenueimg.png" style="width: 32px;height: 32px;">
        <span :title="translate(v) || (v.name?v.name:v.res_na)">{{get_menu_name(translate(v) || (v.name?v.name:v.res_na))}}</span>
      </template>
      <el-submenu
        v-show="!isCollapse&&vv.is_active!='2'"
        :index="String(vv.treeId?vv.treeId:vv.id)"
        v-for="(vv,ii) in v.children?v.children:v.childsList"
        :key="ii"
        class="secondLevelMenue"
      >
        <template slot="title">
          <span :title="translate(vv) || (vv.name?vv.name:vv.res_na)">{{get_menu_name(translate(vv) || (vv.name?vv.name:vv.res_na))}}</span>
        </template>
        <el-menu-item
          :index="String(vvv.uri?vvv.uri.split('/#')[1]:vvv.res_url_ca.split('/#')[1])"
          v-for="(vvv,iii) in vv.children?vv.children:vv.childsList"
          :key="iii"
          class="threeLevelMenue"
		   v-show="vvv.is_active!='2'"
        >
          <span
            class="text-center"
            :title="translate(vvv) || (vvv.name?vvv.name:vvv.res_na)"
            @click.stop="see(vvv)"
          >• {{get_menu_name(translate(vvv) || (vvv.name?vvv.name:vvv.res_na))}}</span>
        </el-menu-item>
      </el-submenu>

      <!-- hover -->
      <div
        class="el-menu-new-hover"
        v-for="(vv,ii) in v.children?v.children:v.childsList"
        :key="ii+'-second'"
        v-show="isCollapse"
      >
          <p class="hover_secondMenu">
            <div class="hover_secondMenu_left">
              <!-- <el-tooltip class="item" effect="dark" :content="translate(vv) || (vv.name?vv.name:vv.res_na)" placement="bottom"> -->
                <div class="child" :title="translate(vv) || (vv.name?vv.name:vv.res_na)">{{translate(vv) || (vv.name?vv.name:vv.res_na)}}</div>
              <!-- </el-tooltip> -->
              <div class="jiantou">&nbsp;&gt;</div>
              </div>
            <div class="hover_secondMenu_Right">
              <span
              class="hoverColor"
              @click.stop="see(vvv)"
              :index="String(vvv.name?vvv.name.split('/#')[1]:vvv.res_url_ca.split('/#')[1])"
              v-for="(vvv,iii) in vv.children?vv.children:vv.childsList"
              :key="iii+'-three'"
            >{{translate(vvv) || (vvv.name?vvv.name:vvv.res_na),vv.children}}</span>
            </div>
          </p>
      </div>
    </el-submenu>
  </el-menu>
</template>

<script>
import Locale from 'element-ui-qz/src/mixins/locale';

export default {
  name: 'ElMenueMine1',
  mixins: [Locale],
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          JID: localStorage.getItem('__JID__'),
          'Url': 'https://192.168.2.215:30700/ks-prj/menu/getFETreeList',
          'reqType': 'get'
        };
      }
    }
  },
  data() {
    return {
      isCollapse: false,
      leftMenuList: [],
      mClass: '',
      menuCollapseShowName:''
    };
  },
  computed:{
    watchMenuState(){
      return !this.$store.state.basic_global_sql.get('menuState');
    }
  },
  watch: {
    watchMenuState: {
     handler(val) {
      this.isCollapse = val;
      this.$emit('collapseChange', this.isCollapse);
     },
     deep: true,
     immediate: true
    }
  },
  methods: {
    collapseChange() {
      this.isCollapse = !this.isCollapse;
      // if(this.isCollapse){
      //   this.mClass = 'el-menu-coll'
      // }
      this.$emit('collapseChange', this.isCollapse);
    },
    // hover
    mouseenter() {
      setTimeout(() => {
        if (this.isCollapse) {
          let doms = document.body.getElementsByClassName('el-menu--vertical');
          for (var key = 0; key <= doms.length; key++) {
            if (doms[key] && doms[key].style.display === '') {
              let dom = doms[key].children[0];
              dom.style.maxWidth = document.body.clientWidth - doms[key].style.left.split('px')[0] + 'px';
            }
          }
        }
      }, 400);
    },
    see(vvv) {
      let JID = localStorage.getItem('__JID__');
      // 判断是否是ks
      if (vvv.res_url_ca) {
        if (vvv.res_url_ca.includes('/ks-www')) {
          let path = vvv.res_url_ca.split('/#')[1];
          if (this.$route.path === path) {
            return;
          }
          this.$router.push({ path });
          this.$emit('selectMenue', vvv);
        } else {
          location.href = vvv.res_url_ca;
        }
      } else {
        location.href = vvv.uri;
      }
    },
    get_menu_name(name) {
      // bug57416 【英文版】菜单栏，所有菜单都显示不全
      // let len = name.length;
      // if (len > 6) {
      //   return name.substring(0, 6) + '...';
      // } else {
        return name;
      // }
    },
    // 获取数据
    getMenueList() {
      if (this.data.reqType === 'post') {
        this.$http.post(this.data.Url, { JID: this.data.JID }, { emulateJSON: true })
          .then(res => {
            if (res.data.resultCode !== 'SUCCESS') {
              // 返回登录
              location.href = res.data.redirectUrl;
              localStorage.setItem('userInfo', '');
              localStorage.setItem('__JID__', '');
              return;
            }
			let lDataNew = res.data.payload;
			let leftDataCont = [];
			for (let v of lDataNew) {
			  if (v.positionVal != 'sys_home') {
			    leftDataCont.push(v);
			  }
			}
			console.log("resp.data0", resp.data.obj.childsList)
            lDataNew.forEach(parent => {
              parent.isSetFast = false;
             lDataNew.forEach(son => {
                if (parent.treeId === son.parentId) {
                  if (!parent.children) {
                    parent.children = [];
                  }
                  parent.children.push(son);
                }
              });
            });
            let arr = [];
            lDataNew.forEach((v, i) => {
              if (v.parentId === '1') {
                arr.push(v);
              }
            });
            this.leftMenuList = arr;
          });
      } else {
        this.$http
          .get(
            this.data.Url,
            {
              params: Object.assign({
                JID: this.data.JID
              })
            },
            { emulateJSON: true }
          ).then(resp => {
            if (resp === undefined || resp.data.obj === undefined) {
              location.href = location.origin;
              localStorage.setItem('userInfo', '');
              localStorage.setItem('__JID__', '');
              return;
            }
			let lDataNew = resp.data.obj.childsList;
			let leftDataCont = [];
			for (let v of lDataNew) {
			  if (v.positionVal != 'sys_home') {
			    leftDataCont.push(v);
			  }
			}
            this.leftMenuList = leftDataCont;
          });
      }
    }
  },
  mounted() {
    this.getMenueList();
    // ks
    var path = this.$route.path;
    var value = path && (path.includes('/ks') || path.includes('/preview/'));
    if (value) {
      this.$emit('selectMenue', value);
    }
    setTimeout(() => {
      // bug60460 菜单优化功能
      this.menuCollapseShowName = window.configs && window.configs.menuCollapseShowName || false;
      this.mClass = this.menuCollapseShowName == true ? 'el-menue-mine1 menuCollapseShowName':'el-menue-mine1';
    }, 300);
  }
};
</script>

<style lang='scss'>
.el-menue-mine1{
        background: #fafafa;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        border-right: 0;
        overflow: auto;
        overflow-x: hidden;
        .navigate{
            color: #303133;
            padding-left: 11px!important;
            span{
                padding-left: 9px;
                color: #727171!important;
                font-weight: 700;
            }
        }
        .el-menu-item.navigate.is-active{
            color: #303133;
            background: #fafafa;
        }
        .el-icon-qz-menu{
            font-size: 22px;
            color:  #303133;
        }
        .el-submenu__icon-arrow{
            display: none;
        }
        .threeLevelMenue{
          padding:0!important;
        }
        .threeLevelMenue span{
          padding: 0 25px 0 66px;
          display: inline-block;
          width: 100%;
          height: 100%;
          text-align: left;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .el-submenu__title:hover,.threeLevelMenue:hover{
          span{
            color:  #fff!important;
          }
        }
        .el-menu-item span {
            color: #727171;
        }
        .el-menu-item:focus{
            background: #fafafa;
        }
        .el-menu-item.is-active span {
            color: #fff;
        }
        .el-submenu__title,.el-menue-mine1 .el-menu-item{
            background: #fafafa;
        }
        .el-submenu:hover,.el-submenu__title:hover,.el-menu-item:hover {
          background: #1A90FD;
        }
        .firstLevelMenue .el-submenu__title span{
            padding-left: 6px;
            color: #727171;
            font-weight: 700;
        }
        .firstLevelMenue>.el-submenu__title span{
            padding-left: 6px;
            overflow: hidden;
            width: calc(100% - 24px);
            display: inline-block;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .secondLevelMenue>.el-submenu__title span{
            padding-left: 44px;
            display: inline-block;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 100%;
        }
        .firstLevelMenue.is-opened>.el-submenu__title span,.secondLevelMenue.is-opened>.el-submenu__title span {
            color: #1A90FD;
        }
        .el-menu{
            background: #fafafa;
        }
        .el-submenu__title{
            padding-left: 7px!important;
        }
        .el-menu-item.is-active{
          background: #1A90FD;
          color: #fff;
        }
}
 .el-menu-new-hover{
   // background: #fff;
	 display:flex;
	 justify-content: center;
	.hover_secondMenu_left{
			display:flex;
			 .child{
				   width:90px !important;
					 overflow: hidden;
					 white-space: nowrap;
					 text-overflow: ellipsis;
					 display:inline-block;
					 font-size:14px;
					 font-family:Microsoft YaHei;
					 font-weight:700;
					 height:32px;
           color:  #303133;
           padding-left: 15px;
					 line-height:32px
			 }
			 .jiantou{
					height:32px;
					line-height:32px
			 }
			 span {
				 font-size:14px;
				 font-family:Microsoft YaHei;
				 font-weight:400;
				 margin-right:4px;
		 }
	}
	 .hover_secondMenu_Right{
		  display:inline-block !important;
			float:left;
			width:320px;
			margin-left:20px;
			.hoverColor {
			  padding:0 8px;
			  border-left:1px solid #ddd;
				border-left-style:0.8;
			  font-size:14px;
			  font-family:Microsoft YaHei;
			  font-weight:400;
			  line-height:20px;
        color: #303133;
				min-width:75px;
        cursor: pointer;
				display:inline-block;
				text-align:center;
				margin:6px 0;
			}
      .hoverColor:hover {
        color: #1A90FD;
        cursor: pointer;
      }
			span:last-child {
			  border-right: none;
			} 
	 }
}
.hover_secondMenu {
  color: #303133;
  span:nth-child(1) {
    font-weight: 700;
  }
  span:nth-child(1):hover {
    cursor: default;
  }
  .hoverColor {
    padding: 0 10px;
    border-right: 2px solid #ddd;
  }
  
  span:last-child {
    border-right: none;
  }
}
// lcs
.el-menu-new-popper {
  max-height: 100%;
  overflow: auto;
  .el-menu {
    background: #fff;
    padding: 12px 5px;
  }
}
.menu-popup__hidden {
  display: none !important;
}
// bug60460 菜单折叠后展示一级菜单名称
.menuCollapseShowName{
  &.el-menu--collapse.el-menue-mine1{
    .firstLevelMenue>.el-submenu__title span{
      position: absolute;
      left: 0;
      top: 16px;
      height: 40px;
      width: 100%;
      visibility: visible;
      font-size: 12px;
      text-align: center;
      padding:0 4px;
    }
    .navigate {
      color: #303133;
      padding-left: 19px!important;
      text-align: center;
    }
    .el-submenu__title {
      height: 60px;
      line-height: 60px;
      padding: 0px!important;
      text-align: center;
      *{
        vertical-align: unset;
      }
    }
  } 
}
</style>
