<template>
  <div class="sidebar">
    <ul class="sidebar-menu">
      <li v-if="isLoggedIn">
        <router-link to="/console" :class="['menu-item', { active: $route.name === 'Console' }]">
          <span class="menu-icon">■</span>
          <span class="menu-text">控制台</span>
        </router-link>
      </li>
      <li v-if="isLoggedIn">
        <router-link to="/log" :class="['menu-item', { active: $route.name === 'Log' }]">
          <span class="menu-icon">▤</span>
          <span class="menu-text">运行日志</span>
        </router-link>
      </li>
      <li v-if="isLoggedIn">
        <router-link to="/delivery" :class="['menu-item', { active: $route.name === 'Delivery' }]">
          <span class="menu-icon">▦</span>
          <span class="menu-text">投递管理</span>
        </router-link>
      </li>
      <li v-if="isLoggedIn">
        <router-link to="/invite" :class="['menu-item', { active: $route.name === 'Invite' }]">
          <span class="menu-icon">◈</span>
          <span class="menu-text">推广邀请</span>
        </router-link>
      </li>
      <li v-if="isLoggedIn">
        <router-link to="/feedback" :class="['menu-item', { active: $route.name === 'Feedback' }]">
          <span class="menu-icon">◉</span>
          <span class="menu-text">意见反馈</span>
        </router-link>
      </li>
      <li v-if="isLoggedIn">
        <router-link to="/purchase" :class="['menu-item', { active: $route.name === 'Purchase' }]">
          <span class="menu-icon">◑</span>
          <span class="menu-text">如何购买</span>
        </router-link>
      </li>

      <li v-if="!isLoggedIn">
        <router-link to="/login" :class="['menu-item', { active: $route.name === 'Login' }]">
          <span class="menu-icon">►</span>
          <span class="menu-text">用户登录</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'Sidebar',
  computed: {
    ...mapState('auth', ['isLoggedIn'])
  }
};
</script>

<style lang="less" scoped>
.menu-item {
  display: block;
  text-decoration: none;
  color: inherit;

  &.router-link-active,
  &.active {
    background-color: #4CAF50;
    color: #fff;
  }
}
</style>

<style lang="less" scoped>
// 样式已经在全局 CSS 中定义</style>
