import { createApp } from 'vue/dist/vue.esm-bundler.js'
import components from '~src/components/table-form/install'

//表单渲染
export default class HTableForm {

    static tableFormApp = null
    static tableFormVM = null

    static createForm({ template, tableForm, appId, onRight, onFormDataChange }) {
        const app = createApp({
            //自定义组件，需要把饿了么的组件，或者自定义组件手动传递进来绑定，否则渲染时，自定义组件不会生效
            components,
            data() {
                return {
                    formData: tableForm,
                }
            },
            //监听数据，伪双向绑定（v-model）
            watch: {
                formData: {
                    handler(obj) {
                        tableForm = obj
                        this.formDataChange(obj)
                    },
                    deep: true,
                },
            },
            methods: {
                //表单数据改变
                formDataChange(obj) {
                    if (onFormDataChange) {
                        onFormDataChange(obj)
                    }
                },
                //改变表单数据
                setFormData(obj) {
                    this.formData = obj
                },
                //鼠标右键菜单
                contextmenuClick(a, b, c, d, e, f, event) {
                    event.preventDefault()
                },
                //鼠标右键事件
                RightClick(a, b, c, d, e, f, event) {
                    setTimeout(() => {
                        const KeyName = event?.target?.getAttribute('data-key') || ''
                        if (onRight) {
                            event.preventDefault()
                            onRight(event, a, b, c, d, e, f, KeyName)
                        }
                    }, 100)
                },
                //焦点事件
                getInformation() {},
                //失去焦点事件
                getRegularExpression() {},
                //日期选择事件
                datePickerChange() {},
                //上传完成
                formUploadSuccess() {},
                //删除上传的文件
                delTableFormFile() {},
                //远程搜索处理
                formRemoteChange() {},
                //多选框处理
                checkboxGroupChange() {},
                //键盘事件 上键
                keyupShiftUp() {},
                //键盘事件 下键
                keyupShiftDown() {},
                //键盘事件 左键
                keyupShiftLeft() {},
                //键盘事件 右键
                keyupShiftRight() {},
                //日期时间框键盘事件
                dateKeydown() {},
                //输入左键点击事件
                inputLeftClick() {},
                setChartRefs() {},
            },
            //html标签数据
            template,
        })
        const vm = app.mount(appId)
        this.tableFormApp = app
        this.tableFormVM = vm
        return { app, vm }
    }

    //卸载全局按键监听
    static unmountEventKey() {
        document.onkeydown = null
        document.onkeyup = null
    }

    //卸载实例
    static unmountFormApp() {
        if (this.tableFormApp) {
            this.tableFormApp?.unmount()
            this.tableFormApp = null
        }
    }
}
