<template>
  <IxProLayout
      v-model:activeKey="activeKey"
      v-model:collapsed="collapsed"
      :logo="logo"
      :menus="menuTree"
      :on-menu-click="openPageHandler"
      :theme="mergedTheme"
      :type="type"
      class="zsy-frame"
  >
    <template #siderFooter>
      <IxLayoutSiderTrigger/>
    </template>
    <template #headerExtra>
      <UserPanel/>
    </template>
    <IxCard class="zsy-frame-content">
      <RouterView #="{ Component }">
        <Transition name="page-change">
          <component :is="Component"/>
        </Transition>
      </RouterView>
    </IxCard>
  </IxProLayout>
</template>

<script lang="ts" setup>
import defaultLogo from '@/assets/images/循环.svg'
import UserPanel from '@/pages/main-zone/header-bar/UserPanel.vue'
import {
  MenuClickOptions,
  type MenuData
} from '@idux/components/menu'
import {
  ProLayoutTheme,
  type ProLayoutType
} from '@idux/pro/layout'
import Strings from '@/common/utils/strings.ts'
import { appName } from '@/common'
import { useAppSettingStore } from '@/common/app/app-setting-store.ts'
import colls from '@/common/utils/colls.ts'
import {
  HomeMenu,
  MenuCategory
} from '@/common/app/contants.ts'
import Nav from '@/common/router/nav.ts'
import Iconfont from '@/components/iconfont/Iconfont.vue'
import AppApi from '@/common/app/app-api.ts'

const appSettingStore = useAppSettingStore()
const logoImage = computed(() => {
  return Strings.isBlank(appSettingStore.logo) ? defaultLogo : AppApi.fileUrl(appSettingStore.logo!)
})
const logo = {
  image: logoImage.value,
  title: appName,
  link: '/home',
}

const type = ref<ProLayoutType>('mixin')

const activeKey = ref()
const collapsed = ref(false)

const menuTree = computed(() => {
  return colls.toTree(appSettingStore.menus
      .filter(it => it.id !== HomeMenu.id && (it.menuCategory === MenuCategory.Page || it.menuCategory === MenuCategory.Group || it.menuCategory === MenuCategory.Catalog))
      .sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0))
      .map(it => ({
        id: it.id,
        pid: it.pid,
        key: it.routeName,
        label: it.title,
        // icon: it.icon,
        icon: h(Iconfont, {className: 'ix-icon ixicon', name: it.icon as IconfontTypes.name}),
        type: it.menuCategory === MenuCategory.Page ? 'item'
            : it.menuCategory === MenuCategory.Group ? 'itemGroup'
                : 'sub',
      }))) as MenuData[]
})
const wholeTheme = ref('light')
const mix = reactive({header: 'light', sider: 'light'})
const mergedTheme = computed(() => {
  if (wholeTheme.value === 'mix') {
    return {header: mix.header, sider: mix.sider} as ProLayoutTheme
  }
  return wholeTheme.value as ProLayoutTheme
})

function openPageHandler(options: MenuClickOptions) {
  if (options.type !== 'item') return
  Nav.open({
    insId: options.key as string,
    routeName: options.key as string
  })
}

</script>

<style lang="stylus" scoped>

.ixicon {
  line-height: unset;
}

.zsy-frame {
  height: 100%;
  width: 100%;
  overflow hidden


  :deep(.ix-layout-content) {
    padding .5rem
  }

  :deep(.ix-pro-layout-logo) {
    img {
      width 2rem
    }

    h1 {
      color: rgb(22 93 255);
      font-weight: bold;
      font-size: 1.5rem
    }
  }
}

.page-change-enter-active,
.page-change-leave-active {
  transition: opacity .3s ease-in, transform .3s ease-in;
}

.page-change-enter-from {
  transform: translateX(-50px);
  opacity: 0;
}

.page-change-enter-to,
.page-change-leave-from {
  transform: translateX(0);
  opacity: 1;
}

.page-change-leave-to {
  transform: translateX(50px);
  opacity: 0;
}

.zsy-frame-content {
  width 100%
  height 100%
  background-color #F9FAFB
}

.zsy-frame-content > :deep(.ix-card-body) {
  height 100%
  width 100%
  overflow auto
}
</style>
