import { createApp } from 'vue/dist/vue.esm-bundler.js'
import { getHeader } from 'hc-vue3-ui'
import { toParse } from 'js-fast-way'

//自定义组件或二次封装的组件
import HcTableFormUpload from '~com/plugins/table-form/hc-form-upload.vue'
import HcFormCheckboxGroup from '~com/plugins/table-form/hc-form-checkbox-group.vue'
import ElTimePicker from '~com/plugins/table-form/hc-time-picker.vue'
import ElDatePicker from '~com/plugins/table-form/hc-date-picker-1.vue'
import ElRadioGroup from '~com/plugins/table-form/hc-form-radio-group.vue'

//修改过的组件
//import { ElOption, ElSelect } from 'z-element-plus' ElSelect, ElOption,

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

const components = { ElDatePicker, ElTimePicker, HcTableFormUpload, ElRadioGroup, HcFormCheckboxGroup }

//表单渲染
export default class HTableForm {

    static tableFormApp = null
    static tableFormVM = null

    static createForm({ template, tableForm, appId, onRight, onBlur, onLeftClick, onFormDataChange, onChartRefs }) {
        const app = createApp({
            //自定义组件，需要把饿了么的组件，或者自定义组件手动传递进来绑定，否则渲染时，自定义组件不会生效
            components,
            data() {
                return {
                    getTokenHeader: getHeader(),
                    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('keyname') || ''
                        if (onRight) {
                            event.preventDefault()
                            onRight(event, KeyName)
                        }
                    }, 100)
                },
                //焦点事件
                getInformation() {
                },
                //日期选择事件
                datePickerChange(val, key) {
                    this.formData[key] = val
                },
                //上传完成
                formUploadSuccess({ src, key }) {
                    this.formData[key] = src
                },
                //删除上传的文件
                delTableFormFile(key) {
                    this.formData[key] = ''
                },
                //失去焦点事件
                getRegularExpression(event, reg, msg, a, b, leng, type, c, d) {
                    const KeyName = event?.target?.getAttribute('keyname') || ''
                    if (onBlur) {
                        onBlur(event, KeyName, reg, this.formData[KeyName], msg, leng, type, c, d)
                    }
                },
                //远程搜索处理
                formRemoteChange(data) {
                    Object.keys(data).forEach(key => {
                        this.formData[key] = data[key]
                    })
                },
                //多选框处理
                checkboxGroupChange({ key, val }) {
                    this.formData[key] = val
                },
                //键盘事件 上键
                keyupShiftUp() {},
                //键盘事件 下键
                keyupShiftDown() {},
                //键盘事件 左键
                keyupShiftLeft() {},
                //键盘事件 右键
                keyupShiftRight() {},
                //日期时间框键盘事件
                dateKeydown() {},
                //输入左键点击事件
                inputLeftClick(event, key) {
                    setTimeout(() => {
                        if (onLeftClick) {
                            onLeftClick(key)
                        }
                    }, 100)
                },
                setChartRefs(el, pKeyId, key) {
                    if (onChartRefs) onChartRefs(el, pKeyId, key)
                },
            },
            //html标签数据
            template,
        })
        // 饿了么UI框架
        app.use(ElementPlus, {
            locale: zhCn,
        })
        const vm = app.mount(appId)
        this.tableFormApp = app
        this.tableFormVM = vm
        return { app, vm }
    }

    //处理日期范围数据
    static setPickerKey(data) {
        const pickerKey = data['pickerKey'] || ''
        if (pickerKey) {
            const pickerKeys = pickerKey.split(',')
            for (let i = 0; i < pickerKeys.length; i++) {
                const val = data[pickerKeys[i]] || ''
                if (val) {
                    const dataVal = val.replace(/'/g, '"')
                    data[pickerKeys[i]] = toParse(dataVal) || []
                } else {
                    data[pickerKeys[i]] = []
                }
            }
        }
        return data
    }


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

}
