
<template>
    <div class="Header " >
      <div class="Header-container" :style="[HeaderStyleOption]">
        <HeaderIcon :HeaderIcon="HeaderStyleOption.HeaderIcon"></HeaderIcon>
        <HeaderNav :HeaderNav="HeaderStyleOption.HeaderNav" :navList="navList"></HeaderNav>
        <HeaderSearch :HeaderSearch="HeaderStyleOption.HeaderSearch" :appNav="HeaderStyleOption.appNav" :navList="navList"
          @showSearchBox="showSearchBox"></HeaderSearch>
      </div>
      <div class="search-box ">
        <input type="text" class="search-box-input " @blur="showSearchHideBox([])" @input="searchEvent">
        <div class="search-hide-box ">
          <div class="search-hide-items" v-for="item in searchRes">
            <nuxtLink :to="item.href">
              {{ item.txt }}
            </nuxtLink>
          </div>
        </div>
      </div>
    </div>
    <div class="phone-box">

    </div>
</template>

<script setup>
import HeaderIcon from "./HeaderIcon.vue";
import HeaderNav from "./HeaderNav.vue";
import HeaderSearch from "./HeaderSearch.vue";

const route = useRouter()
/**样式配置*/
const HeaderStyleOption = reactive({
  
  /**导航样式*/
  HeaderNav: {
    'padding-left': '25vw'
  },
  /**icon样式*/
  HeaderIcon: {
  },
  /**搜索样式*/
  HeaderSearch: {
    position: ' absolute',
    right: '20px',
  },
  /**手机菜单栏样式*/
  appNav: {
    top: ' 0',
    height: '100%',
    width: '100%'
  }
})



let info_article_type_id = ref(0)

// '/product'
// '/product/child'
// 'child'
let navList = [
  {
    name: 'Home',
    children: [],
    href: '/',
    alias: 'index'
  },
  {
    name: 'Gitee',
    children: [],
    href: 'https://gitee.com/zhi-lan_0/aerowen-toolbox',
    alias: 'Gitee'
  },
  {
    name: 'GitHub',
    children: [],
    href: 'https://github.com/Abbh1/AerwenTool',
    alias: 'GitHub'
  },
  
 
]

// [
//   {
//     txt:'123',
//     href:''
//   }
// ]
let searchRes = ref(null)

const showSearchBox = function () {
  document.getElementsByClassName('search-box')[0].classList.toggle('search-show')
  document.getElementsByClassName('search-box-input')[0].classList.toggle('search-input-show')
}
let timer = null
const searchEvent = function (e) {
  if (timer) {
    clearTimeout(timer)
  }
  timer = setTimeout(() => {
    let searchVal = e.target.value
    // get('请求接口',searchVal).then((res)=>{
    // showSearchHideBox(res)
    // })
    // showSearchHideBox(res)

  }, 1000)
}
const showSearchHideBox = function (data) {
  searchRes.value = data
  if (data && data.length !== 0) {
    document.getElementsByClassName('search-box-input')[0].classList.add('search-have')
  } else {
    document.getElementsByClassName('search-box-input')[0].classList.remove('search-have')
  }
}

</script>

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