<template>
  <nav class="app-menu">
    <ul>
      <tree-item :item="item" v-for="(item, index) in list" :key="index" class="first"></tree-item>
    </ul>
  </nav>
</template>

<script>
import TreeItem from './TreeItem'
export default {
  components: { TreeItem },
  data() {
    return {
      list: [
        {
          name: '项目介绍',
          children: [
            { name: '项目背景', path: '/project-intro/bg' },
            { name: '项目特色', path: '/project-intro/charac' },
            { name: '证书授权', path: '/project-intro/certificate' }
          ]
        },
        {
          name: '课程与师资',
          children: [
            { name: '课程设置', path: '/about/course' },
            { name: '师资力量', path: '/about/teacher' }
          ]
        },
        {
          name: '最新动态',
          children: [
            { name: '热点新闻', path: '/news/hot' },
            { name: '教授采访', path: '/news/interview' }
          ]
        },
        {
          name: '报名申请',
          children: [
            { name: '有关申请', path: '/apply/relevant' },
            { name: '费用资助', path: '/apply/support' },
            { name: '常见问题', path: '/apply/problem' }
          ]
        },
        {
          name: '校友风采',
          children: [
            { name: '杰出校友', path: '/alumni/outstanding' },
            { name: '校友分享', path: '/alumni/sharing' }
          ]
        },
        {
          name: '我要报名',
          onClick: () => {
            window.open('/my/account')
          }
        }
      ]
    }
  },
  methods: {
    showTips() {
      this.$notify({ type: 'primary', message: '暂未开通，尽请期待' })
    }
  }
}
</script>

<style lang="scss">
.app-menu {
  // position: fixed;
  // left: 0;
  // right: 0;
  // top: 0.62rem;
  // bottom: 0;
  padding: 0 0.15rem;
  min-height: 100vh;
  background-color: #fff;
  .first > .cell .cell-title {
    font-size: 0.14rem;
    font-weight: bold;
  }
  .first > .tree-item-group {
    padding: 0;
  }
}
</style>
