<template>
  <ul class="sidebar-menu">
    <template v-for="sides in Menus">
      <li v-if="sides.children && sides.children.length > 0" class="treeview">
        <a href="#">
          <i :class="sides.resSicon"></i>
          <span class="pull-right-container">
              <i class="fa fa-angle-left fa-fw pull-right"></i>
            {{sides.resName}}
          </span>
        </a>
        <ul class="treeview-menu">
          <template v-for="side in sides.children">
            <template>
              <li v-if="side.resCode == 'MapMonitor'">
                <router-link :to="{name: side.resCode, params: {uId: 'uId'}}"  @click.native="toggleMenu(side)">
                  <i class="fa fa-circle-o"></i> {{side.resName}}
                </router-link>
              </li>
              <li v-else>
                <router-link :to="{name: side.resCode}" @click.native="toggleMenu(side  )">
                  <i class="fa fa-circle-o"></i> {{side.resName}}
                </router-link>
              </li>
            </template>
          </template>
        </ul>
      </li>
      <li v-if="sides.children && sides.children.length == 0" class="pageLink">
        <router-link :to="{name: sides.resCode, routerLinkActive: 'active'}" @click.native="toggleMenu(sides)">
          <i class="fa fa-home"></i>
          <span class="page">{{sides.resName}}</span>
        </router-link>
      </li>
    </template>
  </ul>
</template>
<script>
  import { mapState } from 'vuex'
  export default {
    name: 'SidebarName',
    mounted () {
      this.$nextTick(() => {
        setTimeout(() => {
          let menu = JSON.parse(localStorage.getItem('powerMenu'))
          if (menu !== null && menu !== '' && menu !== undefined) {
            this.powerMenus = menu
          } else {
            this.powerMenus = this.powerMenu
          }
          this.index = !sessionStorage.getItem('routingIndex') ? 0 : sessionStorage.getItem('routingIndex')
          this.Menus = this.powerMenus.children[Number(this.index)].children
        }, 200)
      })
    },
    data () {
      return {
        Menus: [
          {
            'id': 1,
            'resCode': 'Home',
            'resName': '首页'
          }
        ],
        index: null
      }
    },
    methods: {
      toggleMenu (obj) {
        let sessionMenus = !sessionStorage.getItem('sessionMenus') ? sessionMenus = [] : JSON.parse(sessionStorage.getItem('sessionMenus'))
        if (Number(sessionMenus.length) === 0) {
          sessionMenus.push(obj)
        } else {
          let isAdd = false
          for (let i in sessionMenus) {
            if (sessionMenus[i].resName.indexOf(obj.resName) >= 0) {
              isAdd = true
            }
          }
          if (!isAdd) {
            if (Number(sessionMenus.length) < 5) {
              sessionMenus.push(obj)
            } else {
              sessionMenus.splice(0, 1)
              sessionMenus.push(obj)
            }
          }
        }
        sessionStorage.setItem('sessionMenus', JSON.stringify(sessionMenus))
        this.$store.dispatch('setSessionMenus', JSON.stringify(sessionMenus))
      },
      clearMenu () {}
    },
    computed: {
      ...mapState([
        'powerMenu'
      ])
    },
    watch: {
      '$route' (val, old) {
        setTimeout(() => {
          if (Number(sessionStorage.getItem('routingIndex')) !== this.index) {
            this.$nextTick(() => {
              this.index = Number(sessionStorage.getItem('routingIndex'))
              this.Menus = this.powerMenus.children[this.index].children
            })
          }
        })
      }
    }
  }
</script>
<style>
  /* override default */
  .sidebar-menu > li > a {
    padding: 12px 15px 12px 15px;
  }

  .sidebar-menu li.active > a > .fa-angle-left, .sidebar-menu li.active > a > .pull-right-container > .fa-angle-left {
    animation-name: rotate;
    animation-duration: .2s;
    animation-fill-mode: forwards;
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(-90deg);
    }
  }
</style>
