import './style.scss'
import ColorPicker from '../../../colorPicker';
import BaseFormControl from "../../baseFormControl";
import {JDColorTpl} from "./tpl";
class JDColor extends BaseFormControl {
    constructor(config) {
        super(config);
        this.setConfig(config);
        this.render();
    }
    
    setConfig(config) {
        this.config = $.extend(true, {}, {
            domData: {},
            value: '#FFFFFF',
        }, config);
    }
    
    setColorValue(value) {
        if (value) {
            this.config.value = value;
        } else {
            if (this.config.moduleData) {
                this.config.value = this.config.moduleData;
            }
        }
    }
    
    render() {
        this.setColorValue();
        let colorTpl = template.render(JDColorTpl, {...this.config});
        this.appendFormControl(colorTpl);
        this.addEvent();
    }
    
    addEvent() {
        this.element.find('.J_color_node').colorpicker({
            onColorChange: (rgb, hex) => {
                this.setColorValue(hex);
            },
            onOK: (rgb, hex) => {
                this.setColorValue(hex);
                return true;
            },
            onCancel: (rgb, hex) => {
                this.setColorValue(hex);
                return true;
            }
        });
    }
    getData() {
        let colorData = {};
        if (this.config.value) {
            colorData[this.config.domData.name] = this.config.value;
            return colorData;
        } else {
            return null;
        }
    }
}
export default JDColor;