<script setup>
import { AntDesignOutlined } from '@ant-design/icons-vue'
import router from '@/router/index.js'
import { useSystemStore } from '@/stores/system.js'
import { computed } from 'vue'

const title = computed(() => import.meta.env.VITE_APP_TITLE)

const systemStore = useSystemStore()

const selectMenu = ({ item, key }) => {
  if (item.link) {
    // 显示网页
    router.push({
      name: 'WebView',
      query: { link: item.link },
    })
  } else {
    router.push(key)
  }
}

const toHome = () => router.push({ path: '/' })
</script>

<template>
  <div>
    <div class="title" @click="toHome">
      <AntDesignOutlined />
      <span style="margin-left: 12px">{{ title }}</span>
    </div>
    <AMenu :items="systemStore.fmtMenus" mode="inline" theme="dark" @select="selectMenu" />
  </div>
</template>

<style lang="scss" scoped>
.title {
  color: white;
  height: 64px;
  line-height: 64px;
  padding-left: 26px;
  font-size: 1.8rem;
  overflow: hidden;
}
</style>
