<template>
  <div class="full-box entrance-main" >
    <div class="menu-box">
      <div class="menu-left">
        <div :class="['menu-li','one',{isPathDisabled:pathDisabled[0]}]" @click="goToPath(0)">
          <div class="menu-icon"></div>
          <div class="menu-text">经济运行</div>
        </div>
        <div :class="['menu-li','two',{isPathDisabled:pathDisabled[1]}]" @click="goToPath(1)">
          <div class="menu-icon"></div>
          <div class="menu-text">专题分析</div>
        </div>
        <div :class="['menu-li','three',{isPathDisabled:pathDisabled[2]}]" @click="goToPath(2)">
          <div class="menu-icon"></div>
          <div class="menu-text">数据检索服务</div>
        </div>
        <div :class="['menu-li','four',{isPathDisabled:pathDisabled[3]}]" @click="goToPath(3)">
          <div class="menu-icon"></div>
          <div class="menu-text">报表管理</div>
        </div>
      </div>
      <div class="menu-right">
        <div style="width:calc( 100% - 0px);height: 100%;float: left">
          <div :class="['menu-li','five',{isPathDisabled:pathDisabled[4]}]" @click="goToPath(4,5)">
            <div class="menu-icon"></div>
            <div class="menu-text">指标管理</div>
          </div>
          <div :class="['menu-li','six',{isPathDisabled:pathDisabled[5]}]" @click="goToPath(5,10)">
            <div class="menu-icon"></div>
            <div class="menu-text">预警管理</div>
          </div>
          <div class="menu-li menu-li-rows">
            <div :class="['menuli-li','seven',{isPathDisabled:pathDisabled[6]}]" @click="goToPath(6,1)">
              <div class="menuli-li-icon"></div>
              <div class="menuli-li-text">档案管理</div>
            </div>
            <div :class="['menuli-li','eight',{isPathDisabled:pathDisabled[7]}]" @click="goToPath(7,7)">
              <div class="menuli-li-icon"></div>
              <div class="menuli-li-text">事务处理系统</div>
            </div>
          </div>
          <div class="menu-li menu-li-rows">
            <div :class="['menuli-li','nine',{isPathDisabled:pathDisabled[8]}]" @click="goToPath(8,8)">
              <div class="menuli-li-icon"></div>
              <div class="menuli-li-text">企业申报管理</div>
            </div>
            <div :class="['menuli-li','ten',{isPathDisabled:pathDisabled[9]}]" @click="goToPath(9)">
              <div class="menuli-li-icon"></div>
              <div class="menuli-li-text">后台系统管理</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'entrance',
    data () {
      return {
        pathList: ["economic","ztfxJjyx","dataService","reportManage","zbManage","yjManage","archivesManage","processSystemManage","applyManage","manageSystem"],
        pathListGet: ["economic","economic/ztfxJjyx","dataService","reportManage","economic/zbManage","economic/yjManage","synthetical/archivesManage","synthetical/processSystemManage","synthetical/applyManage","manageSystem"],
        pathDisabled: [false,false,false,false,false,false,false,false,false,false]
      }
    },
    created (){
      /**/
      let _this = this, menuObj = JSON.parse(sessionStorage.getItem("menuList")),isMenuEnabled = function (obj,code) {
        let bFlag = false;
        if(!_this.$Util.isEmpty(obj)){
          for (let [, ele] of obj.entries()) {
            bFlag = ele.code === code;
            if(bFlag)
              return true;
            if(!_this.$Util.isEmpty(ele.children)){
              bFlag = isMenuEnabled(ele.children,code);
            }
            if(bFlag)
              return true;
          }
        }
        return bFlag;
      };
      let _tempDisabled = [];
      for (let [index, ele] of _this.pathListGet.entries()){
        _tempDisabled.push(!isMenuEnabled(menuObj,ele));
      }
      _this.pathDisabled = _tempDisabled;
      /**/
      /*_this.init();*/
    },
    methods:{
      goToPath(index,tabId = 10){
        let _this = this, _path = _this.pathList[index], _isDisabled = _this.pathDisabled[index];
        if(!_isDisabled){
          _this.$router.push({ name: _path, params: { tab: tabId } });
        }
      },
      init(){
        debugger
        var str = 'asdfssaaasasasasaa';
        var json = {};
        for (var i = 0; i < str.length; i++) {
          if(!json[str.charAt(i)]){
            json[str.charAt(i)] = 1;
          }else{
            json[str.charAt(i)]++;
          }
        };
        var iMax = 0;
        var iIndex = '';
        for(var i in json){
          if(json[i]>iMax){
            iMax = json[i];
            iIndex = i;
          }
        }
        console.log('出现次数最多的是:'+iIndex+'出现'+iMax+'次');
      }
    }
  }
