<template>
  <el-container class="layout">
    <el-header class="layout-header">
      <div class="main-title">博客API管理后台</div>
      <div class="nav-btns-right">
        <el-dropdown @command="dropdownMenuCommand">
          <el-button link type="primary">
            <UserFilled style="width: 18px" />
            {{ realname }}
            <ArrowDown style="width: 18px"/>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="home">返回首页</el-dropdown-item>
              <el-dropdown-item command="changePassword">修改密码</el-dropdown-item>
              <el-dropdown-item command="logout" divided>退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-active="activeMenuItem" :default-openeds="openMenuNames" style="height: 100%;">
          <el-sub-menu v-for="menu in menus" :key="menu.name" :index="menu.name">
            <template #title>
              <component :is="menu.icon" style="width: 18px; margin-right: 5px;"></component>
              <span>{{menu.title}}</span>
            </template>
            <el-menu-item v-for="(subItem,subIndex) in menu.child" :key="subIndex" :index="subItem.path" @click="openMenu(subItem.path)">
              {{subItem.title}}
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-main class="layout-main">
        <div class="layout-breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="(item,index) in $store.state.breadcrumb" :key="index">{{item}}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="layout-content">
          <router-view class="main-view"></router-view>
        </div>
        <div class="layout-copy">2016-{{currentYear}} &copy; colorfulsweet 上次更新：{{ version }}</div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import { ElContainer, ElHeader, ElMain, ElAside, ElDropdown, ElDropdownMenu, ElDropdownItem, ElButton, ElMenu, ElSubMenu, ElMenuItem, ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
import menus from '../config/menu'

@Options({
  name: 'Home',
  components: { ElContainer, ElHeader, ElMain, ElAside, ElDropdown, ElDropdownMenu, ElDropdownItem, ElButton, ElMenu, ElSubMenu, ElMenuItem, ElBreadcrumb, ElBreadcrumbItem }
})
export default class Home extends Vue{
  public version?: string = process.env.VERSION
  currentYear = new Date().getFullYear()
  // 菜单项
  menus = menus
  activeMenuItem: string | null = null
  openMenuNames: string[] = []
  get realname(): null | string { // 当前用户的显示名称
    return this.$store.state.loginInfo.userInfo
      ? this.$store.state.loginInfo.userInfo.realname : null
  }
  async created(): Promise<void> {
    this.activeMenuItem = this.$route.path
    if(this.activeMenuItem) {
      let result = /^\/(.*)\//.exec(this.activeMenuItem)
      if(result) {
        this.openMenuNames.push(result[1])
      }
    }
    if(!this.$store.state.loginInfo.token) {
      this.$router.push('/login')
      return
    } 
    const data = await this.$http.post<{token: string}, any>('/api/v1/common/verifyToken', {token: this.$store.state.loginInfo.token})
    if(data.status) {
      // 如果是已过期的token 服务端会签发新的token
      this.$store.commit('login', {token: data.newToken || this.$store.state.loginInfo.token, userInfo: data.userInfo})
    } else {
      this.$router.push('/login')
    }
  }
  dropdownMenuCommand(command: string): void {
    switch(command) {
      case 'home': // 返回首页
        this.$router.push('/')
        break
      case 'changePassword': // 修改密码
        // TODO
        break
      case 'logout': //注销
        this.$store.commit('logout')
        this.$router.push('/login')
        break
    }
  }
  openMenu(path: string): void {
    this.$router.push(path)
  }
}
</script>