<template>
<el-container>
  <el-header>
    <div :class="[$style.header]">
      <el-menu :default-active="activeIndex" router mode="horizontal">
        <el-menu-item index="/">组件</el-menu-item>
        <el-menu-item index="/changelog">更新日志</el-menu-item>
      </el-menu>
      <el-tag type="danger" size="small">版本: v{{version}} </el-tag>
    </div>
  </el-header>
  <el-container>
    <el-aside width="240px"><asider></asider></el-aside>
    <el-main :class="[$style.main]"><router-view></router-view></el-main>
  </el-container>
</el-container>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import GlpUI from '@@/index'
import Asider from './asider/index.vue'

const version = GlpUI.version
@Component({
  components: { Asider }
})
export default class Layout extends Vue {
  version = version

  get activeIndex () {
    return this.$route.path.startsWith('/changelog') ? '/changelog' : '/'
  }
}
</script>

<style lang="scss" module>
.main {
  padding: 0 64px !important;
}

.header {
  padding: 0 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f8f8f8;
}
</style>
