<template>
  <div
    class="h-80px w-screen bg-primary flex justify-center overflow-hidden items-center"
  >
    <div class="flex items-center h-full">
      <div class="w-80px"></div>
      <div
        @click="$router.push('/home')"
        :class="`menu-item ${currentPath === '/home' ? 'selected' : ''}`"
      >
        {{ $t("首页") }}
      </div>
      <div class="w-40px"></div>
      <div
        @click="$router.push('/recommend')"
        :class="`menu-item ${currentPath === '/recommend' ? 'selected' : ''}`"
      >
        {{ $t("推荐") }}
      </div>
      <div class="w-40px"></div>
      <div
        @click="typeVisible = !typeVisible"
        :class="`menu-item ${currentPath === '/specific-article' ? 'selected' : ''}`"
      >
        {{ $t("分类浏览") }}
        <img src="/imgs/arrow-down.png" class="w-14px h-6px ml-6px" />
      </div>
      <div class="w-40px"></div>
      <div
        @click="$router.push('/realtime-news')"
        :class="`menu-item ${currentPath === '/realtime-news' ? 'selected' : ''}`"
      >
        {{ $t("实时新闻") }}
      </div>
      <div class="w-40px"></div>
      <div
        @click="$router.push('/vip')"
        :class="`menu-item ${currentPath === '/vip' ? 'selected' : ''}`"
      >
        {{ $t("vip专区") }}
      </div>
      <div class="w-40px"></div>
      <div
        @click="$router.push('/aboutus')"
        :class="`menu-item ${currentPath === '/aboutus' ? 'selected' : ''}`"
      >
        {{ $t("关于我们") }}
      </div>
      <div class="w-260px"></div>
      <div
        @click="$router.push('/publish')"
        :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="$router.push('/search')"
        :class="`menu-item ${currentPath === '/search' ? 'selected' : ''}`"
      >
        <img class="w-30px object-contain" src="/imgs/search.png" />
        {{ $t("搜索") }}
      </div>
      <div class="w-40px"></div>
      <div
        @click="$router.push('/user/personal-center')"
        :class="`menu-item ${currentPath === '/login' ? 'selected' : ''}`"
      >
        {{ $t("登录注册") }}
      </div>
      <div class="w-44px"></div>
      <div
        @click="changeLang"
        class="w-30px h-30px rounded-full border-white-2px text-white align-middle text-center cursor-pointer"
      >
        {{ $t("cn") }}
      </div>
    </div>
    <div
      v-if="typeVisible"
      class="min-h-272px w-screen bg-white absolute top-80px z-50 flex justify-center pb-30px"
    >
      <div class="w-1200px flex flex-wrap">
        <div
          @click="() => {
            $router.push('/specific-article')
            typeVisible = false
          }"
          :class="`type-tag ${index === 0 ? 'selected' : ''}`"
          v-for="(item, index) in 20"
          :key="item"
        >
          <div class="name">军事</div>
          <div class="count">1523篇文章</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  
  mounted() {
    
  },
  methods:{
    changeLang(){
      
      this.$i18n.locale = this.lang[0];
      this.lang = this.lang.reverse()
    }
  },  
  watch: {
    $route: function (next) {
      console.log(next.path);
      this.currentPath = next.path;
    },
  },
  data() {
    return {
      typeVisible: false,
      currentPath: this.$route.path,
      lang: ['zh-CN','zh-TW']
    };
  },
};
</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>
