<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 '@/components/TreeItem'
export default {
  components: { TreeItem },
  data() {
    return {
      list: [
        {
          name: this.$t('menu.about'),
          children: [
            { name: this.$t('menu.aboutChild.about'), path: '/about/introduce' },
            { name: this.$t('menu.aboutChild.culture'), path: '/about/culture' },
            { name: this.$t('menu.aboutChild.news'), path: '/about/news' },
            { name: this.$t('menu.aboutChild.contact'), path: '/about/contact' }
          ]
        },
        {
          name: this.$t('menu.services'),
          children: [
            {
              name: this.$t('menu.servicesChild.x'),
              children: [
                { name: this.$t('menu.servicesChild.xChild.products'), href: 'https://x.ezijing.com' }
                // { name: '数字金融客户服务证书', onClick: this.showTips },
                // { name: '酒店及旅游业的数字化营销证书', onClick: this.showTips },
                // { name: '青少年儿童心理以及行为指导证书', onClick: this.showTips }
              ]
            },
            { name: this.$t('menu.servicesChild.program'), path: '/services/major' },
            { name: this.$t('menu.servicesChild.college'), path: '/services/college' },
            { name: this.$t('menu.servicesChild.career'), path: '/services/job' },
            { name: this.$t('menu.servicesChild.highLevel'), path: '/services/employment' },
            {
              name: this.$t('menu.servicesChild.online'),
              children: [
                { name: this.$t('menu.servicesChild.onlineChild.design'), onClick: this.showTips },
                { name: this.$t('menu.servicesChild.onlineChild.support'), onClick: this.showTips },
                { name: this.$t('menu.servicesChild.onlineChild.joint'), onClick: this.showTips }
              ]
            }
          ]
        },
        {
          name: this.$t('menu.degree'),
          children: [
            { name: this.$t('menu.degreeChild.bachelor'), children: [{ name: this.$t('menu.degreeChild.bachelorChild.shms'), onClick: this.showTips }] },
            {
              name: this.$t('menu.degreeChild.master'),
              children: [
                { name: this.$t('menu.degreeChild.masterChild.msf'), href: 'https://kelley.ezijing.com' },
                { name: this.$t('menu.degreeChild.masterChild.med'), href: 'https://cu.ezijing.com' },
                { name: this.$t('menu.degreeChild.masterChild.map'), href: 'https://ciis.ezijing.com' },
                { name: this.$t('menu.degreeChild.masterChild.paln'), href: 'https://cfflp.ezijing.com' }
              ]
            },
            {
              name: this.$t('menu.degreeChild.mba'),
              children: [
                { name: this.$t('menu.degreeChild.mbaChild.mba'), href: 'https://marywood.ezijing.com' },
                { name: this.$t('menu.degreeChild.mbaChild.finance'), href: 'https://sofia.ezijing.com' },
                { name: this.$t('menu.degreeChild.mbaChild.internatidnal'), href: 'https://shms.ezijing.com' }
              ]
            },
            {
              name: this.$t('menu.degreeChild.doctor'),
              children: [
                { name: this.$t('menu.degreeChild.doctorChild.dba'), onClick: this.showTips },
                { name: this.$t('menu.degreeChild.doctorChild.edd'), onClick: this.showTips }
              ]
            }
          ]
        },
        {
          name: this.$t('menu.alumni'),
          children: [
            { name: this.$t('menu.alumniChild.alumni'), path: '/alumnus' }
            // { name: '校友风采', path: '/alumnus/style' }
          ]
        },
        {
          name: this.$t('menu.apply'),
          onClick: () => {
            this.$emit('showApplyForm')
          }
        }
      ]
    }
  },
  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>
