<template>
  <Page :left="leftFuns">
    <MenuForm ref="menuForm" :status="formStatus"/>
  </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 { useMenuDetailStore } from '@/pages/sys/menus/menu-detail/menu-detail-store.ts'
import MenuApi from '@/pages/sys/menus/menu-api.ts'
import Toast from '@/components/toast'

const menuDetailStore = useMenuDetailStore()

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

const formStatus = computed<'create' | 'view' | 'edit'>(() => {
  return menuDetailStore.edit ? 'edit' : 'view'
})

const leftFuns = computed<PageTypes.Fun[]>(() => {
  return [
    {
      title: '查看列表',
      mode: 'text',
      icon: 'view-list',
      onClick() {
        Nav.open('menus')
      }
    },
    /*     {
     title: '上一条',
     mode: 'text',
     icon: 'arrow-left',
     onClick() {
     }
     }, */
    {
      title: menuDetailStore.edit ? '提交' : '编辑',
      mode: 'text',
      icon: menuDetailStore.edit ? 'check' : 'edit',
      onClick() {
        if (!menuDetailStore.edit) {
          menuDetailStore.$patch({edit: true})
          return
        }
        const toastId = Toast.loading('正在提交')
        MenuApi
            .modify({id: menuDetailStore.id!, ...menuForm.value!.getValue()})
            .then(_ => {
              Toast.success('修改成功')
            })
            .finally(() => {
              Toast.close(toastId)
            })
      }
    },
    /*     {
     title: '下一条',
     mode: 'text',
     icon: 'arrow-right',
     onClick() {
     }
     }, */
  ]
})

onMounted(() => {
  MenuApi.detail(menuDetailStore.id!)
      .then(res => {
        menuForm.value!.setValue({...res.data})
      })
})
</script>

<style lang="stylus" scoped>

</style>
