<template>
  <div class="floating" ref="floatingRef">
    <div ref="logoRef">
      <Logo/>
    </div>
    <div style="height: 30px; padding: 0 8px 8px 8px" @click="expandMenu">
      <el-input ref="searchRef" v-model="menuText" prefix-icon="Search" clearable placeholder="菜单太难找？在这里搜索。"></el-input>
    </div>
    <el-scrollbar :style="barHeight">
      <el-menu router
               :collapse-transition="false"
               :collapse="isCollapse"
               :default-active="activeMenu"
               :unique-opened="expandOneMenu">
        <menu-item-v2 v-for="item in cptMenu" :data="item"/>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup name='MenuV2' lang="ts">
import store from '@/store'
import MenuItemV2 from "./MenuItemV2.vue";
import {computed, nextTick, onMounted, reactive, Ref, ref} from "vue";
import {useRoute} from "vue-router";
import Logo from '../HeaderV2/Logo.vue'

const menuText: Ref<string> = ref(null)

const data = store.state.user.routes
const flatMenu = store.state.user.flatRoutes

const cptMenu = computed(() => {
  if (menuText.value) {
    return flatMenu.filter(item => item['metaTitle'].indexOf(menuText.value) !== -1)
  }
  return data.filter(() => {
      return true
  });
})

const expandOneMenu = computed(() => store.state.app.expandOneMenu)
const route = useRoute()
const isCollapse = computed(() => store.state.app.isCollapse)

const expandMenu = () => {
  if (isCollapse.value) {
    store.commit('app/isCollapseChange', false)
    setTimeout(() => {
      searchRef.value.focus()
    }, 100)
  }
}

const logoRef: Ref<HTMLHtmlElement> = ref(null)
const searchRef: Ref<HTMLHeadElement> = ref(null)
const floatingRef: Ref<HTMLHtmlElement> = ref(null)

const barHeight = reactive({
  height: ''
})

const activeMenu = computed(() => {
  const {meta, path} = route
  if (meta['activeMenu']) {
    return meta['activeMenu']
  }
  return path
})

onMounted(() => {
  nextTick(() => {
    barHeight.height = (floatingRef.value.clientHeight - logoRef.value.clientHeight - 36) + 'px'
  })
})

</script>

<style scoped lang="scss">
.floating {
  height: 100%;
  width: 100%;
  background-color: var(--el-menu-bg-color);

  .el-menu {
    border-right: 0 !important;
    position: relative;
  }

  .menu {
    overflow: auto;
  }

}

:deep(.el-sub-menu__title) {
  padding: 0 16px;
}
</style>
