<template>
    <div class="about">
        <default-navbar :navbarList="navbarList">
            <template slot="bg-content" >
                <div class="bg-content">
                    <h3>{{title}}<span>ABOUT</span></h3>
                </div>
            </template>
        </default-navbar>
        <div class="about-content">
            <div class="about-tab-wrapper">
                <div class="about-tab">

                    <div class="about-tab-item"
                         v-for="item in tabList"
                         :class="{'active':item.english === tabActive}"
                         @click="handleTabClick(item)"
                    >
                        <i class="iconfont"
                           style="font-size:30px; display: block;"
                           :class="item.icon"
                        ></i>
                        <div class="info">
                            <h4>{{item.name}}</h4>
                            <p>{{item.english}}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="about-content-wrapper">
                <div class="about-view">
                    <router-view></router-view>
                </div>
            </div>

        </div>

    </div>
</template>

<script>
  import PageFooter from '@/components/footer/pageFooter'
  import DefaultNavbar from '@/components/navbar/navbar'

  import {asyncRouterMap,asyncRouterMap_EN} from '@/config/router.config'
  import {lang} from '@/utils/lang'
  export default {
    name: 'about',
    data() {
      return {
        navbarList: [],
        activeName:'',
        tabList:[
          {name:'公司简介',english:'INTRODUCTION',icon:{'icongongsijianjie':true}},
        ],
        tabActive: 'INTRODUCTION',
		title:''
      }
    },
    components: {
      DefaultNavbar,
	  lang	
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
		
		if(lang.lg == "en"){
			this.navbarList.push(...asyncRouterMap_EN.filter(f => !f.meta.hidden))
			this.title = lang.en.AboutUs
			this.tabList[0].name = '';
		}else{
			this.navbarList.push(...asyncRouterMap.filter(f => !f.meta.hidden))
			this.title = lang.hk.AboutUs
		}
		 this.tabActive = this.$route.name.toUpperCase()
      },
      handleTabClick(item) {
        this.tabActive = item.english;
        this.$router.push({name:item.english.toLowerCase()})
      }
    }
  }
</script>

<style lang="less" scoped>
    @import url('./about.less');
</style>
