<template>
<div class="HeaderSearch"  :style="[props.HeaderSearch]">
  <div class="HeaderSearch-container">
    <div class="HeaderSearch-box">
      <!-- <img src="/img/icon/searchIcon.png" @click="showSearchBox" class="HeaderSearch-Icon" alt=""> -->
      <div class="HeaderSearch-button" @click="toggleAppNavShow">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
  <div class="app-nav animate__animated animate__fadeIn" v-show="appNavShow"  :style="props.appNav" @click="closeAppNavShow($event)">
    <div class="app-box" @click="closeAppNavShow($event)">
      <nuxt-link :to="item.href" class="app-nav-items" v-for="item in props.navList" :key="item.name" @click="appNavItemEvent(item,$event)">
        <div >{{item.name}}</div>
        <div class="app-nav-second-items animate__animated animate__fadeIn dNone" v-for="_item in item.children" :key="_item.name" >
          <nuxt-link :to="item.href">{{_item.name}}</nuxt-link>
        </div>
      </nuxt-link>
    </div>
  </div>
</div>
</template>

<script setup>
const appNavShow = ref(false)
const props = defineProps({
  HeaderSearch:Object,
  appNav:Object,
  navList:Array
})
const emit = defineEmits(['showSearchBox'])
const appNavItemEvent = function  (item,e){
  if(item.children.length!==0){
    let tag = e.target
    tag.classList.toggle('active');
    [...tag.children].filter(item=>item.nodeName==='DIV').map(item=>{
      item.classList.toggle('dNone')
    })
  }
}


const toggleAppNavShow = function (){
  appNavShow.value = !appNavShow.value
}
const closeAppNavShow = function (e){
  let tag = e.target
  if(tag.className === 'app-nav animate__animated animate__fadeIn' || tag.className==='app-box'){
    appNavShow.value = false
    document.body.style.overflowY = 'auto'
  }
}
const showSearchBox = function (){
  emit('showSearchBox')
}

</script>

<style scoped src="~/assets/css/Header/search.scss" lang="scss"></style>