<template>
  <a-layout-header class="header">
    <section
      v-if="$root.global.settings.layout === 'left-menu' || $root.global.settings.layout === 'right-menu'"
    >
      <div class="header-actions">
        <a
          @click="$root.global.settings.siderCollapsed = !$root.global.settings.siderCollapsed"
          class="header-action"
        >
          <a-icon :type="$root.global.settings.siderCollapsed ? 'menu-unfold' : 'menu-fold'" />
        </a>
        <search :menus="nav.content" />
      </div>
      <div class="header-actions">
        <a @click="$emit('reload')" class="header-action">
          <a-icon type="reload" />
        </a>
        <a class="header-action">
          <a-badge count="5">
            <a-icon type="bell" />
          </a-badge>
        </a>
        <a @click="$emit('setting')" class="header-action">
          <a-icon type="setting" />
        </a>
        <User />
      </div>
    </section>
    <container v-else-if="$root.global.settings.layout === 'top-nav'">
      <div class="header-actions">
        <a @click="showNav = !showNav" class="header-action mr-md">
          <a-icon type="menu" />
        </a>
        <Logo />
        <search :menus="nav.content" />
      </div>
      <div class="header-actions">
        <a @click="$emit('reload')" class="header-action">
          <a-icon type="reload" />
        </a>
        <a class="header-action">
          <a-badge count="5">
            <a-icon type="bell" />
          </a-badge>
        </a>
        <a @click="$emit('setting')" class="header-action">
          <a-icon type="setting" />
        </a>
        <User />
      </div>
      <a-drawer
        :body-style="{ padding: 0 }"
        :closable="false"
        :get-container="'.ant-layout-content > .yo-tab-external-mount'"
        :visible="showNav"
        :wrap-style="{ position: 'absolute' }"
        @close="showNav = false"
        placement="left"
        width="38.2%"
      >
        <div @blur="showNav = false" @mouseleave="showNav = false">
          <Nav :nav="nav" @open="showNav = false" />
        </div>
      </a-drawer>
    </container>
  </a-layout-header>
</template>
<script>
import Logo from '../logo';
import Nav from '../nav';

import User from './user';
import Search from './search';

export default {
  components: {
    Logo,
    Nav,

    User,
    Search,
  },
  props: {
    nav: {
      default() {
        return {
          content: [],
        };
      },
      type: Object,
    },
  },
  data() {
    return {
      showNav: false,
    };
  },
};
</script>