<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.menus" />
      </div>
      <div class="header-actions">
        <User />
        <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>
      </div>
    </section>
    <container v-else-if="$root.global.settings.layout === 'top-nav'">
      <div class="header-actions">
        <Logo />
        <Sider :nav="nav" @open="(nav) => $emit('open', nav)" />
        <search :menus="nav.menus" />
      </div>
      <div class="header-actions">
        <User />
        <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>
      </div>
    </container>
  </a-layout-header>
</template>
<script>
import Logo from '../logo';
import Sider from '../sider';

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

export default {
  components: {
    Logo,
    Sider,

    User,
    Search,
  },
  props: {
    nav: {
      default() {
        return {
          apps: [],
          menus: [],
        };
      },
      type: Object,
    },
  },
};
</script>