<template>
  <div
    class="fixed top-0 w-full flex justify-center ease-in duration-200"
    style="z-index: 3000;"
    :class="{
      'bg-white': $route.path === '/newsList' || !isTop,
      'min-w-1200': !isMobile,
    }"
  >
    <div
      v-if="!isMobile"
      class="min-w-1200 h-16 text-footer-color md:w-bodySet flex justify-between items-center ease-in duration-500"
    >
      <div class="flex items-center">
        <img src="@/assets/images/header/logo.png" alt="logo" width="164" />
        <ul class="header_menu flex leading-normal text-sm ml-16">
          <router-link
            :to="{ path: '/home', query: { lang: $route.query.lang } }"
            tag="li"
            class="pl-5 pr-5 cursor-pointer relative"
            :class="{
              ' text-white': $route.path === '/blockChainBrowser' && isTop,
            }"
          >
            {{ $t('lang.home') }}
            <span
              v-show="$route.path === '/home'"
              class="absolute block w-7 h-1 bg-active rounded-2xl left-1/2 -bottom-2 transform -translate-x-1/2"
            ></span>
          </router-link>
          <li
            class="pl-5 pr-5 cursor-pointer"
            :class="{
              ' text-white': $route.path === '/blockChainBrowser' && isTop,
            }"
          >
            <a
              class="transition-none hover:text-current"
              :href="
                iconType === 'zh-CN'
                  ? 'https://yuanorg.oss-ap-southeast-1.aliyuncs.com/ycc/white-paper/zh.pdf'
                  : 'https://yuanorg.oss-ap-southeast-1.aliyuncs.com/ycc/white-paper/en.pdf'
              "
              target="_blank"
            >
              {{ $t('lang.book') }}
            </a>
          </li>
          <router-link
            :to="{ path: '/newsList', query: { lang: $route.query.lang } }"
            tag="li"
            :class="{
              ' text-white': $route.path === '/blockChainBrowser' && isTop,
            }"
            class="pl-5 pr-5 cursor-pointer relative"
          >
            {{ $t('lang.news') }}
            <span
              v-show="
                $route.path === '/newsList' || $route.path === '/newsDetails'
              "
              class="absolute block w-7 h-1 bg-active rounded-2xl left-1/2 -bottom-2 transform -translate-x-1/2"
            ></span>
          </router-link>
          <router-link
            :to="{
              path: '/blockChainBrowser',
              query: { lang: $route.query.lang },
            }"
            tag="li"
            class="pl-5 pr-5 cursor-pointer relative"
            :class="{
              ' text-white': $route.path === '/blockChainBrowser' && isTop,
            }"
          >
            {{ $t('lang.blockChainBrowser') }}
            <span
              v-show="
                $route.path === '/blockChainBrowser' ||
                $route.path === '/block' ||
                $route.path === '/blockDetail' ||
                $route.path === '/tradeHash' ||
                $route.path === '/tradeList' ||
                $route.path === '/address'
              "
              class="absolute block w-7 h-1 bg-active rounded-2xl left-1/2 -bottom-2 transform -translate-x-1/2"
              :class="{
                ' bg-white': $route.path === '/blockChainBrowser' && isTop,
              }"
            ></span>
          </router-link>
        </ul>
      </div>
      <div class="flex text-sm mr-1 items-center">
        <p
          class="mr-20"
          :class="{ 'text-white': isTop }"
          :style="{ color: $route.path === '/home' ? '' : '#2545CB' }"
        >
          {{ $t('lang.email') }}： business@yuan.org
        </p>
        <div class="relative">
          <div
            v-show="iconType === 'zh-CN'"
            class="flex items-center justify-center cursor-pointer"
            @click="showIcon = !showIcon"
          >
            <img class="mr-2" src="@/assets/images/header/ZH.png" alt="中文" />
            <p class="text-sm">{{ $t('lang.zh') }}</p>
            <img
              class="ml-1"
              width="10"
              src="@/assets/images/header/arrow_r.png"
              alt=""
            />
          </div>
          <div
            v-show="iconType === 'en'"
            class="flex items-center justify-center cursor-pointer"
            @click="showIcon = !showIcon"
          >
            <img class="mr-2" src="@/assets/images/header/EN.png" alt="英文" />
            <p class="text-sm">{{ $t('lang.en') }}</p>
            <img
              class="ml-1"
              width="10"
              src="@/assets/images/header/arrow_r.png"
              alt=""
            />
          </div>
          <icon-select
            :show="showIcon"
            @hidden="showIcon = false"
            @selectIcon="
              (v) => {
                iconType = v
              }
            "
          ></icon-select>
        </div>
      </div>
    </div>
    <div
      v-else
      class="w-full flex justify-between items-center bg-white"
      style="height: 44px;"
      :style="{
        'border-bottom': $route.path !== '/home' ? '1px solid #F2F2F2' : 'none',
      }"
    >
      <div class="logo mx-3.5">
        <img src="@/assets/images/header/logo-m.png" alt="logo" width="164" />
      </div>
      <div class="flex justify-between items-center">
        <div class="relative">
          <div
            v-show="iconType === 'zh-CN'"
            class="flex items-center justify-center cursor-pointer"
            @click="showIcon = !showIcon"
          >
            <img class="mr-1" src="@/assets/images/header/ZH.png" alt="中文" />
            <p class="text-xs text-footer-color">{{ $t('lang.zh') }}</p>
            <img
              class="mr-1"
              width="10"
              src="@/assets/images/header/arrow_r.png"
              alt=""
            />
          </div>
          <div
            v-show="iconType === 'en'"
            class="flex items-center justify-center cursor-pointer"
            @click="showIcon = !showIcon"
          >
            <img class="mr-1" src="@/assets/images/header/EN.png" alt="英文" />
            <p class="text-xs text-footer-color">{{ $t('lang.en') }}</p>
            <img
              class="mr-1"
              width="10"
              src="@/assets/images/header/arrow_r.png"
              alt=""
            />
          </div>
          <icon-select
            :show="showIcon"
            @hidden="showIcon = false"
            @selectIcon="
              (v) => {
                iconType = v
              }
            "
          ></icon-select>
        </div>
        <div
          class="mr-5 w-6 h-6"
          @click=";(showMenu = !showMenu), (showIcon = false)"
        >
          <img
            class="w-full h-full"
            src="@/assets/images/header/menu.png"
            alt=""
          />
        </div>
      </div>
    </div>
    <Menu :isShow="showMenu" v-on:close="closeMenu" :iconType="iconType"></Menu>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import IconSelect from '@/components/iconSelect.vue'
