<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>
          <el-dropdown>
            <el-avatar class="HeaderSearch-Icon" :size="45"
              src="https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132" />
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>

        <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="getHerf(item.href)" class="app-nav-items" v-for="item in props.navList" :key="item.name"
          @click="appNavItemEvent(item, $event.target)">
          <div @click="appNavItemEvent(item, $event.target.parentElement)">{{ item.name }}</div>
          <nuxt-link :to="getHerf(_item['href'])" class="app-nav-second-items animate__animated animate__fadeIn dNone"
            v-for="_item in item.children" :key="_item.name">
            <div>{{ _item.name }}</div>
          </nuxt-link>
        </nuxt-link>
      </div>
    </div>
  </div>
</template>

<script setup>
const appNavShow = ref(false)
const log = console.log
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
    tag.classList.toggle('active');
    [...tag.children].filter(item => item.nodeName === 'A').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>
<style scoped src="~/assets/css/Header/media.scss" lang="scss"></style>
