import _ from 'lodash'
import {combo} from '../Defaults'
import {baseConfig} from "./base";
import {dataSourceReload} from "../DataSourceHelper";

export default function () {
    const cc = Ext.form.field.ComboBox.prototype.constructor
    const {initComponent, setData} = Ext.form.field.ComboBox.prototype
    Ext.form.field.ComboBox.override({
        constructor(config) {
            const newConfig = _.defaultsDeep({
                // 强制性属性

            }, baseConfig(config, 'col-item'), config, combo)

            if (typeof newConfig.store == 'undefined') {
                if (_.isArray(newConfig.data)) {
                    // ExtJS 无法直接接受数组模式
                    newConfig.store = {
                        fields: [newConfig.valueField, newConfig.displayField],
                        data: newConfig.data
                    }
                    delete newConfig.data

                } else if (typeof newConfig.data !== 'object') {
                    newConfig.store = {
                        fields: [newConfig.valueField, newConfig.displayField],
                        data: []
                    }
                    delete newConfig.data
                }
            }

            cc.call(this, newConfig)
        },

        setData(value) {
            const {config} = value
            if (!this.store) {
                this.store = new Ext.data.Store({
                    fields: [config.valueField, config.displayField],
                    data: value
                })
            } else {
                this.store.getProxy().setData(value)
                this.store.load()
            }
        },

        setLoading(value) {
            if (value) {
                if (!this.loadMask) {
                    this.loadMask = new Ext.LoadMask(this, {msg: "loading..."});
                }
            } else {
                if (this.loadMask) {
                    this.loadMask.destroy()
                    delete this.loadMask
                }
            }
        },

        reload() {
            dataSourceReload(this)
        },

        initComponent() {
            const that = this
            const toggle = () => {
                if (that.isExpanded) {
                    that.collapse()

                } else {
                    that.expand();
                    that.doQuery(that.allQuery, true);
                }
            }

            this.on({
                afterrender() {
                    const {config} = this

                    if (config.dataSource && config.autoLoad) {
                        dataSourceReload(this)
                    }

                    $(this.el.dom).on('click', toggle)
                },
                destory() {
                    $(this.el.dom).off('click', toggle)
                },
                // focus: {
                //     // 获得焦点后自动下拉
                //     fn(sender) {
                //         sender.expand();
                //         this.doQuery(this.allQuery, true);
                //     },
                // },
            })

            initComponent.call(this)
        },

    });
}