<template>
  <div class="menuList-wrap" id="elAside">
    <el-scrollbar class="live-scrollbar">
        <transition name="el-fade-in">
            <div class="project-title"><i class="iconfont icon-shouye indexCss">&#xe60c;</i><span v-show="isShowText">粮食财务管理子系统</span></div>
        </transition>
       <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 @click="switcherMenus()" class="switcher-wrap" v-show="isShowText" >
         <span class="pubIMg LeftP"></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> 
</template>

<script>
  import MenuItem from "@/components/Layout/menuList/menuItem"
  import { mapGetters } from 'vuex'
  import $ from 'jquery'
  export default {
    name: "menuList",
    components: {
      MenuItem,
    },
    data() {
      return {
        isCollapse: false,
        isShowText: true,
        switchMenu: false
       }
    },
    created() { 
     },
    computed: {
      ...mapGetters([
        'index'
      ]),
      routes() {
        // 拿到业务管理数据
        // const myroutes = JSON.parse(sessionStorage.getItem('leftMenuList'))
        // console.log(1111)
        // console.log(myroutes)
        // return myroutes 

        // -----------------------------------------------------------------------------------------

        // 拿到业务管理数据
        // const myroutes = JSON.parse(sessionStorage.getItem('xzdata')).children[1].children
        // // console.log(1111)
        // console.log(myroutes)
        // return myroutes

        const leftMenuList = JSON.parse(sessionStorage.getItem('leftMenuList'))
        // const myroutes = JSON.parse(sessionStorage.getItem('xzdata')).children[0].children
        return leftMenuList

        // -----------------------------------------------------------------------------------------

      },
    },
    methods: {
      switcherMenus() { 
        if (this.isCollapse) {
          this.isCollapse = false;
          this.isShowText = true;
          this.switchMenu = false;
          $('#elAside,.project-title').animate({ width: '249px' });
          $('#sider').css('width', ' 16.66667%')
          $('#main').css('width', '83.33333%')
        } else {
          this.switchMenu = true;
          this.isCollapse = true;
          this.isShowText = false;
          $('#elAside,.project-title').animate({ width: '34px' });
          $('#sider').css('width', ' 1.66667%')
          $('#main').css('width', '97.3333%')
        }
      },
    }
  }
</script>

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

  .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;
  }

  .content-wrap {
    /*width: 1200px;*/
    /*margin: 0 auto;*/
  }

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

  .indexCss {
    margin-right: 5px;
  }
  .switcher-wrap1{
    padding: 5px;
    background-color: #3a6dc7;
    color: #fff;
  }
  .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) */
  }

</style>