import Menu from '@/components/mobile/menu.vue'
import { checkIsMobile } from '@/utils/utils'
export default Vue.extend({
  components: {
    IconSelect,
    Menu,
  },
  data() {
    return {
      isTop: true,
      showIcon: false,
      iconType: 'zh-CN',
      showMenu: false,
    }
  },
  methods: {
    closeMenu(v: boolean) {
      this.showMenu = !v
    },
  },
  computed: {
    isMobile() {
      return checkIsMobile()
    },
  },
  mounted() {
    const scrollY = window.scrollY
    const type = this.$route.query as any
    this.iconType = type.lang || 'zh-CN'
    window.sessionStorage.setItem('language', this.iconType)
    this.$i18n.locale = this.iconType === 'zh-CN' ? 'zh' : 'en'
    this.isTop = scrollY < 70 ? true : false
    window.addEventListener('scroll', () => {
      const scrollY = window.scrollY
      this.isTop = scrollY < 70 ? true : false
    })
  },
  watch: {
    $route(n, o) {
      const scrollY = window.scrollY
      this.iconType = n.query.lang || 'zh-CN'
      this.isTop = scrollY < 70 ? true : false
      window.addEventListener('scroll', () => {
        const scrollY = window.scrollY
        this.isTop = scrollY < 70 ? true : false
      })
    },
  },
})
</script>
