<template>
  <div class="menuList-wrap" id="elAside">
    <!-- :style="'height:'+(heightLeftMenu)+'px'" -->
    <transition name="el-fade-in">
      <div class="project-title iconfont iconmengshichangzerenzhi"><span v-show="isShowText" style="margin-left: 8px;">粮食安全区长责任制考核</span></div>
    </transition>
    <div id="siderAccountability">
      <el-scrollbar class="live-scrollbar">
        <div @click="switcherMenus()" class="switcher-wrap1" v-show="!isShowText" >
            <i class="el-icon-d-arrow-right RightP"></i>
        </div>
        <el-menu router :default-active="$route.path" class="el-menu-vertical-demo" background-color="#F6F7F9"
          text-color="#666666" active-text-color="#fff" :show-timeout="100">
          <Menu-item :routes="routes" v-if="!switchMenu"></Menu-item>
        </el-menu>
        <div class="switcher-wrap" v-show="isShowText" >
          <span class="pubIMg LeftP" @click="switcherMenus()"></span>
          <!-- <img src=" @/aseets/wisdom_images.shou.png" alt="" style="width: 30px;height:20px; border:1px solid red;" > -->
            <!-- <i class="el-icon-d-arrow-left LeftP"></i> -->
        </div>
      </el-scrollbar>
    </div>
  </div> 
</template>

<script>
  import MenuItem from "@/components/Layout/menuList/menuItem"
  import { mapGetters } from 'vuex'
  import $ from 'jquery'
  export default {
    name: "menuList",
    components: {
      MenuItem,
    },
    data() {
      return {
        // heightLeftMenu: document.documentElement.clientHeight-183,
        isCollapse: false,
        isShowText: true,
        switchMenu: false
       }
    },
    created() { 
     },
    mounted() {
      this.update();
      var self = this;
      window.onresize = function() {
        var timer;
        if (timer) return;
        var timer = setTimeout(() => {
          self.update();
          timer = null;
        }, 200);
      };
    },
    computed: {
      ...mapGetters([
        'index'
      ]),
      routes() {
        // 拿到业务管理数据
        let leftMenuList = JSON.parse(sessionStorage.getItem('leftMenuList'))
        leftMenuList.map(item => {
          if(item.resourceCode == 'RM1001003020') {//盟市长责任制
            leftMenuList =  item.children
          }
        })
        return leftMenuList
      },
    },
    watch: {
      // heightLeftMenu(val) {
      //   this.heightLeftMenu=val-183
      // }
    },
    methods: {
      switcherMenus() { 
        if (this.isCollapse) {
          this.isCollapse = false;
          this.isShowText = true;
          this.switchMenu = false;
          // $('#elAside,.project-title').animate({ width: '249px' });
          $('#sider').animate({'width': '16.66667%'})
          $('#main').animate({'width': '83.33333%'})
          $('.project-title').css('padding-left','25px')
        } else {
          this.switchMenu = true;
          this.isCollapse = true;
          this.isShowText = false;
          // $('#elAside,.project-title').animate({ width: '34px' });
          $('#sider').animate({'width': '1.66667%'})
          $('#main').animate({'width': '97.3333%'})
          $('.project-title').css('padding-left','10px')
        }
      },
      update() {
        var clientHeight =
          document.documentElement.clientHeight ||
          document.body.clientHeight ||
          document.body.offsetHeight;
        var height = clientHeight - 228;
        this.$nextTick(() => {
          let siderAccountability = document.querySelector("#siderAccountability");
          if (siderAccountability) siderAccountability.style.height = height + "px";
        });
      }
    }
  }
</script>

<style scoped>
  #siderAccountability {
    overflow: hidden;
  }
  .RightP{
    cursor: pointer;
  }
  .LeftP{
    position: absolute; bottom: 16%; left: 92%; color: #635b5b; cursor: pointer; z-index: 100;
  }
  .menuList-wrap {
    background: #f4f5f8 !important;
    /* height: 100vh;
    height: calc(100vh - 60px); */
  }

  .live-scrollbar {
    height: 100%;
  }

  /*   隐藏 横向滚动条*/
  .el-scrollbar /deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .el-scrollbar__wrap {
    overflow: scroll;
    height: 100%;
    background: #f4f5f8 !important;
  }

  .iconfont {
    padding-right: 3px;
  }

  .project-title {
    color: #fff;
    background: #2258a5;
    line-height: 45px;
    height: 45px;
    /* padding-left: 6px; */
    padding-left: 25px;
    font-size: 14px;
  }

  .indexCss {
    margin-right: 5px;
  }
  .switcher-wrap1{
    padding: 5px;
    background-color: #3a6dc7;
    color: #fff;
    text-align: center;
  }
  .switcher-wrap {
    padding: 5px;
    /* background-color: #3a6dc7; */
    color: #fff;
  }

  .siderCsss {
    width: 1%;
  }

  .mainCsss {
    width: 90%;
  }
  .pubIMg{
    width: 16px;
    height: 48px;
    background: url("../../../assets/wisdom_images/shou.png")no-repeat; 
    display: inline-block;
    /* background: url(./aseets/wisdom_images.shou.png) */
  }
  .el-menu{
    border-right: none;
  }

</style>