<template>
  <el-aside class="x-admin-sidebar" :class="classes" width="200px">
    <div class="x-admin-sidebar__toolbar">
      <Switcher v-model="showFavorites" v-show="!isSearch"></Switcher>
      <ElInput size="mini"
               v-show="isSearch"
               v-model="keyword"
               class="x-admin-sidebar__input"
               placeholder="请输入内容"
               prefix-icon="el-icon-search">
        <template #suffix>
          <i class="el-icon-close" @click="closeSearchInput"></i>
        </template>
      </ElInput>
      <div class="x-admin-sidebar__btn">
        <XIcon v-if="!isSearch"
               class="x-admin-sidebar__search"
               name="el-icon-search"
               :size="14"
               @click="showSearchInput"></XIcon>
        <XIcon class="x-admin-sidebar__pin"
               :icon="pinIcon"
               :size="14"
               @click="toggleCollapsed"></XIcon>
      </div>
    </div>
    <div class="x-admin-sidebar__wrapper">
      <XMenu v-show="!showFavorites && !keyword"
             ref="menu"
             v-bind="menuProps"
             :data="menus"
             :item-adapter="itemAdapter"
             @select="handleMenuSelect"></XMenu>
      <Favorites v-if="showFavorites && !keyword"
                 :favorites="favorites"
                 :default-active="menuProps.defaultActive"
                 @click="handleMenuClick"></Favorites>
      <SearchList v-if="keyword"
                  :keyword="keyword"
                  :list="flatMenus"
                  :default-active="menuProps.defaultActive"
                  @click="handleMenuClick"></SearchList>
    </div>
    <div class="x-admin-sidebar__helper"></div>
  </el-aside>
</template>

<script>
import { Aside as ElAside, Input as ElInput } from 'element-ui';
import { XMenu, XIcon } from '@newpearl/ui';
import { Fixed, UnFixed } from '@newpearl/icons';
import Switcher from './Switcher';
import Favorites from './Favorites';
import SearchList from './SearchList';

export default {
  inject: ['$admin'],
  components: {
    ElAside,
    XMenu,
    XIcon,
    Switcher,
    ElInput,
    Favorites,
    SearchList
  },
  props: {
    menus: Array,
    flatMenus: Array,
    favorites: Array,
    itemAdapter: Function,
    collapsed: {
      type: Boolean
    },
    menuProps: Object
  },
  data() {
    return {
      keyword: '',
      isSearch: false,
      animationEnabled: false,
      showFavorites: false
    };
  },
  computed: {
    classes() {
      return {
        'is-collapsed': this.collapsed,
        'is-animation': this.animationEnabled
      };
    },
    pinIcon() {
      return this.collapsed ? UnFixed : Fixed;
    }
  },
  methods: {
    showSearchInput() {
      this.isSearch = true;
    },
    closeSearchInput() {
      this.keyword = '';
      this.isSearch = false;
    },
    toggleCollapsed() {
      if (!this.collapsed) {
        this.timerId = setTimeout(() => {
          this.animationEnabled = true;
        }, 300);
      } else {
        this.animationEnabled = false;
      }
      this.$emit('update:collapsed', !this.collapsed);
    },
    handleMenuSelect(item) {
      this.$emit('menu-select', item);
    },
    handleMenuClick(item) {
      if (this.$refs.menu) {
        this.$refs.menu.handleSelect(item.index);
      }
    }
  },
  beforeDestroy() {
    clearTimeout(this.timerId);
  }
};
</script>
