<template>
  <Page :left="leftFuns">
    <MenuForm ref="menuForm"/>
  </Page>
</template>

<script lang="ts" setup>
import MenuForm from '@/pages/sys/menus/menu-form/MenuForm.vue'
import Page from '@/components/page/Page.vue'
import Nav from '@/common/router/nav.ts'
import MenuApi from '@/pages/sys/menus/menu-api.ts'
import Toast from '@/components/toast'

const menuForm = ref<InstanceType<typeof MenuForm> | null>(null)

const leftFuns = computed<PageTypes.Fun[]>(() => {
  return [
    {
      title: '查看列表',
      mode: 'text',
      icon: 'view-list',
      onClick() {
        Nav.open('menus')
      }
    },
    {
      title: '提交',
      mode: 'text',
      icon: 'check',
      onClick() {
        const toastId = Toast.loading('正在提交')
        MenuApi.add(menuForm.value!.getValue())
            .then(_ => {
              Toast.success('添加成功')
              menuForm.value!.reset()
            })
            .catch(_ => {
              Toast.error('添加失败')
            })
            .finally(() => {
              Toast.close(toastId)
            })
      }
    },
  ]
})

</script>

<style lang="stylus" scoped>

</style>
