import {CtlBase} from './CtlBase'
import {parseYvanPropChangeVJson} from './CtlUtils'
import {YvEvent, YvEventDispatch} from './YvanEvent'
import {CtlImageDefault} from './CtlDefaultValue'


/**
 * 按钮组件
 * @author yvan
 */
export class CtlImage extends CtlBase<CtlImage> {
    static create(module: any, vjson: any): CtlImage {
        const that = new CtlImage(vjson)
        that._module = module

        _.defaultsDeep(vjson, CtlImageDefault)

        const yvanProp = parseYvanPropChangeVJson(vjson, [
            'value',
            'width',
            'height',
            'imgWidth',
            'imgHeight'
        ])

        // 将 vjson 存至 _webixConfig
        that._webixConfig = vjson

        // 将 yvanProp 合并至当前 Ctl 对象
        _.assign(that, yvanProp)

        // 将 _webixConfig 合并至 vjson, 最终合交给 webix 做渲染
        _.merge(vjson, that._webixConfig, {
            view: 'template',
            template: that.getImageHtml(),
            on: {
                onInited: function (this: any) {
                    that.attachHandle(this, {...vjson, ...yvanProp})
                },
                onDestruct() {
                    that.removeHandle()
                }
            }
        })

        return that
    }

    /*============================ 公共属性部分 ============================*/
    set value(nv: string) {
        this._value = nv;
    }

    get value(): string {
        return this._value;
    }

    get imgWidth(): string {
        return this._imgWidth;
    }

    set imgWidth(nv: string) {
        this._imgWidth = nv;
    }

    get imgHeight(): string {
        return this._imgHeight;
    }

    set imgHeight(nv: string) {
        this._imgHeight = nv;
    }

    get width(): any {
        return this._width;
    }

    set width(nv: any) {
        this._width = nv;
        if (!this._webix) {
            if (nv) {
                this._webixConfig.width = nv
            } else {
                delete this._webixConfig.width
            }
            return
        }

        this._webix.define('width', nv)
        this._webix.resize()
    }

    get height(): any {
        return this._height;
    }

    set height(nv: any) {
        this._height = nv;
        if (!this._webix) {
            if (nv) {
                this._webixConfig.height = nv
            } else {
                delete this._webixConfig.height
            }
            return
        }

        this._webix.define('height', nv)
        this._webix.resize()
    }
    public getImageHtml(): string {
        let img;
        if (this._webix) {
            img = this._webix.$view.getChildByName("img");
        }
        if (!img) {
            img = document.createElement("img");
        }
        if (this._imgWidth.endsWith('px') || this._imgWidth.endsWith('%')) {
            img.style.width = this._imgWidth;
        } else {
            img.style.width = ''
        }
        if (this._imgHeight.endsWith('px') || this._imgHeight.endsWith('%')) {
            img.style.height = this._imgHeight;
        } else {
            img.style.height = ''
        }
        img.src = this.value;
        return img.outerHTML;
    }

    /*============================ 私有属性部分 ============================*/

    private _value: string = ''

    private _imgWidth: string = ''

    private _imgHeight: string = ''

    private _width: any

    private _height: any

    private _refreshImage(): void {
        const nv = this.getImageHtml()
        if (!this._webix) {
            this._webixConfig.template = nv
            return
        }
        this._webix.setTemplate(nv)
    }

}