import {CtlBase} from './CtlBase'
import {CtlViewerDefault} from './CtlDefaultValue'
import {parseYvanPropChangeVJson} from './CtlUtils'
import webix from 'webix'
import _ from 'lodash'

webix.protoUI(
    {
        name: 'viewer',
        defaults: {},

        $init: function (config: any) {
            this.$view.innerHTML = `<img src="">`
            this.$ready.push(this._ready)
            _.extend(this.config, config)
            if (config.on && typeof config.on.onInited === 'function') {
                config.on.onInited.call(this)
            }
        },
        _ready: function (this: any) {
            //@ts-ignore
            require(['viewerjs'], (Viewer: any) => {
                const img = this.$view.getElementsByTagName('img')[0]
                this.viewer = new Viewer(img);
            })
        },
        _set_inner_size: function () {

        },
        _updateScrollSize: function () {

        },
        $setSize: function (x: any, y: any) {
            if (webix.ui.view.prototype.$setSize.call(this, x, y)) {
                this._set_inner_size()
            }
        }
    },
    webix.ui.view
)

export class CtlViewer extends CtlBase<CtlViewer> {
    static create(module: any, vjson: any): CtlViewer {
        const that = new CtlViewer(vjson)
        that._module = module

        _.defaultsDeep(vjson, CtlViewerDefault)

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

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

        // 将 yvanProp 合并至当前 Ctl 对象, 期间会操作 _webixConfig
        _.assign(that, yvanProp)

        // 将 事件与 _webixConfig 一起存至 vjson 交给 webix 框架做渲染
        _.merge(vjson, that._webixConfig, {
            on: {
                onInited(this: any) {
                    that.attachHandle(this, {...vjson, ...yvanProp})
                    _.defer(() => {
                        that.renderImage()
                    })
                },
                onAfterDelete() {
                    that.removeHandle()
                }
            }
        })
        return that
    }

    renderImage() {
        let img = this._webix.$view.getElementsByTagName('img')[0];

        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;
    }

    /*============================ 公共属性部分 ============================*/
    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()
    }

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

    private _value: string = ''

    private _imgWidth: string = ''

    private _imgHeight: string = ''

    private _width: any

    private _height: any


}