import './form.scss'
import { formTpl } from './formTpl'
import FormModules from './formModules'
const Form = (($) => {
    const DefaultConfig = {
        node: '',
        module: null,
        skin: 'cd-form',
        moduleInfo: {},
        domData: [],
        moduleData: {},
    }
    class Form {
        constructor(config) {
            this.config = this.getConfig(config)
            this.element = $(this.config.node) 
            this.formContent = $(formTpl)
            this.element.append(this.formContent)
            
            this.instanceList = []
            this.getPlatFrom()
            this.setSkin()
            this.getModuleByFormTypeOrDatasource()
        }
        
        getPlatFrom() {
            this.platForm = page_data.clientType || 'M'
        }
        
        renderProperties(properties) {
            const { module: configModule } = this.config
            $.each(properties, (i, item) => {
                let moduleKey = ''
                
                if (item.formType) {
                    moduleKey = item.formType.type || item.datasource
                } else {
                    moduleKey = item.datasource || item.dataType
                }
                console.log('moduleKey', moduleKey)
                let module = FormModules[moduleKey.toLocaleUpperCase()]
                
                this.getPlatFrom()
                if (typeof module === 'function') {
                    this.initModule(module, item)
                }else{
					console.log('没有定义' + moduleKey.toLocaleUpperCase() + '的数据源的实现函数')
				}
            })
        }
        
        getModuleByFormTypeOrDatasource() {
            let { domData, moduleInfo, moduleData } = this.config
            let properties = []
            properties = domData.properties
            this.renderProperties(properties)
        }
        
        initModule(Module, item) {
            let _moduleData = this.config.moduleData[item.name] || item.default
            if (
				item.formType &&
				item.formType.type === 'radio' &&
				_moduleData === undefined
			) {
				const _radioOptions = item.formType.option
				const _checkedOptionItem = _radioOptions.filter(
					(option) => option.checked === true
				)
				_moduleData = _checkedOptionItem[0].value
			}
            let moduleConfig = {
                node: this.element,
                type: item.type,
                domData: item,
                moduleInfo: this.config.moduleInfo, 
                value: _moduleData,
                defaultChecked: _moduleData,
                moduleData: _moduleData,
                defaultImage: _moduleData,
                defaultSelected: _moduleData,
                defaultDate: _moduleData,
                defaultValue: _moduleData,
                centerModules: this.config.centerModules, 
                module: this.config.module,
                platForm: this.platForm,
                formContent: this.formContent,
                isSDK: this.config.isSDK,
                asyncHandler: this.config.asyncHandler,
                curTemplate: this.config.curTemplate,
                moduleId: this.config.moduleId, 
                formInstance: this,
            }
            let instance = new Module(moduleConfig)
            this.instanceList.push(instance)
        }
        
        setSkin() {
            this.element &&
                this.element
                    .find('.cd-form-container')
                    .addClass(this.config.skin)
        }
        
        getConfig(config) {
            return $.extend(true, {}, DefaultConfig, config)
        }
        getData() {
            return new Promise((resolve) => {
                let promiseArr = []
                $.each(this.instanceList, function (index, item) {
                    let formData = item.getData()
                    if (formData && formData.hasError) return false
                    const dataSource = item.config.domData.datasource
                    if (
                        dataSource === 'J_COMMON_SKU_MATERIAL' ||
                        dataSource === 'J_SECKILL_SKU_MATERIAL' ||
                        dataSource === 'J_PINGOU_SKU_MATERIAL' ||
                        dataSource === 'J_PRESELL_SKU_MATERIAL' ||
                        dataSource === 'J_ADV_MATERIAL' ||
                        dataSource === 'J_AUCTION_SKU_MATERIAL'
                    ) {
                        promiseArr.push(formData)
                    } else {
                        if (
                            this.config.isSDK &&
                            this.config.platForm == 'M' &&
                            dataSource == 'J_PICTURE_HOTSPOT'
                        ) {
                            formData['pictureHotspot'] &&
                                formData['pictureHotspot'][
                                    'pictureList'
                                ].forEach((picHotItem) => {
                                    if (
                                        picHotItem['lingBannerId'] &&
                                        picHotItem['lingTemplateId']
                                    ) {
                                        delete picHotItem['lingBannerId']
                                    }
                                })
                        }
                        promiseArr.push(Promise.resolve(formData))
                    }
                })
                Promise.all(promiseArr).then((data) => {
                    let result = data.reduce((acc, val) => {
                        return $.extend(acc, val)
                    }, {})
                    resolve(result)
                })
            })
        }
        
        dispose() {
            this.element.off('click')
            this.element.html('')
            delete this
        }
    }
    return Form
})($)
export default Form