<template>
	<header class="header">
		<div class="lang-bar">
			<a :href="catalog_link" download="catalog.pdf" target="_blank" class="catalog-download">
				<span>{{staticData.catalog}}</span>
				<span>&nbsp;</span>
				<i class="fas fa-download"></i>
			</a>
			<div class="dropdown" @mouseenter="drop" @mouseleave="drop">
				<div class="title">
					<p class="current-lang">
						<span>FA / EN</span>
						<i class="fas fa-sort-down"></i>
					</p>
				</div>
				<div class="dropMenu">
					<div class="drop-item">
						<nuxt-link :to="{to: this.$route.fullPath, params: {lang: 'fa'}}">FA</nuxt-link>
					</div>
					<div class="drop-item">
						<nuxt-link :to="{to: this.$route.fullPath, params: {lang: 'en'}}">EN</nuxt-link>
					</div>
				</div>
			</div>
		</div>
		<div class="container-fluid">
			<nav class="row align-items-center">
				<div class="col-12 links">
					<div class="container-fluid">
						<ul class="row justify-content-start">
							<nuxt-link :to="{name: 'lang',params: {lang: $route.params.lang}}" tag="li" exact class="">
								<a class="logo">
									<Logo/>
								</a>
							</nuxt-link>
							<nuxt-link :to="{name: 'lang',params: {lang: $route.params.lang}}" tag="li" exact class="">
								<a>{{staticData.home}}</a>
							</nuxt-link>
							<nuxt-link :to="{name: 'lang-about',params: {lang: $route.params.lang}}" tag="li" exact class="">
								<a>{{staticData.about}}</a>
							</nuxt-link>
							<nuxt-link :to="{name: 'lang-services',params: {lang: $route.params.lang}}" tag="li" exact class="">
								<a>{{staticData.services}}</a>
							</nuxt-link>
							<nuxt-link :to="{name: 'lang-products',params: {lang: $route.params.lang}}" tag="li" class="">
								<a>{{staticData.products}}</a>
							</nuxt-link>
							<nuxt-link :to="{name: 'lang-projects',params: {lang: $route.params.lang}}" tag="li" exact class="">
								<a>{{staticData.projects}}</a>
							</nuxt-link>
							<li class="tech_info" @mouseenter="tech_info" @mouseleave="tech_info"
								 :class="$route.name === 'lang-tech-gDesign' ||
								 $route.name === 'lang-tech-gStandard' ||
								 $route.name === 'lang-tech-gTech' ||
								 $route.name === 'lang-tech-gUsage' ? 'active' : null">
								<a>{{staticData.tech_info}}</a>
								<div class="drop-down">
									<ul>
										<li>
											<nuxt-link :to="{name: 'lang-tech-gTech',params: {lang: $route.params.lang}}">{{staticData.ti_1}}</nuxt-link>
										</li>
										<li>
											<nuxt-link :to="{name: 'lang-tech-gStandard',params: {lang: $route.params.lang}}">{{staticData.ti_2}}</nuxt-link>
										</li>
										<li>
											<nuxt-link :to="{name: 'lang-tech-gDesign',params: {lang: $route.params.lang}}">{{staticData.ti_3}}</nuxt-link>
										</li>
										<li>
											<nuxt-link :to="{name: 'lang-tech-gUsage',params: {lang: $route.params.lang}}">{{staticData.ti_4}}</nuxt-link>
										</li>
									</ul>
								</div>
							</li>
							<nuxt-link :to="{name: 'lang-blog',params: {lang: $route.params.lang}}" tag="li" class="">
								<a>{{staticData.blog}}</a>
							</nuxt-link>
							<nuxt-link :to="{name: 'lang-contact',params: {lang: $route.params.lang}}" tag="li" exact class="">
								<a>{{staticData.contact}}</a>
							</nuxt-link>
						</ul>
					</div>
				</div>
			</nav>
		</div>
	</header>
</template>

<script>
   export default {
      data() {
         return {
            catalog_link: this.$store.state.staticData.catalog_link
         }
      },
      computed: {
         staticData() {
            return this.$store.state.staticData.header[this.$route.params.lang]
         }
      },
      methods: {
         drop() {
            $('.dropdown').toggleClass('dropdown-active')
         },
         tech_info() {
            const el = $('.tech_info .drop-down')
            if (el.height() === 0) {
               el.css({height: $('.tech_info .drop-down ul').height() + 10})
            } else {
               el.css({height: 0})
            }
         }
      },
      mounted() {
         /////////////////////////////////////////////////////////// small header
         $(window).scroll(function (e) {
            if ($(window).scrollTop() > 50) {
               $('.header').addClass('header-small')
            } else {
               $('.header').removeClass('header-small')
            }
         })

      }
   }
</script>
