<template>
  <div class="m-left-block fl lwh-sider waphide" center-sider="">
    <div class="user-block" style="width:150px;cursor:pointer">
      <img style="width:140px;height:160px"
        class="user-img"
        :onerror="errorImg"
        :src="user.headImg||''">
      <p class="user-name" style="margin-top: 10px;margin-bottom: -8px">
        {{user.nickname}}
      </p>
    </div>

    <ul class="m-left-list">
      <li v-for="(item, index) in menu" :key="index"  :class="{'current':item.active||item.show}">

        <a href="javascript:void(0)" style="text-decoration: none" @click="goState(item)"
          class="ng-binding"><span class="p-ico2" :class="item.icon" ></span>{{item.name}}</a>

        <div class="sub-list ng-scope" v-if="item.children" >
          <a v-for="subItem in item.children" :key="subItem.path" v-if="!subItem.hidden"
            @click="goState2(subItem, item)" :class="{'current':$route.path == subItem.path}" href="javascript:void(0)"
            class="ng-binding ng-scope">{{subItem.name}}</a>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import menu from './menu.js'
  export default {
    props: {
      user: {
        type: Object,
        default: {
          nickanme: ''
        }
      }
    },
    data() {
      return {
        exportLoading: false,
        menu: [] ,
        listLoading: false,
        groups: [],
        tableData: [],
        errorImg: 'this.src="' + require('../../../../assets/images/default-photo_hash88f70f5253.jpg') + '"'
      };
    },
    created(){
      let path = this.$route.path;
      this.menu = menu.map( v=>{
        v.active= path.indexOf( v.path ) >-1
        return v
      })
    },
    methods: {
      allUnactive( path ){
        for( let i in this.menu){
          let item = this.menu[i]
          if( item.path != path ){
            item.active = false
          }
          this.unActiveChild(path, this.menu[i].children)
        }
      },
      unActiveChild( path, children ){
        if(!children) return;
        for( let i in children){
          let item = children[i];
          item.active  = item.path == path;
        }
      },
      goState( item ){
        this.allUnactive(this.$route.path)
        if( item.children ){
          item.active = !item.active;
          if( item.active ){
            this.allUnactive( item.path )
            item.children[0].active = true
          }
        }else{
          this.goSubState(item);
        }
      },
      goState2(child, parent){
        parent.active = true;
        this.unActiveChild( child.path, parent.children);
        this.goSubState(child)
      },
      goSubState(item){
        if(item.path == this.$route.path) return;
        item.active = true;
        window.scrollTo({
             top: 0,
             behavior: 'smooth' // 平滑滚动效果
        });
        this.$router.push(item.path);
      }
    }
  }
</script>

<style>
  @import url("./index.css");
</style>

