<template>
  <div class="fixed top-0 w-full z-50 flex justify-center" :class="{'bg-white': $route.path !== '/home' || !isTop}" style="transition: 0.2s ease-in">
    <div v-if="!isMobile" class="header_h md:w-bodySet flex justify-between items-center">
      <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="{'active': $route.path === '/home'}" class="pl-5 pr-5">{{ $t('lang.home') }}</router-link>
          <li class="pl-5 pr-5">
            <a
              :href="iconType === 'zh-CN' ? 'http://yuanorg.oss-ap-southeast-1.aliyuncs.com/yuan_introduction.pdf' : 'http://yuanorg.oss-ap-southeast-1.aliyuncs.com/yuan_introduction.pdf'"
              target="_blank">{{ $t('lang.book') }}</a>
          </li>
          <router-link :to="{path: '/newsList', query: {lang: $route.query.lang}}" :class="{'active': $route.path === '/newsList' || $route.path === '/newsDetails'}" tag="li" class="pl-5 pr-5">{{ $t('lang.news') }}</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="menu_btn mr-5" @click="showMenu = !showMenu"></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 { Select } from "ant-design-vue";
export default Vue.extend({
  components: {
    IconSelect,
    Menu
    // Select
  },
  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>

<style scoped>
  .header_h {
    min-width: 1200px;
    height: 70px;
    color: #2545CB;
    transition: 0.2s ease-in;
  }
  .header_menu li {
    cursor: pointer;
  }
  .active {
    position: relative;
  }
  .active::after {
    content: '';
    display: block;
    width: 28px;
    height: 4px;
    background: #0276F7;
    border-radius: 5px;
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
  }
  .menu_btn {
    width: 22px;
    height: 3px;
    border-radius: 4px;
    background: #3155f0;
    position: relative;
  }
  .menu_btn::before, .menu_btn::after {
    display: block;
    content: '';
    width: 22px;
    height: 3px;
    border-radius: 4px;
    background: #3155f0;
    position: absolute;
    left: 0;
  }
  .menu_btn::before {
    top: -7px;
    transform: translateY(50%);
  }
  .menu_btn::after {
    bottom: -7px;
    transform: translateY(-50%);
  }
</style>