import Modal from '@core/component/modal'
import { MultipleForm } from '@core/component/form'
import { Messager } from '@core/component/msgDistribute'
import { fetch } from '../../../core/src/component/httpClient'
import INTERFACE from '../const/INTERFACE'
import floorManager from '../common/FloorManager'
import { FloorChannelType } from '../const'
interface moduleConfigValidateJson {
	must: boolean
}
interface moduleItemConfigJson {
	datasource: string
	name: string
	title: string
	validate: moduleConfigValidateJson | any
}
interface moduleConfigJson {
	id: string
	title: string
	properties: moduleItemConfigJson[]
}
interface moduleJson {
	moduleType?: number
	moduleId: number
	name: string
	helpLink: string
	moduleConfig: moduleConfigJson[]
	moduleConfigData: any
}
export default class RightMenu {
	element: HTMLElement
	module: moduleJson
	moduleConfigData: moduleJson
	moduleConfigJSON: Array<any> = []
	moduleConfigModal: Modal
	multipleFormInstance: MultipleForm
	containerId: number 
	constructor(element: HTMLElement) {
		this.element = element
		this.bindEvent()
	}
	render(): void {
		this.element.innerHTML = '' 
		this.element.style.visibility = 'visible'
		this.element.style.backgroundColor = '#f8f8f8'
		this.moduleConfigModal = new Modal({
			node: $(this.element),
			width: 340,
			height: '100%',
			title: this.module.name,
			content: `<div class="J_moduleConfigWrap"></div>`,
			className: 'cd-module-form-overlay',
			showOverlay: false,
			draggable: false,
			helper: {
				url: this.module.helpLink,
				target: '_blank',
			},
			footer: {
				show: true,
				align: 'center',
				okLabel: '更新配置',
			},
			onDomReady: () => {
				this.multipleFormInstance = new MultipleForm({
					node: this.element.querySelector('.J_moduleConfigWrap'),
					skin: 'cd-m-form',
					module: this.module,
					domData: this.module.moduleConfig,
					moduleData:
						this.moduleConfigData || this.module.moduleConfigData,
				})
			},
			onPreClose: (flag) => {
				if (flag === Modal.CloseType.TYPE_CANCEL) {
					this.moduleConfigModal.close()
					this.element.innerHTML = ''
					Messager.trigger('configClosed', {
						containerId: this.containerId,
					})
				} else {
					this.saveModuleConfig()
				}
			},
		})
	}
	bindEvent() {
		Messager.on('openConfig', async (req) => {
			const { containerId } = req
			if (!containerId) {
				return
			}
			const floor = floorManager.getFloor(containerId)
			if (!floor) {
				return
			}
			const moduleType =
				floor?.floorExtInfo?.moduleType || FloorChannelType.ISV
			const reulst = await fetch({
				method: 'get',
				url: INTERFACE.getModuleConfig,
				data: {
					moduleFlag: floor.moduleFlag,
					floorId: containerId,
					moduleType,
				},
			})
			if (reulst && reulst.code == 200) {
				const { configDefineJSON, configInitData, configSaveData } =
					reulst?.data ?? {}
				this.moduleConfigJSON = configDefineJSON
				const moduleData = {
					moduleType,
					moduleId: floor.moduleId,
					name: floor.moduleName,
					helpLink:
						'//opendoc.jd.com/shop/newisv/docs/dataSource/jsonConfig',
					moduleConfig: configInitData,
					moduleConfigData: configSaveData,
				}
				this.setModuleConfig(moduleData, configSaveData, containerId)
			}
		})
		Messager.on('closeConfig', (data) => {
			if (this.moduleConfigModal) {
				this.moduleConfigModal.close()
				this.moduleConfigModal = null
			}
			this.element.innerHTML = ''
			Messager.trigger('configClosed', { containerId: this.containerId })
		})
	}
	
	saveModuleConfig() {
		const containerId = this.containerId
		this.multipleFormInstance.getData().then((configData) => {
			const data = {
				moduleType: this.module?.moduleType || FloorChannelType.ISV,
				moduleId: this.module.moduleId,
				curFloorId: containerId,
				configData: configData,
				configJson: this.moduleConfigJSON,
			}
			fetch({ url: INTERFACE.renderModule, data }).then((res) => {
				if (res && res.code == 200) {
					Messager.trigger('updateModuleData', {
						floor: res.data,
						configData,
						moduleId: this.module.moduleId,
						curFloorId: containerId,
						containerId,
					})
				}
			})
		})
	}
	
	setModuleConfig(
		module: moduleJson,
		moduleConfigData: moduleJson,
		containerId: number
	): void {
		this.module = module
		this.moduleConfigData = moduleConfigData
		this.containerId = containerId
		this.render()
	}
}