<!--
 - @Author XXX
 - @Link XXX
-->
<template>
    <maDialog v-model:visible="visible" :footer="false" />
</template>

<script setup>
import { onMounted, inject, ref, h, computed } from "vue"
import { runEvent } from "../js/event.js"
import { Modal, Drawer } from "@arco-design/web-vue"
import MaForm from "@/components/ma-form/index.vue"
import { isFunction } from "lodash-es"
const props = defineProps({
    component: Object
})

const visible = ref(false)
const openDialog = () => (visible.value = true)
const getDataIndex = () => props.component?.dataIndex

const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
    await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)

const form = computed({
    get() {
        return formModel.value[getDataIndex()]
    },
    set(newVal) {
        formModel.value[getDataIndex()] = newVal
    }
})

const maDialog = (p, ctx) => {
    const componentProps = { formList: {}, options: {} }
    const evs = {}
    Object.keys(props.component).map((key) => {
        if (!/^on[A-Za-z]+/g.test(key)) {
            componentProps[key] = props.component[key]
        } else {
            if (isFunction(props.component[key])) {
                evs[key] = function () {
                    const argsList = Array.prototype.slice.call(arguments)
                    props.component[key](...argsList, { formModel, getColumnService, columns })
                }
            } else {
                evs[key] = function () {
                    const argsList = Array.prototype.slice.call(arguments)
                    rv(key, { ...argsList })
                }
            }
        }
    })
    return h(
        componentProps?.type === "drawer" ? Drawer : Modal,
        {
            ...Object.assign(componentProps, p),
            ...evs
        },
        {
            default: () =>
                h(
                    MaForm,
                    {
                        columns: componentProps.formList,
                        options: Object.assign(componentProps.options),
                        modelValue: form.value,
                        onSubmit: async (data, done) => await rv("onSubmit", { data, done })
                    },
                    componentProps?.formSlot
                ),
            ...componentProps?.dialogSlot
        }
    )
}

rv("onCreated")
onMounted(() => rv("onMounted"))

defineExpose({ openDialog, getDataIndex })
</script>
