<template>
  <div class="fixed top-0 w-full z-50 flex justify-center" :class="{'bg-white': !isTop}" style="transition: 0.2s ease-in">
    <div 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="/" 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="http://yuanorg.oss-ap-southeast-1.aliyuncs.com/yuan_introduction.pdf" target="_blank">{{ $t('lang.book') }}</a></li>
          <router-link to="/newsList" :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>
</template>

<script lang="ts">
import Vue from 'vue'
import IconSelect from '@/components/iconSelect.vue'
// import { Select } from "ant-design-vue";
export default Vue.extend({
  components: {
    IconSelect
    // Select
  },
  data() {
    return {
      scrollHeight: 0,
      isTop: true,
      showIcon: false,
      iconType: 'zh-CN'
    }
  },
  mounted() {
    const scrollY = window.scrollY
    this.isTop  = scrollY < 70 ? true : false
    window.onscroll = () => {
      const scrollY = window.scrollY
      this.isTop  = scrollY < 70 ? true : false
    }
  }
})
</script>

<style scoped>
  .header_h {
    min-width: 1250px;
    height: 70px;
    color: #2545CB;
    transition: 0.3s ease-in;
  }
  .header_menu li {
    cursor: pointer;
  }
  .header_menu li:hover {

  }
  .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%);
  }
</style>