<template>
  <div
    class="h-80px w-screen bg-primary flex justify-center overflow-hidden items-center"
  >
    <div class="flex items-center h-full w-1200px" style="justify-content: space-between">

      <div class="flex h-full items-center" >
        <div
                @click="$router.push('/home')"
                class="transform hover:scale-110  ml-20px mr-20px"
                :class="`menu-item ${currentPath === '/home' ? 'selected' : ''}`"
        >
          {{ $t("首页") }}
        </div>
        <div
                @click="$router.push('/recommend')"
                class="transform hover:scale-110 ml-20px mr-20px"

                :class="`menu-item ${currentPath === '/recommend' ? 'selected' : ''}`"
        >
          {{ $t("推荐") }}
        </div>
        <div
                @mouseenter="typeVisible = true"
                @mouseleave="handleAutoCloseSuggest"
                class="transform hover:scale-110 ml-20px mr-20px"
                :class="`menu-item ${currentPath === '/specific-article' ? 'selected' : ''}`"
        >
          {{ $t("分类浏览") }}
          <img src="/imgs/arrow-down.png" class="w-14px h-6px ml-6px" />
        </div>
        <div
                @click="$router.push('/realtime-news')"
                class="transform hover:scale-110 ml-20px mr-20px"
                :class="`menu-item ${currentPath === '/realtime-news' ? 'selected' : ''}`"
        >
          {{ $t("实时新闻") }}
        </div>
        <div
                @click="$router.push('/vip')"
                class="transform hover:scale-110 ml-20px mr-20px"

                :class="`menu-item ${currentPath === '/vip' ? 'selected' : ''}`"
        >
          {{ $t("VIP专区") }}
        </div>
        <div
                @click="$router.push('/aboutus')"
                class="transform hover:scale-110 ml-20px mr-20px"

                :class="`menu-item ${currentPath === '/aboutus' ? 'selected' : ''}`"
        >
          {{ $t("关于我们") }}
        </div>
      </div>

      <div class="flex h-full items-center">
        <div
                @click="$router.push('/publish')"
                class="transform hover:scale-110"

                :class="`menu-item ${currentPath === '/publish' ? 'selected' : ''}`"
        >
          <img class="w-30px object-contain" src="/imgs/tougao.png" />
          {{ $t("投稿") }}
        </div>
        <div class="w-36px"></div>
        <div
                @click="showSearch=!showSearch"
                class="transform hover:scale-110"

                :class="`menu-item ${currentPath === '/search' ? 'selected' : ''}`"
        >
          <img class="w-30px object-contain" src="/imgs/search.png" />
          {{ $t("搜索") }}
        </div>
        <div class="w-40px"></div>
        <div
                v-if="!$store.state.userinfo"
                @click="$store.commit('SHOW_LOGIN_BOX')"
                class="transform hover:scale-110"

                :class="`menu-item ${currentPath === '/login' ? 'selected' : ''}`"
        >
          {{ $t("登录注册") }}
        </div>

        <div
                v-else
                @click="$router.push('/user/personal-center')"
                :class="`menu-item ${currentPath === '/login' ? 'selected' : ''}`"
                class="transform hover:scale-110"

                class="-align-center"
        >
          <img class="w-40px h-40px rounded-full mr-20px" v-if="$store.state.userinfo.avatar" :src="$store.state.userinfo.avatarUrl">
          <span class="font-size-20px">{{$store.state.userinfo.nickname}}</span>
        </div>

        <div class="w-44px"></div>
        <div
                @click="changeLang"
                class="transform hover:scale-110"

                class="w-30px h-30px rounded-full border-white-2px text-white align-middle text-center cursor-pointer"
        >
          {{ langStr}}
        </div>
      </div>

    </div>
    <div
      v-if="typeVisible"
      @mousemove="canHideSuggest=false"
      @mouseenter="typeVisible = true"
      @mouseleave="handleCloseSuggest"
      class="min-h-272px w-screen bg-white absolute top-80px z-50 flex justify-center pb-30px shadow-md"
    >
      <div class="w-1200px flex flex-wrap">
        <div
          @click="() => {
            $router.push('/specific-article?category=' + item.code + '&name=' + item.name)
            typeVisible = false
          }"
          :class="`type-tag ${$route.query.category === item.code ? 'selected' : ''}`"
          class="hover:bg-[#1B3E28] hover:text-[white]"
          v-for="(item, index) in cmsCategorys"
          :key="item"
        >
          <div class="name ">{{item.name}}</div>
          <div class="count">{{item.artcileNum}} {{$t("篇文章")}}</div>
        </div>
      </div>
    </div>
    <ui-search-hover-box v-if="showSearch" @hide="showSearch=false"></ui-search-hover-box>
  </div>
</template>

<script>
export default {
  
  mounted() {
    
  },
  computed:{
      langStr(){

        if(this.$i18n.locale.startsWith("zh")){
            return '中';
        }else{
            return 'EN';
        }

      }
  },
  methods:{
    changeLang(){
      
      this.$i18n.locale = this.lang[0];
      this.lang = this.lang.reverse()
    },
    handleAutoCloseSuggest(){
      setTimeout( ()=>{ if(this.canHideSuggest) this.typeVisible = false},500)
    },
    handleCloseSuggest(){
      this.typeVisible = false;
      this.canHideSuggest=true;
    }
  },  
  watch: {
    $route: function (next) {
      console.log(next.path);
      this.currentPath = next.path;
    },
  },
  data() {
    return {
      typeVisible: false,
      currentPath: this.$route.path,
      lang: ['zh-TW','en'],
      canHideSuggest:true,
      cmsCategorys:[],
      showSearch:false
    };
  },
  async created() {
    let resp = await  this.$http.post(this.$api.cms.categorys);
    if(resp.data.status === 200){
       this.cmsCategorys = resp.data.data.cmsCategorys;
    }

  }
};
</script>

<style>
.menu-item {
  @apply text-white text-size-20px cursor-pointer relative h-full flex items-center;
}
.menu-item.selected::after {
  content: "";
  width: 100%;
  height: 3px;
  background: #fff;
  position: absolute;
  bottom: 14px;
  left: 0;
  border-radius: 3px;
}
.type-tag {
  @apply w-110px h-60px bg-[#F7F7F7] flex flex-col justify-center mt-30px pl-15px cursor-pointer;
}
.type-tag.selected {
  @apply bg-primary;
}
.type-tag:not(:nth-child(8n)) {
  @apply mr-40px;
}
.type-tag > .name {
  @apply text-size-16px mb-6px;
}
.type-tag.selected > .name {
  @apply text-white;
}
.type-tag > .count {
  @apply text-size-14px text-[#B8B8B8];
}
</style>
