<template>
  <BasicModal
      :title="title"
      :width="800"
      v-bind="$attrs"
      @ok="handleOk"
      @register="registerModal">
    <BasicForm @register="registerForm"/>
  </BasicModal>
</template>


<script lang="ts" setup>
import { watch, computed, inject, ref, unref, onMounted } from 'vue'

import { BasicForm, useForm } from '/@/components/Form/index'
import { BasicModal, useModalInner } from '/@/components/Modal'

import { saveOrUpdateDepart } from '../depart.api'
import { useBasicFormSchema, orgCategoryOptions } from '../depart.data'

const emit = defineEmits(['success', 'register'])
const props = defineProps({
  rootTreeData: { type: Array, default: () => [] },
})
const prefixCls = inject('prefixCls')
// 当前是否是更新模式
const isUpdate = ref<boolean>(false)
// 当前的弹窗数据
const model = ref<object>({})
const title = computed(() => isUpdate.value ? '编辑' : '新增')

//注册表单
const [registerForm, { resetFields, setFieldsValue, validate, updateSchema }] = useForm({
  schemas: useBasicFormSchema().basicFormSchema,
  showActionButtonGroup: false,
})

// 注册弹窗
const [registerModal, { setModalProps, closeModal }] = useModalInner(async data => {
  await resetFields()
  isUpdate.value = unref(data?.isUpdate)
  // 当前是否为添加子级
  let isChild = unref(data?.isChild)
  let categoryOptions = isChild ? orgCategoryOptions.child : orgCategoryOptions.root
  // 隐藏不需要展示的字段
  updateSchema([
    {
      field: 'parentId',
      show: isChild,
      componentProps: {
        // 如果是添加子部门，就禁用该字段
        disabled: isChild,
        treeData: props.rootTreeData,
      },
    },
    {
      field: 'orgCode',
      show: false,
    },
    {
      field: 'orgCategory',
      componentProps: { options: categoryOptions },
    },
  ])

  let record = unref(data?.record)
  if (typeof record !== 'object') {
    record = {}
  }
  // 赋默认值
  record = Object.assign({
    departOrder: 0,
    orgCategory: categoryOptions[0].value,
  }, record)
  model.value = record
  await setFieldsValue({ ...record })
})

// 提交事件
async function handleOk() {
  try {
    setModalProps({ confirmLoading: true })
    let values = await validate()
    //提交表单
    await saveOrUpdateDepart(values, isUpdate.value)
    //关闭弹窗
    closeModal()
    //刷新列表
    emit('success')
  } finally {
    setModalProps({ confirmLoading: false })
  }
}
</script>