<template>
  <div id="sidebar" class="scrollbar-box">
      <div class="for-max-sidebar-box"
           :ref="item.path"
           v-if="!item.hidden"
           v-for="(item, index) in sidebarRouters"
           :key="item.path  + index">
          <div class="for-big-sidebar-box" :class="item.path == activeMenu?'for-big-sidebar-box-check':''"
               @click="goPath(item)">
              <svg-icon :icon-class="item.meta.icon"/>
              <p>{{item.meta.title}}</p>
              <p v-if="item.redirect" :class="item.path == lookPath?'el-icon-arrow-down':'el-icon-arrow-right'"></p>
          </div>
            <p class="for-big-sidebar-p" :class="(item.path+'/'+minItem.path) == activeMenu?'for-big-sidebar-p-check':''"
               v-if="item.path == lookPath"
               @click="goPath(item,minItem)"
               v-for="(minItem, minIndex) in item.children"
               :key="minItem.path  + minIndex">{{minItem.meta.title}}</p>
      </div>
      <p style="height:30px;"></p>
  </div>
</template>

<script>
  import { mapGetters, mapState } from "vuex";
  export default {
    name: 'sidebar',
    computed: {
      ...mapState(["settings"]),
      ...mapGetters(["sidebarRouters", "sidebar","avatar","name"]),
      activeMenu() {
        const route = this.$route;
        const { meta, path } = route;
        if (meta.activeMenu) {
          return meta.activeMenu;
        }
        this.$parent.setTagsType(path);
        return path;
      },
      setting: {
        get() {
          return this.$store.state.settings.showSettings
        },
        set(val) {
          this.$store.dispatch('settings/changeSetting', {
            key: 'showSettings',
            value: val
          })
        }
      },
    },
    data() {
      return {
        lookPath:"",
        tableTimerOne:null,
        tableTimerTwo:null,
        numOne:null,
        numTwo:null,
      }
    },
    methods: {
      goPath(item,minItem){
        if(minItem){
          let path = item.path+'/'+minItem.path
          this.$router.push({ path: path });
        }else{
          if(item.redirect){
            if(this.lookPath == item.path){
              //相同目录
              this.$set(this,'numTwo',this.accMul(item.children.length,50));
              this.heightChangeTwo(item.path);
            }else{
              //不同目录
              if(this.lookPath == ''){
                //第一次
                this.$set(this,'numOne',this.accMul(item.children.length,50));
                this.heightChangeOne(item.path);
              }else{
                this.$set(this,'numTwo',this.numOne);
                this.$set(this,'numOne',this.accMul(item.children.length,50));
                this.heightChangeTwo(this.lookPath);
                this.heightChangeOne(item.path);
                //非第一次
              }
            }
            this.$set(this,'lookPath',this.lookPath !== item.path ? item.path : '');
          }else{
            this.$router.push({ path: item.path });
          }
        }
      },
      heightChangeOne(item){
        let num = 50;
        this.tableTimerOne = window.setInterval(() => {
          if(num < this.numOne){
            num = num + 6
            this.$refs[item][0].style.height = num + 'px'
          }else{
            this.$refs[item][0].style.height = this.numOne + 'px'
            window.clearInterval(this.tableTimerOne)
          }
        }, 1);
      },
      heightChangeTwo(item){
        this.tableTimerTwo = window.setInterval(() => {
          if(this.numTwo >50){
            this.numTwo = this.numTwo - 6
            this.$refs[item][0].style.height = this.numTwo + 'px'
          }else{
            this.$refs[item][0].style.height = '50px'
            window.clearInterval(this.tableTimerTwo)
          }
        }, 1);
      },
      //乘法
      accMul(arg1,arg2){
        var m=0,s1=arg1.toString(),s2=arg2.toString();
        try{m+=s1.split(".")[1].length}catch(e){}
        try{m+=s2.split(".")[1].length}catch(e){}
        return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
      },
    }
  }
</script>

<style scoped lang="scss">
  #sidebar{
    width:300px;
    height:100%;
    margin: 5px 10px 0 0;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 0 0 8px 1px rgba(0,0,0,.1);
    .for-max-sidebar-box{
      height: 50px;
      overflow: hidden;
      .for-big-sidebar-box{
        margin:10px 30px 0 20px;
        height:40px;
        line-height:40px;
        cursor: pointer;
        display: flex;
        border-radius:10px;
        font-size:16px;
        font-weight:700;
        svg{
          width:16px;
          height:16px;
          margin:11px 10px 0 20px;
          fill:#0045af;
        }
        p:nth-child(2){
          flex:1;
        }
        p:nth-child(3){
          margin:0 20px 0 10px;
          line-height: 40px;
          font-size:16px;
        }
      }
      .for-big-sidebar-box:hover{
        background: #0045af;
        color:#fff;
        svg{
          fill:#fff;
        }
      }
      .for-big-sidebar-box-check{
        background: #0045af;
        color:#fff;
        svg{
          fill:#fff;
        }
      }
      .for-big-sidebar-p{
        padding-left:60px;
        margin:10px 30px 0 20px;
        height:40px;
        line-height:40px;
        cursor: pointer;
        border-radius:10px;
        font-size:14px;
        font-weight:700;
      }
      .for-big-sidebar-p:hover{
        background: #0045af;
        color:#fff;
      }
      .for-big-sidebar-p-check{
        background: #0045af;
        color:#fff;
      }


    }
  }
</style>
