<!--  -->
<template>
<div class="aside">
  <div class="aside-list">
    <!-- <div class="aside-item">
      <div :class="{active:activeIdx === -1}" @click="go(-1,'/')"><img :src="require('@/assets/img/01jk.png')" >首页</div>
      <div @click="go(0,'/message')" :class="{active:activeIdx === 0}">消息管理</div>
      <div @click="go(1,'/user-analysis')" :class="{active:activeIdx === 1}">数据统计</div>
    </div> -->
    <div class="aside-item">
      <div><img :src="require('@/assets/img/02fb.png')">工作管理</div>
      <!-- <div @click="go(2,'/information')" :class="{active:activeIdx === 2}">资讯管理</div> -->
      <!-- <div @click="go(3,'/display')" :class="{active:activeIdx === 3}">展示管理</div> -->
      <div @click="go(4,'/cultural-relic')" :class="{active:activeIdx === 4}">文物库</div>
      <div @click="go(11,'/scene')" :class="{active:activeIdx === 11}">场景管理</div>
      <div @click="go(12,'/video')" :class="{active:activeIdx === 12}">视频管理</div>
      <!-- <div @click="go(5,'/questionnaire')" :class="{active:activeIdx === 5}">问卷管理</div> -->

    </div>
    <div class="aside-item" >
      <div><img :src="require('@/assets/img/03mg.png')">系统管理</div>
      <div @click="go(6,'/user')" :class="{active:activeIdx === 6}">用户管理</div>
      <div @click="go(7,'/work-log')" :class="{active:activeIdx === 7}">工作日志</div>
      <div @click="go(8,'/modify')" :class="{active:activeIdx === 8}">密码修改</div>
    </div>
    <!-- <div class="aside-item" >
      <div><img :src="require('@/assets/img/04fb.png')">高级管理</div>
      <div @click="go(9,'/role')" :class="{active:activeIdx === 9}">角色管理</div>
      <div @click="go(10,'/device')" :class="{active:activeIdx === 10}">设备管理</div>
    </div> -->
  </div>
</div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      // activeIdx: 0
    }
  },
  // 监听属性 类似于data概念
  computed: {
    activeIdx: {
      get: function () {
        return this.$route.meta.index
      },
      set: function () {
      }
    }
  },
  // 监控data中的数据变化
  watch: {

  },
  // 方法集合
  methods: {
    go (id, url) {
      this.activeIdx = this.$route.meta.index
      this.$router.push(url)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  }

}
</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: #0B4362;
  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: #0B4362;
  border-radius: 80px;
  position: relative;
  color: #fff!important;
}
.aside-item .active::after{
  content: '';
  width: 40px;
  min-height: 40px;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  background:url('~@/assets/img/icon2s.png') no-repeat center center!important;
}
</style>
