<template>
  <div class="t-c h-100">
    <!-- :class="hover ? 'b-'+this.color[0] +' c-'+this.color[1] : ''" -->
    <div class="cursor-pointer h-100 d-fx ai-c tn-1s" 
      @click="goMenu(menu)" 
      @mouseenter="hover=true" 
      @mouseleave="hover=false"
    >
      <p class="lh-36px h-36px c-222222" 
        :class="this.menu.en == this.$route.name ? 'fw-600' : 'f-16px '">
        {{menu[this.lang]}} 
        <!-- + {{this.index}} -->
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HeaderButtonC',
  extends: {},
  props: {menu: Object, color: Array},
  data() {
    return { 
      hover: false,
      lang: window.lang,
    };
  },
  components: {
  },
  computed: {},
  filters: {
    // uppercase (value) {
    //   if (!value) return ''
    //   return value.toUpperCase()
    // }
  },
  watch: {},
  methods: {
    async goMenu(menu){
      if(menu.en=="Sign In"){
        return this.$store.state.sign.show = await true;
      } else{
        let result = await this.$router.resolve({name: menu.en});
        // console.log(result);
        if( result.resolved.matched.length > 0){
          return this.$router.push({ name: menu.en });
        }else{
          return this.$router.push({ path: '*' }); // redirects to "page not found"
        }
      }
    },
  },
  beforeCreate(){},
  mounted(){}
}

</script>
