import {h, Ref, ref, VNode} from "vue";
import {Modal} from "ant-design-vue";
import {FormExpose} from "ant-design-vue/es/form/Form";
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
import FormProMax from "@/components/form/FormProMax.vue";
import {FormProMaxItemOptions, FormProMaxProps} from "@/types/components/form";

export function submitSimpleFormModal<T>(props: {
    title: string,
    formParams?: T & Record<string, any>,
    formProps?: Omit<FormProMaxProps<T>, 'formItemOptions'>,
    formOptions: FormProMaxItemOptions<T>
    submit: (params: T) => Promise<any>,
    cancel?: (params: T) => Promise<any>,
    icon?: () => VNode,
    maskClosable?: boolean,
    width?: string | number
}) {
    if (!props.formParams) props.formParams = {} as T
    if (!props.width) props.width = 520

    const formRef = ref<FormExpose>(null)
    const _formParams = ref<T>({
        ...props.formParams
    }) as Ref<T>

    Modal.confirm({
        icon: props.icon ? props.icon() : ' ',
        width: props.width,
        maskClosable: props.maskClosable ?? true,
        title: props.title,
        content: () => <FormProMax
            ref={formRef}
            v-model={[_formParams.value, 'value']}
            {...props.formProps}
            formItemOptions={props.formOptions}
        />,
        onOk: async () => {
            await formRef.value?.validate()
            await props.submit(_formParams.value);
        },
        onCancel: async () => props.cancel && await props.cancel(_formParams.value)
    })
}

export const deleteDataModal = (name: string, submit: () => Promise<any>, cancel?: () => Promise<any>) => {
    Modal.confirm({
        title: `确认删除【${name}】吗?`,
        icon: h(ExclamationCircleOutlined),
        content: h('div', {style: 'color:red;'}, '此操作将删除数据，且无法找回!'),
        onOk: async () => await submit(),
        onCancel: async () => cancel && await cancel()
    });
}
