<!--  -->
<template>
  <div class="aside">
    <div class="aside-list">
      <div class="aside-item" v-for="(item,i) in menu" :key="i">
        <div :class="{active:belong==item.id}"><i class="iconfont" :class="item.icon"></i>{{item.name}}</div>
        <div @click="goto(sub)" v-for="(sub,idx) in item.routes" :key="idx" :class="{activeFont:activeIdx === sub.key}">
          {{sub.name}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { routes, main } from '@/configue/menu'

export default {
  components: {},
  data() {
    return {
      routes,
      main,
      menu: [],
      tmpRoute: []
    }
  },
  computed: {
    activeIdx: {
      get: function () {
        return this.$route.meta.index
      },
      set: function () {
      }
    },
    belong: {
      get: function () {
        return this.$route.meta.belong
      },
      set: function () {
      }
    }
  },
  watch: {
    'activeIdx': {
      immediate: true,
      handler: function (newVal) {
        console.log(newVal, 'activeIdx');
        if (this.tmpRoute.length > 0) {
          let temp = this.tmpRoute.filter(item => {
            return item.key == newVal
          })

          this.$store.commit("SetActiveMenu", temp[0] || this.tmpRoute[0]);
        }
      }
    },
    tmpRoute(newVal, oldVal) {
      console.log(newVal, oldVal, 'newVal,oldVal');
      if (oldVal.length <= 0 && newVal[0].key != "museum") {
        this.goto(newVal[0], true)
      }
    }
  },
  methods: {
    goto(item, replace = null) {
      let path = { path: `/${item.key}${item.param ? `/${item.param.map(tt => tt.default).join('/')}` : ''}` }
      replace ? this.$router.replace(path) : this.$router.push(path)
    },
    async getResource() {
      let result = await this.$http({
        method: 'GET',
        url: 'sys/resource/getTreePermissions'
      })

      this.tmpRoute = routes.filter(item => {
        let tmp = ''
        result.data.forEach(sub => {
          if (item.name == sub.name) {
            sub.authority = item.authority
            tmp = sub
          }
        })

        return tmp ? Object.assign(item, tmp) : tmp
      });

      let temp = this.tmpRoute.filter(item => {
        return item.key == this.activeIdx
      })

      console.log(temp, 'temp');

      this.$store.commit("SetActiveMenu", temp[0] || this.tmpRoute[0]);


      this.menu = main.filter(item => {
        let route = []
        this.tmpRoute.forEach((sub) => {
          if (item.key == sub.type) {
            route.push(sub)
          }
        })
        item.routes = route
        return route.length > 0 && item
      })

    }
  },
  created() {

  },
  mounted() {
    this.getResource()
  }
}
</script>

<style scoped>
.aside-list {
  width: 100%;
  padding-top: 1.5rem;
}

.aside-item {
  padding: .625rem 0;
  text-align: center;
}


.aside-item:last-child {
  border-bottom: none;
}

.aside-item div {
  height: 2.875rem;
  line-height: 2.875rem;
  margin: .0625rem 0;
  width: 89%;
  padding-left: 5.7rem;
  font-size: .875rem;
  cursor: pointer;
  color: #707070;
  text-align: left;
}

.aside-item div:not(:first-child):hover {
  color: #B63C25;
}

.aside-item div:first-child {
  padding-left: 3.81rem;
  display: flex;
  align-items: center;
  color: #532F1C;
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 0.2rem;
}

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

.aside-item .iconfont {
  color: #532F1C;
  margin-right: .8125rem;
}

.aside-item .active {
  background-color: #B63C25;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  color: #F2ECDE !important;
}

.aside-item .active .iconfont {
  color: #F2ECDE;
}


.aside-item .activeFont {
  color: #B63C25;
}
</style>
