import {createApp} from "vue/dist/vue.esm-bundler.js";
import {getTokenHeader} from '~src/api/request/header';
import {toParse} from "vue-utils-plus";
import HcTableFormUpload from "~com/plugins/table-form/hc-form-upload.vue"
import HcFormSelectSearch from "~com/plugins/table-form/hc-form-select-search.vue"
import HcFormCheckboxGroup from "~com/plugins/table-form/hc-form-checkbox-group.vue"

import {
    ElButton,ElTooltip,ElInput,ElDatePicker,ElUpload,
    ElInputNumber,ElTimePicker,ElSelect,ElOption,ElRadioGroup,
    ElRadio,ElCheckbox,ElCheckboxGroup
} from 'element-plus'

const components = {
    ElButton,ElTooltip,ElInput, ElDatePicker, ElUpload,
    ElInputNumber, ElTimePicker, ElSelect, ElOption, ElRadioGroup,
    ElRadio, ElCheckbox, ElCheckboxGroup, HcTableFormUpload, HcFormSelectSearch,
    HcFormCheckboxGroup
}

//表单渲染
export default class HTableForm {
    static createForm({template, tableForm, appId, onRight, onBlur}) {
        const app = createApp({
            data() {
                return {
                    getTokenHeader: getTokenHeader(),
                    formData: tableForm,
                }
            },
            //html标签数据
            template,
            //自定义组件，需要把饿了么的组件，或者自定义组件手动传递进来绑定，否则渲染时，自定义组件不会生效
            components,
            //监听数据，伪双向绑定（v-model）
            watch: {
                tableForm: {
                    handler(obj) {
                        this.formData = obj
                    },
                    deep: true
                },
                formData: {
                    handler(obj) {
                        tableForm = obj
                    },
                    deep: true
                },
            },
            methods: {
                //鼠标右键事件
                RightClick(a,b,c,d,e,f,event) {
                    event.preventDefault();
                    const KeyName = event?.target?.getAttribute('keyname') || ''
                    if (onRight) {
                        onRight(event, KeyName)
                    }
                },
                //焦点事件
                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) {
                    const KeyName = event?.target?.getAttribute('keyname') || ''
                    if (onBlur) {
                        onBlur(event, KeyName, reg, this.formData[KeyName], msg, leng)
                    }
                },
                //远程搜索处理
                formRemoteChange(data) {
                    Object.keys(data).forEach(key => {
                        this.formData[key] = data[key]
                    })
                },
                //多选框处理
                checkboxGroupChange({key, val}) {
                    this.formData[key] = val
                }
            }
        })
        app.mount(appId)
        return app
    }
    //处理日期范围数据
    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
    }
}
