<template>
  <Page :left="leftFuns">
    <UserForm ref="formIns"/>
  </Page>
</template>

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

const formIns = ref<InstanceType<typeof UserForm> | null>(null)

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

<style lang="stylus" scoped>
</style>
