<!--  -->
<template>
<div class="aside">
  <div class="aside-list">
    <div class="aside-item" v-for="(item,i) in aside" :key="i">
      <div :class="{active:item.id&&activeIdx === -1}" @click="item.id&&go(item,item)"><img :src="require(`@/assets/img/${item.icon}.png`)" >{{item.name}}</div>
      <div v-for="(sub,idx) in item.subItem" :key="idx" @click="go(sub,item)" :class="{active:activeIdx === sub.id}">{{sub.name}}</div>
    </div>
  </div>
</div>
</template>

<script>
let aside = [{
  name: '首页',
  id: -1,
  icon: '01jk',
  subItem: [{
    name: '数据统计',
    id: 1,
    url: '/user-analysis'
  }],
  url: '/'
},
{
  name: '工作管理',
  icon: '02fb',
  subItem: [{
    name: '轮播管理',
    id: 2,
    url: '/information'
  }, {
    name: '展示管理',
    id: 3,
    url: '/display'
  }, {
    name: '文物库',
    id: 4,
    url: '/cultural-relic'
  }]
},
{
  name: '系统管理',
  icon: '03mg',
  subItem: [{
    name: '用户管理',
    id: 6,
    url: '/user'
  }, {
    name: '工作日志',
    id: 7,
    url: '/work-log'
  }, {
    name: '修改密码',
    id: 8,
    url: '/modify'
  }]
},
{
  name: '高级管理',
  icon: '04fb',
  subItem: [{
    name: '角色管理',
    id: 9,
    url: '/role'
  }]
}]
export default {
  components: {},
  data () {
    return {
      aside
    }
  },
  computed: {
    activeIdx: {
      get: function () {
        return this.$route.meta.index
      },
      set: function () {
      }
    }
  },
  methods: {
    getAsideItem (name, parant) {
      let tmp = parant.children && parant.children.find(sub => {
        return name === sub.name
      })
      let authoritys = {}
      tmp.children.forEach(item => {
        authoritys[item.name] = item.authority
      })
      tmp.authoritys = authoritys
      this.currentAside = tmp
    },
    go (item, parant) {
      this.activeIdx = this.$route.meta.index
      window.localStorage.setItem('currentItem', JSON.stringify(parant))
      // this.getAsideItem(item.name, parant)
      this.$router.push(item.url)
    }
  },
  mounted () {
    let start = () => {
      let menu = JSON.parse(window.localStorage.getItem('menu'))
      let temp = []
      menu && menu.forEach(item => {
        this.aside.forEach(sub => {
          if (item.name === sub.name) {
            sub['authority'] = item['authority']
            sub['children'] = item['children']
            if (item['authority']) {
              temp.push(sub)
            }
          }
        })
      })

      temp.forEach(item => {
        item.children = item.children.filter(sub => {
          if (sub['authority']) {
            return sub
          }
        })
        item.subItem = item.subItem.filter(sub => {
          let tmp = ''
          item.children.forEach(son => {
            if (sub.name === son.name) {
              tmp = son
            }
          })
          if (tmp) {
            return tmp
          }
        })
      })

      this.aside = temp

      // let curi = ''
      let pp = ''
      this.aside.forEach(item => {
        item.subItem.forEach(sub => {
          if (this.$route.path === sub.url) {
            pp = item
          }
        })
      })
      // (curi && pp) && this.getAsideItem(curi.name, pp)
      window.localStorage.setItem('currentItem', JSON.stringify(pp))
      let initPage = this.aside[0]
      if (initPage.subItem && !initPage.id) {
        this.$router.replace({path: initPage.subItem[0].url})
      }
    }

    this.$nextTick(() => {
      setTimeout(() => {
        start()
      })
    })
  }

}
</script>

<style scoped>
.aside-list{
  width: 100%;

}
.aside-item {
  padding: .625rem 0;
}
.aside-item:last-child{
  border-bottom:none;
}

.aside-item div{
  height: 2.75rem;
  line-height: 2.75rem;
  margin: .0625rem auto;
  width: 80%;
  padding-left: 3.4375rem;
  cursor: pointer;
  color: rgba(0, 0, 0, 1);
}
.aside-item div:not(:first-child):hover{
  background-color: #532f1c;
  border-radius: 80px;
  color: #fff;
}

.aside-item div:first-child{
  padding-left: 1.8125rem;
  display: flex;
  align-items: center;
  color: #888888;
  font-size: .75rem;
}

.aside-item div:first-child img{
  width: 1.1rem;
  height: 1.1rem;
  margin-right: .625rem;
}

.aside-item .active{
  background-color: #532f1c;
  border-radius: 80px;
  color: #fff!important;
}
</style>
