<template>
  <IxDrawer v-model:visible="showMenuPanel"
      class="menu-panel"
      container="#content-container"
      header="智慧物联系统"
      placement="start"
      width="80rem">
    <div class="menu-content">
      <IxMenu
          :dataSource="menuTree"
          :expandedKeys="expandedKeys"
          :selectable="false"
          class="menu-tree"
          mode="inline"
          @click="menuClickHandler"
          @update:expandedKeys="onExpandedChange">
      </IxMenu>
      <div v-if="currentMenuGroup != null" class="menu-list-panel">
        <div>{{ currentMenuGroup.title }}</div>
        <div>
          <div v-for="item in currentMenuGroup.children" class="menu-list-wrapper">
            <template v-if="item.menuCategory === MenuCategory.Group">
              <div class="menu-group">{{ item.title }}</div>
              <div v-for="item__ in item.children" class="menu-item" @click="openPageHandler(item__)">
                <span>{{ item__.title }}</span>
                <IxIcon :class="{'menu-bookmarked': collectedMenus.includes(item__.id)}" class="menu-bookmark" name="bookmark" @click.stop="bookmarkHandler(item__)"/>
              </div>
            </template>
            <template v-else-if="item.menuCategory === MenuCategory.Page">
              <div class="menu-item" @click="openPageHandler(item)">
                <span>{{ item.title }}</span>
                <IxIcon :class="{'menu-bookmarked': collectedMenus.includes(item.id)}" class="menu-bookmark" name="bookmark" @click.stop="bookmarkHandler(item)"/>
              </div>
            </template>
          </div>
        </div>
      </div>
      <div v-else class="menu-list-panel_"></div>
    </div>
  </IxDrawer>
</template>

<script lang="ts" setup>
import { VKey } from '@idux/cdk'
import colls from '@/common/utils/colls.ts'
import {
  MenuClickOptions,
  MenuData
} from '@idux/components/menu'
import Nav from '@/common/router/nav.ts'
import { useAppSettingStore } from '@/common/app/app-setting-store.ts'
import {
  HomeMenu,
  MenuCategory
} from '@/common/app/contants.ts'
import MenuPanelApi from '@/pages/main-zone/menu-panel/menu-panel-api.ts'
import { reloadUserInfo } from '@/common/app'
import Toast from '@/components/toast'

const showMenuPanel = ref(false)

const appSettingStore = useAppSettingStore()

const collectedMenus = computed(() => appSettingStore.collectedMenus.map(it => it.id))

const menuTree = computed(() => {
  return colls.toTree(appSettingStore.menus
      .filter(it => it.id !== HomeMenu.id)
      .map(it => ({
        id: it.id,
        pid: it.pid,
        key: it.id,
        label: it.title,
        type: it.tier === 2 ? 'item' : 'sub',
      }))) as MenuData[]
})

const currentMenuGroup = ref<AppTypes.Menu | null>(null)

function menuClickHandler(options: MenuClickOptions) {
  if (options.type !== 'item') return
  currentMenuGroup.value = appSettingStore.menus.find(it => it.id === (options.key as string)) as AppTypes.Menu
}

const rootMenuSubKeys = computed(() => {
  return appSettingStore.menus.filter(it => it.tier === 1).map(it => it.id as VKey)
})

const expandedKeys = ref<VKey[]>([])

function onExpandedChange(keys: VKey[]) {
  const lastExpandedKey = keys.find(key => !expandedKeys.value.includes(key))
  if (rootMenuSubKeys.value.indexOf(lastExpandedKey!) === -1) {
    expandedKeys.value = keys
  } else {
    expandedKeys.value = lastExpandedKey ? [ lastExpandedKey ] : []
  }
}

function bookmarkHandler(data: AppTypes.Menu) {
  collectedMenus.value.includes(data.id)
  const bookmark = !collectedMenus.value.includes(data.id)
  MenuPanelApi.bookmark(data.id, bookmark)
      .then(() => {
        if (bookmark) Toast.success('收藏成功')
        else Toast.success('已取消')
        reloadUserInfo()
      })
}

function openPageHandler(data: AppTypes.Menu) {
  Nav.open({
    insId: data.routeName,
    routeName: data.routeName
  })
}

defineExpose({showMenuPanel})
</script>

<style lang="stylus" scoped>
.menu-content {
  width: 100%;
  height: 100%;
  display flex
}

.menu-tree {
  height: 100%;
  width: 20rem;
  box-shadow none
  border-right 1px solid var(--ix-color-border-secondary);
  overflow-y: auto;
}

.menu-list-panel {
  height: 100%;
  flex: 1;
  margin-left 1rem
  display flex
  flex-direction column

  & > div:nth-child(1) {
    margin: 1rem 0;
    font-size: var(--ix-font-size-header-md);
    font-weight: var(--ix-font-weight-header);
  }

  & > div:nth-child(2) {
    display flex
    flex-wrap wrap
    overflow-y auto
  }
}

.menu-list-wrapper {
  box-sizing border-box
  margin-bottom 2rem
  width 50%
  padding 1rem 1rem 0 2rem
}

.menu-group {
  font-weight: 700;
  margin-bottom: .5rem;
}

.menu-item {
  padding: 0.5rem 1rem;
  cursor: pointer;
  position: relative;
  display flex
  justify-content space-between;
  align-items: center
  border-radius: 4px

  &:hover {
    background-color: var(--ix-color-container-bg-hover);
  }

  & > span {
    display: block;
  }

  &:hover > .menu-bookmark {
    color: var(--ix-color-warning)
  }

  .menu-bookmark.menu-bookmarked {
    color: var(--ix-color-warning)
  }

  .menu-bookmark {
    display: block;
    color: var(--ix-color-border-secondary)
  }
}

.menu-list-panel_ {
  background-color: var(--ix-color-border-secondary);
}

</style>
