import {CtlBase} from '../../CtlBase'
import {CtlExcelImportDefault} from '../../CtlDefaultValue'
import {parseYvanPropChangeVJson} from '../../CtlUtils'
import webix from 'webix'
import _ from 'lodash'
import {YvEvent, YvEventDispatch} from "../../YvanEvent";
import {ImportResult, RowValidateObject} from "../../YvanUIExtend";

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

        $init: function (config: any) {
            this.$view.innerHTML = `<input type="file" style="width: 200px; height: 38px; margin: 3px 2px; padding: 3px 2px" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>`
            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) {
            const input = this.$view.getElementsByTagName('input')[0]
            // //@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 CtlExcelImport extends CtlBase<CtlExcelImport> {
    static create(module: any, vjson: any): CtlExcelImport {
        const that = new CtlExcelImport(vjson)
        that._module = module

        _.defaultsDeep(vjson, CtlExcelImportDefault)

        const yvanProp = parseYvanPropChangeVJson(vjson, ['width', 'height', 'onChange'])

        // 将 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})
                    const input = that._webix.$view.getElementsByTagName('input')[0]
                    input.addEventListener("change",(e:Event, d:any)=> {
                        //@ts-ignore
                        if (e.target && e.target.files && e.target.files.length > 0) {
                            //@ts-ignore
                            that.value = e.target.files[0];
                        } else {
                            that.value = null;
                        }
                        const readExcelWithFieldSet: Function = _.get(window, 'YvanUI.readExcelWithFieldSet');
                        if (readExcelWithFieldSet !== undefined && typeof readExcelWithFieldSet === "function") {
                            readExcelWithFieldSet(that.value, vjson.fields,
                                vjson.dataStartRow,
                                vjson.titleRowNumber,
                                vjson.rowValidate?that._rowValidate.bind(that):undefined,
                                vjson.afterClientValidate?that._otherValidate.bind(that):undefined).then((result: any) => {
                                YvEventDispatch(that.onChange, that, result)
                            })
                        }

                    })
                },
                onAfterDelete() {
                    that.removeHandle()
                }
            }
        })
        return that
    }

    public reOpen() {
        const input = this._webix.$view.getElementsByTagName('input')[0]
        input.value="";
        YvEventDispatch(this.onChange, this, {allData: [], errorData: [], errorMsgData: [], okData: []})
        if(input){
            // 模拟input点击事件
            var evt = new MouseEvent("click", {
                bubbles: false,
                cancelable: true,
                view: window
            });
            input.dispatchEvent(evt)
        }
    }

    private _rowValidate(rv: RowValidateObject) {
        return YvEventDispatch(this.vjson.rowValidate, this, rv);
    }

    private _otherValidate(importResult: ImportResult, resolve: (value?: (ImportResult | PromiseLike<ImportResult> | undefined)) => void) {
        return YvEventDispatch(this.vjson.afterClientValidate, this, importResult, resolve);
    }

    /*============================ 公共属性部分 ============================*/
    /**
     * 按下按钮后触发
     */
    onChange?: YvEvent<CtlExcelImport, void>

    set value(nv: File | null) {
        this._value = nv;
    }

    get value(): File | null {
        return this._value;
    }

    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: any

    private _width: any

    private _height: any


}