<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/chain33.png"
          alt="logo"
          width="164"
          style="cursor: pointer"
          @click="$router.push('/home')"
        />
        <!-- <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,
              ' font-bold': $route.path === '/home',
              ' text-text-color': $route.path !== '/home',
            }"
          >
            {{ $t("lang.home") }}
            <span
              v-show="$route.path === '/home'"
              class="
                absolute
                block
                w-7
                h-1
                bg-footer-color
                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,
              ' text-text-color': $route.path !== '/bps',
            }"
          >
            <a
              class="transition-none hover:text-current"
              :href="
                iconType === 'zh-CN'
                  ? 'https://zbzb.s3.ap-northeast-1.amazonaws.com/yuan.org/ycc/white-paper/zh.pdf'
                  : 'https://zbzb.s3.ap-northeast-1.amazonaws.com/yuan.org/ycc/white-paper/en/YUANCHAIN-Whitepaper.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,
              ' font-bold': $route.path === '/newsList',
              ' text-text-color': $route.path !== '/newsList',
            }"
            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-footer-color
                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,
              ' font-bold':
                $route.path === '/blockChainBrowser' ||
                $route.path === '/block' ||
                $route.path === '/blockDetail' ||
                $route.path === '/tradeHash' ||
                $route.path === '/tradeList' ||
                $route.path === '/address',
              ' text-text-color': !(
                $route.path === '/blockChainBrowser' ||
                $route.path === '/block' ||
                $route.path === '/blockDetail' ||
                $route.path === '/tradeHash' ||
                $route.path === '/tradeList' ||
                $route.path === '/address'
              ),
            }"
          >
            {{ $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-footer-color
                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/chain33.png"
          alt="logo"
          width="140"
          @click="$router.push('/home')"
        />
      </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-1 w-5 h-6">
          <!-- <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";
import moment from "moment";
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 || window.sessionStorage.getItem("language") || "zh-CN";
    window.sessionStorage.setItem(
      "language",
      window.sessionStorage.getItem("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;
    });
    moment.locale(this.iconType === "zh-CN" ? "zh-cn" : "en");
    document.title = `${this.$t("lang.YUANLIAN")}——${this.$t("lang.title")}`;
  },
  watch: {
    $route(n, o) {
      const scrollY = window.scrollY;
      this.iconType =
        window.sessionStorage.getItem("language") || n.query.lang || "zh-CN";
      moment.locale(this.iconType === "zh-CN" ? "zh-cn" : "en");
      this.isTop = scrollY < 70 ? true : false;
      window.addEventListener("scroll", () => {
        const scrollY = window.scrollY;
        this.isTop = scrollY < 70 ? true : false;
      });
    },
  },
});
</script>
