(function(KDApi, $){
    function ColorPickerEntry (model) {
        this._setModel(model)
    }

    ColorPickerEntry.prototype = {
        _setModel: function(model) {
            this.model = model
        },
        init: function(props){
            // TO DO
            initFunc(this.model, props);
        },
    };

    var initFunc = function(model, props) {
        // KDApi.loadFile可以通过路径加载js或css文件，并且在html文件头生成script或者link标签，第一个参数是路径，第二个参数是model，第三个参数是加载完成后执行的回调函数
        KDApi.loadFile(['./css/index.css', './js/colorpicker.js'], model, function() {
            // 通过路径去获取html字符串，第一个参数是路径，第二个参数是model，第三个参数是HTML模板中变量的值
            KDApi.getTemplateStringByFilePath('./html/index.art', model, {}).then(function(result) {
                model.dom.innerHTML = result;
                // 初始化颜色选择器
                initColorPicker(model, props)
            })        
        })
    };

    var initColorPicker = function(model, props){
        // 后端插件通过setData传给前端的数据，前端可以通过props.data去获取
        new Colorpicker({
            model: model,
            el: "color-picker-btn",
            color: props.data && props.data.color || undefined,
            status: props.data && props.data.status
        });
    };

    KDApi.register('wtccolorpicker', ColorPickerEntry)
})(window.KDApi, jQuery);