<template>
  <aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
    <div class="site-sidebar__inner">
      <el-menu
        :default-active="$route.name"
        :collapseTransition="false"
        class="site-sidebar__menu">
        <el-menu-item index="mine" @click="$router.push({ path: '/mine' })">
          <icon-svg name="admin" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">个人中心</span>
        </el-menu-item>
        <el-submenu index="2">
          <template slot="title">
            <icon-svg name="log" class="site-sidebar__menu-icon"></icon-svg>
            <span>订单管理</span>
          </template>
          <el-menu-item index="orderCheckOrder" @click="$router.push({ name: 'orderCheckOrder' })">
            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">订单查询</span>
          </el-menu-item>
          <el-menu-item index="orderCheckPackage" @click="$router.push({ name: 'orderCheckPackage' })">
            <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">包裹查询</span>
          </el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <icon-svg name="log" class="site-sidebar__menu-icon"></icon-svg>
            <span>我的钱包</span>
          </template>
          <el-menu-item index="payCheck" @click="$router.push({ name: 'payCheck' })">
            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">充值</span>
          </el-menu-item>
          <el-menu-item index="payWallet" @click="$router.push({ name: 'payWallet' })">
            <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">明细</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
  </aside>
</template>

<script>
export default {
  data () {
    return {}
  },
  computed: {
    sidebarLayoutSkin: {
      get () { return this.$store.state.common.sidebarLayoutSkin }
    }
  }
}
</script>

<style lang="scss" scoped>
.site-sidebar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 180px;
  min-height: 100vh;

  .site-sidebar__inner {
    width: 230px;

    .site-sidebar__menu.el-menu {
      width: 180px;
    }
  }
}
</style>
