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

/**
 * 扩展 echarts 组件
 */
webix.protoUI(
    {
        name: 'echarts',
        defaults: {},
        $init: function (config: any) {
            this._domid = webix.uid();
            this.$view.innerHTML = `<div role="echarts" id='${this._domid}' style='width:100%;height:100%;'></div>`
            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) {
            this.isCtlLoad = false;
        },
        _set_inner_size: function () {
            if (!this.wrapper)
                return

            this.wrapper.resize();
            // this._updateScrollSize()
            // this._editor.scrollTo(0, 0) //force repaint, mandatory for IE
        },
        destructor: function () {
            if (this.$destructed) {
                return;
            }

            this.$destructed = true;
            if (this.config.on && typeof this.config.on.onDestruct === 'function') {
                this.config.on.onDestruct.call(this)
            }
        },
        $setSize: function (this: any, x: any, y: any) {
            const that = this;
            if (webix.ui.view.prototype.$setSize.call(this, x, y)) {
                _.defer(() => {
                    this._set_inner_size()
                    if (this.isCtlLoad == false) {
                        this.isCtlLoad = true
                        //@ts-ignore
                        require(['echarts'], (echarts) => {
                            const el = that.$view.children[0]
                            that.wrapper._echartsHandler = echarts.init(el)
                            that.config.on.onEchartRender.call(this)
                        })
                    }
                })
            }
        }
    },
    webix.ui.view
)

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

        if (vjson.hasOwnProperty('debugger')) {
            debugger
        }

        // 提取基础属性 onRender / ctlName / entityName 等等
        const yvanProp = parseYvanPropChangeVJson(vjson, [
            'onEchartRender',
            'onClick',
            'option'
        ])

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

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

        // 删除 vjson 所有数据, 替换为 template 语法
        _.forOwn(vjson, (value, key) => {
            delete vjson[key]
        })

        // 将 事件与 _webixConfig 一起存至 vjson 交给 webix 框架做渲染
        _.merge(vjson, that._webixConfig, {
            view: 'echarts',
            on: {
                onInited(this: any) {
                    // 初始化时回调
                    that.attachHandle(this, {...vjson, ...yvanProp})
                    this.wrapper = that
                },
                onEchartRender() {
                    // echarts.init 运行完毕之后回调
                    that._echartsHandler.on('click', (params: any) => {
                        YvEventDispatch(that.onClick, that, params)
                    })

                    if (yvanProp.option) {
                        that.setOption(yvanProp.option)
                    }
                    YvEventDispatch(yvanProp.onEchartRender, that, that)
                },
                onDestruct(this: any) {
                    if (that._echartsHandler) {
                        that._echartsHandler.dispose()
                        delete that._echartsHandler
                    }
                    that.removeHandle()
                }
            }
        })

        return that
    }

    private _echartsHandler!: echarts.ECharts

    /*============================ 公共属性部分 ============================*/
    /**
     * 数据绑定完毕后触发
     */
    onClick?: YvEvent<CtlECharts, any>

    setOption(option: any, opts?: any): void {
        this._echartsHandler.setOption(option, opts)
        _.defer(() => {
            this._echartsHandler.resize()
        })
    }

    public get handle() {
        return <any>this._echartsHandler
    }

    resize() {
        if (this._echartsHandler) {
            this._echartsHandler.resize()
        }
    }

    clear() {
        if (this._echartsHandler) {
            this._echartsHandler.clear();
        }
    }
}