<template>
  <div class="app-aside">
    <div class="user" v-if="showUser">
      <div class="user-avatar"><img :src="user.avatar" /></div>
      <div class="user-tools">
        <span><router-link to="/account/password">修改密码</router-link></span>
        <span>退出登录</span>
      </div>
    </div>
    <ul class="nav">
      <li v-for="(item, index) in datalist" :key="index" :class="genClasses(item)">
        <router-link :to="item.path">{{ item.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'AppAside',
  props: {
    menus: { type: Array, default: () => [] },
    showUser: { type: Boolean, default: true }
  },
  data() {
    return {
      defaultMenus: [
        { title: '考前摸底', icon: '', path: '/exam' },
        { title: '真题实战', icon: '', path: '/exam' },
        { title: '错题集合', icon: '', path: '/exam' },
        { title: '收藏试题', icon: '', path: '/exam' },
        { title: '必考考点', icon: '', path: '/exam' },
        { title: '考证课程', icon: '', path: '/course/learn' },
        { title: '意见反馈', icon: '', path: '/feedback' },
        { title: '联系客服', icon: '', path: '/contact' }
      ]
    }
  },
  computed: {
    datalist() {
      if (this.menus && this.menus.length) {
        return this.menus
      }
      return this.defaultMenus
    },
    user() {
      return this.$store.state.user
    }
  },
  methods: {
    genClasses(data) {
      const isActive = this.$route.fullPath.includes(data.path)
      return { 'is-active': isActive }
    }
  }
}
</script>

<style lang="scss">
.app-aside {
  width: 200px;
  background-color: #fff;

  .user {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
  }
  .user-avatar {
    width: 60px;
    height: 60px;
    background-color: #999;
    border-radius: 50%;
    overflow: hidden;
  }
  .user-tools {
    padding: 10px 0;
    span {
      color: #999;
      padding: 0 10px;
      cursor: pointer;
    }
  }

  .nav {
    padding: 30px 0;
    li {
      text-align: center;
      font-size: 16px;
      color: #666;
      a {
        display: block;
        padding: 16px 0;
      }
      &.is-active {
        color: #c01540;
        background-color: #fff4f7;
      }
    }
  }
}
</style>