</script>
<style scoped>
  .menu-box{width:940px;height:500px;position:relative;top:calc(50% - 250px);left:calc(50% - 470px);}
  .menu-left{width:620px;height:100%;float:left;}
  .menu-left .menu-li{width:calc(50% - 10px);height:calc(50% - 5px);float:left;margin-right:10px;margin-bottom:10px;cursor:pointer;}
  .menu-left .menu-icon{width:100%;height:100px;margin:60px auto 5px;}
  .menu-left .menu-text{width:100%;line-height:30px;color:#fff;text-align:center;font-size:18px;}
  .menu-li.one .menu-icon{background:url(../assets/images/menu/icon1.png) no-repeat center;}
  .menu-li.two .menu-icon{background:url(../assets/images/menu/icon2.png) no-repeat center;}
  .menu-li.three .menu-icon{background:url(../assets/images/menu/icon3.png) no-repeat center;}
  .menu-li.four .menu-icon{background:url(../assets/images/menu/icon4.png) no-repeat center;}
  .menu-right{width:320px;height:100%;float:right;}
  .menu-right .menu-li{width:100%;height:calc(((100% - 30px) / 4) - 10px);margin-bottom:10px;padding-top: 10px;cursor:pointer;}
  .menu-right .menu-li.menu-li-rows{height:calc((100% - 30px) / 4);padding-top:0}
  .menu-right .menu-icon{width:100%;height:64px;margin:0px auto 5px;}
  .menu-right .menu-text{width:100%;line-height:24px;color:#fff;text-align:center;font-size:18px;}
  .menu-li.five .menu-icon{background:url(../assets/images/menu/icon5.png) no-repeat center;}
  .menu-right .menu-li.six .menu-icon{background:url(../assets/images/menu/icon6.png) no-repeat center;}
  .menu-right .menu-li.nine .menu-icon{background:url(../assets/images/menu/icon9.png) no-repeat center;}
  .menu-right .menuli-li{width:calc(50% - 5px);height:calc(100% - 15px);padding-top:15px;float:left;}
  .menu-right .menuli-li:first-child{margin-right:10px}
  .menu-right .menuli-li .menuli-li-icon{width:100%;height:64px;margin:0px auto 5px;}
  .menu-right .menuli-li.seven .menuli-li-icon{background:url(../assets/images/menu/icon8.png) no-repeat center;}
  .menu-right .menuli-li.eight .menuli-li-icon{background:url(../assets/images/menu/icon7.png) no-repeat center;}
  .menu-right .menuli-li.nine .menuli-li-icon{background:url(../assets/images/menu/icon9.png) no-repeat center;}
  .menu-right .menuli-li.ten .menuli-li-icon{background:url(../assets/images/menu/icon10.png) no-repeat center;}
  .menu-right .menuli-li .menuli-li-text{width:100%;line-height:24px;color:#fff;text-align:center;font-size:18px;}
  .one{background:rgba(78,158,132,0.9)}
  .one:hover{background:rgba(78,158,132,1)}
  .two{background:rgba(78,151,166,0.9)}
  .two:hover{background:rgba(78,151,166,1)}
  .three{background:rgba(55,113,152,0.9)}
  .three:hover{background:rgba(45,113,152,1)}
  .four{background:rgba(45,94,165,0.9)}
  .four:hover{background:rgba(45,94,165,1)}
  .five{background:rgba(133,105,46,.9)}
  .five:hover{background:rgba(133,105,46,1)}
  .six{background:rgba(71,146,119,.9)}
  .six:hover{background:rgba(71,146,119,1)}
  .seven{background:rgba(68,114,64,.9)}
  .seven:hover{background:rgba(68,114,64,1)}
  .eight{background:rgba(93,125,64,.9)}
  .eight:hover{background:rgba(93,125,64,1)}
  .nine{background:rgba(57,72,175,.9)}
  .nine:hover{background:rgba(57,72,175,1)}
  .ten{background:rgba(72,91,220,.9)}
  .ten:hover{background:rgba(72,91,220,1)}
  .entrance-main .isPathDisabled{background: rgba(100,100,100,0.8);cursor: not-allowed;opacity: 0.5;}
  .entrance-main .isPathDisabled:hover{background: rgba(100,100,100,0.8);}

  .cabin{width: 100px;height: 100%;float: right;}
  .cabin>.fourteen{width: 100%;height: calc(100% - 10px);background: rgba(69,141,248,1);}
  .menu-text-cabin{color:#fff;text-align:center;font-size:22px;width: 22px;font-size: 22px;letter-spacing: 22px;margin: 0 auto;margin-top: 26px}
</style>