<template>
  <ul class="tab-content">
    <li
      v-for="(item, index) in dataNav"
      :class="item.pathActive.findIndex(path => {
        return $route.path.includes(path)
      }) !== -1 && 'active'"
      :key="index"
      @click="goPage(item.goPath)"
      >
      {{ item.name }}
    </li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      dataNav: [
        {
          name: this.$t('menu.aboutChild.about'),
          goPath: '/about/introduce',
          pathActive: ['/about/introduce']
        },
        {
          name: this.$t('menu.aboutChild.culture'),
          goPath: '/about/culture',
          pathActive: ['/about/culture']
        },
        {
          name: this.$t('menu.aboutChild.news'),
          goPath: '/about/news',
          pathActive: ['/about/news', '/about/news-detail']
        },
        {
          name: this.$t('menu.aboutChild.msg'),
          goPath: '/about/message',
          pathActive: ['/about/message', '/about/message-detail']
        },
        {
          name: this.$t('menu.aboutChild.openLesson'),
          goPath: '/about/lesson',
          pathActive: ['/about/lesson', '/about/lesson-detail']
        },
        {
          name: this.$t('menu.aboutChild.contact'),
          goPath: '/about/contact',
          pathActive: ['/about/contact']
        }
        // {
        //   name: '招聘信息',
        //   goPath: '',
        //   pathActive: ['']
        // }
      ]
    }
  },
  mounted() {
  },
  methods: {
    goPage(path) {
      this.$router.push({
        path: path
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.tab-content{
  width: 160px;
  // height: 420px;
  height: fit-content;
  background: #fff;
  padding-top: 35px;
  padding-bottom: 43px;
  li{
    position: relative;
    width: 100%;
    font-size: 22px;
    line-height: 40px;
    text-align: center;
    color: #777777;
    margin-bottom: 60px;
    cursor: pointer;
    &:last-child{
      margin: 0;
    }
    &.active{
      color: rgba(170, 25, 65, 1);
      &::after{
        content: '';
        width: 8px;
        height: 40px;
        background: rgba(170, 25, 65, 1);
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }
}
</style>