<template>
  <div class="tab-list-wrapper">
    <IxButton icon="home" mode="text" @click="Nav.open('home')"/>
    <IxBreadcrumb class="breadcrumb">
      <IxBreadcrumbItem v-for="item in tabList[0].breadcrumb">{{ item }}</IxBreadcrumbItem>
    </IxBreadcrumb>
  </div>

  <!--<IxDropdown placement="bottomStart">
    <IxBreadcrumb class="breadcrumb">
      <IxBreadcrumbItem v-for="item in tabList[0].breadcrumb">{{ item }}</IxBreadcrumbItem>
    </IxBreadcrumb>
    <template #overlay>
      <IxMenu :dataSource="tabList" class="tab_list" v-bind:selectedKeys="selectedKeys" @click="openTabHandler">
        <template #itemLabel="data">
          <div class="menu-item-wrapper">
            <span>{{ data.label }}</span>
            <IxIcon v-if="data.id !== HomeMenu.routeName" name="close" @click.stop="closeTabHandler(data)"/>
          </div>
        </template>
      </IxMenu>
    </template>
  </IxDropdown>-->
</template>

<script lang="ts" setup>
import { MenuData } from '@idux/components/menu'

import Nav from '@/common/router/nav.ts'
import Evt from '@/common/utils/evt.ts'
import { useAppSettingStore } from '@/common/app/app-setting-store.ts'
import { useAppPageStore } from '@/common/app/app-page-store.ts'
import { HomeMenu } from '@/common/app/contants.ts'

const appSettingStore = useAppSettingStore()
const appPageStore = useAppPageStore()
const tabList = ref<(TabList.Tab & MenuData)[]>([ {
  id: HomeMenu.routeName,
  title: HomeMenu.title,
  routeName: HomeMenu.routeName,
  breadcrumb: HomeMenu.breadcrumb,
  key: HomeMenu.routeName,
  label: HomeMenu.title,
  type: 'item'
} ])

/* const selectedKeys = computed(() => {
  return [ tabList.value[0].id ]
})

function openTabHandler(options: MenuClickOptions) {
  const tab = tabList.value.find(it => it.id === options.key)!
  Nav.open({
    routeName: tab.routeName,
    insId: tab.id,
    title: tab.title,
  })
}

function closeTabHandler(data: MenuData) {
  Nav.close(data.key as string)
 } */

function openTab(tab: TabList.Tab & MenuData) {
  tab.breadcrumb.splice(tab.breadcrumb.length - 1, 1, tab.title)
  const oldTab = tabList.value.findIndex(it => it.id === tab.id)
  if (oldTab === -1) {
    tabList.value.unshift(tab)
    return true
  }
  if (oldTab === 0) {
    const item = tabList.value[0]
    item.title = tab.title
    item.breadcrumb = tab.breadcrumb
    return false
  }
  const item = tabList.value.splice(oldTab, 1)[0]
  item.title = tab.title
  item.breadcrumb = tab.breadcrumb
  tabList.value.unshift(item)
  return true
}

function closeTab(id: string) {
  if (id === HomeMenu.routeName) return
  const oldTabIndex = tabList.value.findIndex(it => it.id === id)
  if (oldTabIndex === -1) return
  tabList.value.splice(oldTabIndex, 1)
  if (oldTabIndex === 0) {
    const tab = tabList.value[0]
    Nav.open({
      routeName: tab.routeName,
      insId: tab.id,
      title: tab.title,
    })
  }
}

Evt.on('openPage', _ => {
  const menu = appSettingStore.menus.find(it => it.id === appPageStore.ctx.menuId)!
  openTab({
    id: appPageStore.ctx.insId,
    title: appPageStore.ctx.title,
    routeName: appPageStore.ctx.routeName,
    breadcrumb: menu.breadcrumb,
    key: appPageStore.ctx.insId,
    label: appPageStore.ctx.title,
    type: 'item'
  })
})

Evt.on('closePage', id => {
  closeTab(id)
})

onUnmounted(() => {
  Evt.off('openPage')
  Evt.off('closePage')
})

</script>

<style lang="stylus" scoped>
.tab-list-wrapper {
  display: flex
  gap: 1rem;
}

.tab_list {
  width auto

  li:hover .menu-item-wrapper i {
    display inline-block

  }
}

.menu-item-wrapper {

  span {
    display inline-block
  }

  i {
    position: absolute;
    right: 12px;
    display none

    & :hover {
      color #D9534F
    }
  }
}

/*.breadcrumb {
  cursor pointer
}*/
</style>
