<template>
  <!--  <header id="header" :class="routeName === 'lang' ? blogPosts.docs.length ? 'header' : 'header1': 'header1'">-->
  <header class="header">
    <div class="site--header">
      <div class="main-nav container-fluid">
        <div class="row align-items-stretch">
          <div class="col-9">
            <nav>
              <ul>
                <nuxt-link :to="{ name: 'lang', params: { lang: $route.params.lang } }" v-slot="{href,navigate,isActive}" exact custom>
                  <li @click="navigate" :class="isActive ? 'active-link' : null">
                    <a :href="href">
                      <img src="/img/logo.svg" alt="">
                    </a>
                  </li>
                </nuxt-link>
              </ul>
            </nav>
          </div>
          <div class="col-3  d-flex align-items-center justify-content-end">
            <nuxt-link
                class="btn-header lang"
                :to="{ to: $route.fullPath,query: $route.query, params: { lang: $route.params.lang === 'en' ? 'fa' : 'en' } }">
              {{ $route.params.lang === 'en' ? 'Fa' : 'En' }}
            </nuxt-link>

          </div>
        </div>
      </div>
    </div>
  </header>
</template>


<script>
export default {
  data() {
    return {
      drawerVisible: false,
      scrollPosition: null,
      blogPosts: null,
      searching: false,
      searchableText: '',
    }
  },
  methods: {
    drawerHandle() {
      this.drawerVisible = !this.drawerVisible
      const en = this.$route.params.lang === 'en'
      this.$gsap.timeline()
          .fromTo($(".headerDrawer"), {opacity: 0}, {opacity: 1, duration: 1})
          .fromTo($(".drawer-body ul li"), {x: en ? -100 : 100, opacity: 0}, {x: 0, opacity: 1, duration: 0.2, stagger: 0.1}, 0)
          .fromTo($(".link8"), {y: 20, opacity: 0}, {y: 0, opacity: 1, duration: .2}, '-=0.3')
    },
    updateScroll() {
      this.scrollPosition = window.scrollY
    },
    search(status) {
      this.searching = status
      if (status) setTimeout(() => $('#searchInput').focus(), 100)
      else this.searchableText = ''
    },
    doSearch() {
      // if (this.searchableText.length) {
      //   window.open(`https://www.google.com/search?q=${this.searchableText}+site%3Ahttps%3A//orisoxin.com/`, "_blank");
      //   setTimeout(() => this.search(false), 100)
      // } else {
      //   this.$message({
      //     type: 'warning',
      //     message: 'ابتدا عبارت مورد نظر را بنویسید'
      //   })
      // }
      if (this.searchableText.length) {
        this.$router.push({name: 'lang-search', params: {lang: this.$route.params.lang}, query: {terms: this.searchableText}})
        setTimeout(() => this.search(false), 100)
      } else {
        this.$message({
          type: 'warning',
          message: 'ابتدا عبارت مورد نظر را بنویسید'
        })
      }
    },
  },
  mounted() {
    $(document).ready(() => {
      this.$gsap.timeline()
          .fromTo($(".site--header"), {opacity: 0}, {opacity: 1, duration: 1})

      $(window).scroll(e => {
        if ($(window).scrollTop() > 100) {
          $('.site--header').addClass('hasBG')
          $('.site--header--drawer').addClass('hasBG')
        } else {
          $('.site--header').removeClass('hasBG')
        }

        // if (window.scrollY > 904 && this.routeName === 'lang' && this.blogPosts.docs.length) $('.header').addClass('_header')
        // else $('.header').removeClass('_header')
        // if (window.scrollY < 905 && this.routeName === 'lang' && this.blogPosts.docs.length) $('.header').addClass('__header')
        // else $('.header').removeClass('__header')
      })
    });
    window.addEventListener('scroll', this.updateScroll);
  },

  computed: {
    content() {
      return this.$store.state.content.header[this.$route.params.lang]
    },
    routeName() {
      return this.$route.name
    }
  },

  async fetch() {
    this.blogPosts = await this.$axios.get('/api/public/blogPosts?category=all&page=1').then(res => res.data)
        .catch(e => console.log('e', e))
  }
}
</script>
<style scoped>
  .header {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 5;
    top: 0;
    background: white;
    padding-top: 18px;
}
.main-nav nav ul li a img {
    width: 100PX;
}
</style>