<template>
  <div class="_menu_layout v-card" :class="{ close_menu }">
    <div class="user_layout">
      <img class="avatar" :src="$store.user.photo?.fileLinkTransfer() || '/logo.svg'" />
      <div class="username"><span>用户名：</span>{{ $store.user.name }}</div>
      <div class="role">
        <span>角&nbsp;&nbsp;&nbsp;色：</span>{{ $store.user.roleName }}
      </div>
    </div>

    <div class="menu">
      <div class="menu_item">
        <RouterLink to="/">
          <MenuTitle label="首页" icon="el-icon-s-home" :showRightIcon="false" />
        </RouterLink>
      </div>
      <div
        v-for="(v, i) in menus"
        :key="v.name"
        @mouseenter="hoverMenu(i)"
        class="menu_item"
      >
        <MenuTitle
          :icon="v.icon"
          :actived="active_menu == v.name"
          :label="v.label"
          :showRightIcon="v.children?.length ? true : false"
          @click.native="openSub(v)"
        />

        <div
          class="sub_layout"
          :style="{
            maxHeight: active_menu == v.name ? `${46 * v.children.length}px` : 0,
          }"
        >
          <RouterLink
            class="menu_sub"
            v-for="m in v.children"
            :key="m.name"
            :to="`/${v.name}/${m.name}`"
            >{{ m.label }}</RouterLink
          >
        </div>
      </div>
    </div>

    <div
      v-if="hover_menu_index != null"
      :style="`transform:translateY(${hover_menu_index * 61}px);`"
      class="hover_sub_layout"
    >
      <div class="v-card sub_layout">
        <RouterLink
          class="menu_sub"
          v-for="m in menus[hover_menu_index].children"
          :key="m.name"
          :to="`/${menus[hover_menu_index].name}/${m.name}`"
          >{{ m.label }}</RouterLink
        >
      </div>
    </div>

    <div class="open_icon el-icon-d-arrow-left" @click="changeCloseMenu" />
  </div>
</template>

<script>
import { lst } from '@/utils'

export default {
  components: {
    MenuTitle: {
      render (h) {
        const { actived, label, icon, showRightIcon = true } = this.$attrs
        return h(
          'div',
          { class: ['menu_title', icon, { actived }], attrs: { title: label } },
          [
            h('span', { class: 'menu_label' }, label),
            showRightIcon && h('i', { class: 'menu_right_icon el-icon-arrow-right' })
          ]
        )
      }
    }
  },

  data: () => ({
    active_menu: '',
    hover_menu_index: null,
    close_menu: false,
    last_path: ''
  }),

  created () {
    this.menus = lst.get('menu')
  },

  mounted () {
    this.$el.addEventListener('mouseleave', this.cleanSubMenuHover)
  },

  beforeDestroy () {
    this.$el.removeEventListener('mouseleave', this.cleanSubMenuHover)
  },

  methods: {
    handleMenuClick ({ keyPath }) {
      const path = '/' + keyPath.reverse().join('/')
      if (this.$route.path !== path) this.$router.push(path)
    },

    openSub (v) {
      if (v.children) {
        this.active_menu = this.active_menu === v.name ? '' : v.name
      } else {
        this.$router.push({ path: '/' + v.name })
      }
    },

    changeCloseMenu () {
      this.close_menu = !this.close_menu
      this.hover_menu_index = null
    },

    hoverMenu (index) {
      if (this.hover_menu_index === index) return
      if (!this.close_menu) return
      this.hover_menu_index = index
    },

    cleanSubMenuHover () {
      this.hover_menu_index = null
    }
  }
}
</script>

<style lang="scss">
._menu_layout {
  width: 218px;
  max-width: 218px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: max-width 0.2s;
  position: relative;

  .user_layout {
    font-size: 10px;
    text-align: center;
    transition: font-size 0.2s;

    .avatar {
      width: 10em;
      height: 10em;
      margin-top: 24px;
      margin-bottom: 18px;
      padding: 3px;
      border-radius: 50%;
      overflow: hidden;
      border: 1px solid $--color-primary;
      overflow: hidden;
    }

    .username,
    .role {
      margin: 0 28px;
      text-align: left;
      height: 24px;
      max-height: 24px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      transition: max-height 0.2s;

      span {
        font-weight: bold;
        color: #3d3d3d;
      }
    }
  }

  .menu {
    flex: 1;
    height: 0;
    overflow: hidden overlay;
  }

  .menu_item {
    margin: 0 18px;
    border-top: 1px solid #e9e8ee;
  }

  .menu_title {
    margin: 12px 0;
    height: 36px;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 15px;
    color: #3d3d3d;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.16s;

    &::before {
      color: $--color-primary;
      font-weight: 300;
      font-size: 20px;
      transition: transform 0.2s, font-size 0.2s;
    }

    .menu_label {
      flex: 1;
      margin: 0 5px;
    }

    .menu_right_icon {
      color: #d8d8d8;
      transition: transform 0.2s;
    }

    &.actived .menu_right_icon {
      transform: rotate(90deg);
    }
  }

  .menu_sub {
    display: block;
    margin: 0 12px 10px;
    padding: 0 16px;
    white-space: nowrap;
    line-height: 36px;
    color: #999;
    font-size: 13px;
    border-right: 3px solid transparent;
    cursor: pointer;

    &:hover,
    &.router-link-active {
      border-color: $--color-primary;
      color: $--color-primary;
      background-color: #e7f7f7;
    }
  }

  .sub_layout {
    overflow: hidden;
    transition: max-height 0.2s ease;
  }

  .open_icon {
    margin: 12px;
    line-height: 32px;
    text-align: center;
    font-size: 14px;
    color: $--color-primary;
    border-radius: 3px;
    border: 1px solid rgba($color: $--color-primary, $alpha: 0.08);
    background-color: rgba($color: $--color-primary, $alpha: 0.08);
    cursor: pointer;

    &:hover {
      border-color: rgba($color: $--color-primary, $alpha: 0.5);
    }
  }

  &.close_menu {
    max-width: 60px;

    .user_layout {
      font-size: 4px;

      .username,
      .role {
        max-height: 0;
      }
    }

    .menu {
      &_title::before {
        font-size: 24px;
      }

      &_title:hover {
        transform: scale(1.6);
      }

      &_label {
        white-space: nowrap;
        overflow: hidden;
      }

      &_right_icon {
        display: none;
      }

      .sub_layout {
        max-height: 0 !important;
      }
    }

    > .hover_sub_layout {
      padding-left: 4px;
      position: absolute;
      top: 94px;
      left: 100%;
      z-index: 99;
      min-width: 180px;

      .sub_layout {
        padding-top: 16px;
        padding-bottom: 8px;
        background-color: #fff;
      }
    }

    .open_icon {
      transform: rotate(180deg);
    }
  }
}
</style>
