/**
    @name Edo.controls.AutoComplete
    @class
    @typeName autocomplete
    @description 自动搜索框
    @extend Edo.controls.ComboBox
*/
Edo.controls.AutoComplete = function(){        
    Edo.controls.AutoComplete.superclass.constructor.call(this);
    /**
         @name Edo.controls.AutoComplete#beforequery
         @event
         @description 查询前
         @property {Boolean} queryParams 查询参数对象
    */
    /**
         @name Edo.controls.AutoComplete#query
         @event
         @description 查询后
         @property {String} data 查询返回的文本数据
    */    
}
Edo.controls.AutoComplete.extend(Edo.controls.ComboBox,{
    /**
        @name Edo.controls.AutoComplete#changeAction
        @property
        @type String
        @default keyup
        @description 查询内容改变激发事件 
    */
    changeAction: 'keyup',
    /**
        @name Edo.controls.AutoComplete#popupHeight
        @property
        @type Number
        @default 120
        @description 下拉框高度
    */
    popupHeight: 120,
    popupWidth: '100%',
    /**
        @name Edo.controls.AutoComplete#url
        @property
        @type String
        @description 查询地址
    */
    url: '',
    /**
        @name Edo.controls.AutoComplete#queryDelay
        @property
        @type Number
        @default 500
        @description 延迟查询间隔
    */
    queryDelay: 500,
    
    popupShadow: false,
    
    pageVisible: false,
    
    autoFill: true,
    
    maxSize: 10,
    
    //rootField: '',
    
    initEvents: function(){    
        if(!this.design){
            this.on('popupshow', this._onpopupshow, this, 0);
            this.on('keyup', this._onkeyup, this, 0);     
            this.on('trigger', this._ontrigger, this, 0);       
        }
        Edo.controls.AutoComplete.superclass.initEvents.call(this);
    },
    
    _onpopupshow: function(e){
        var combo = this;
        if(!this.pager){
        
            this.popupCt.set({
                verticalGap: 0
            });
            this.popupCt.addChild({
                visible: this.pageVisible,
                infoVisible: false,
                type: 'pagingbar',
                name: 'pager',
                cls: 'e-toolbar',
                border: [0,1,0,1],
                onpaging: function(e){
                    combo.query(combo.text, this.index, this.size);
                }
            });
            this.table.set('autoHeight', false);
            
//            this.popupCt.addChild({
//                type: 'box',
//                width: '100%',                
//                border: 0,
//                layout: 'horizontal',
//                horizontalAlign: 'right',
//                children: [
//                    {
//                        type: 'button',
//                        cls: 'e-toolbar',
//                        text: '取消'
//                    },
//                    {
//                        type: 'button',
//                        width: 50,
//                        text: '确定'
//                    }
//                ]
//            });
            this.pager = Edo.getByName('pager', this.popupCt)[0];
            
        }
    },
    _onkeyup: function(e){
        
        if(e.keyCode == 40){
            this.showPopup();
            if(this.data.getCount() == 0){
                this.pager.change();
            }else{
                //鼠标移动操作表格行
            }
        }else if(e.keyCode == 13){
            this.hidePopup();
        }else{
            var key = this.field.value;
//            if(key == ''){
//                this.data.clear();
//                //this.hidePopup();
//                return;
//            }
            this.showPopup();
            this.pager.change();
        }
    },
    _ontrigger: function(e){
        if(this.data.getCount() == 0){
            this.pager.change();
        }
    },
    
    query: function(key, index, size){        
//        if(key == '') {      
//            return;
//        }
        if(this.selectedItem && this.selectedItem[this.displayField] == key){
            return;
        }
        
        var params = {
            key: key,
            index: index || 0,
            size: size || this.maxSize
        };
        var e = {
            type: 'beforequery',
            source: this,
            queryParams: params
        };
        if(this.fireEvent('beforequery', e) === false) return;
        
        this.table.loadingMask = true;
        this.table.zeroMask = true;
        this.table.mask();
        
        if(this.queryTimer){
            clearTimeout(this.queryTimer);
            this.queryTimer = null;
        }
        var combo = this;
        this.queryTimer = setTimeout(function(){
            combo.doQuery(e.queryParams);
        }, this.queryDelay);
        
    },    
    doQuery: function(params){
        var combo = this;        
                
        if(this.queryAjax){
            Edo.util.Ajax.abort(this.queryAjax);
        }
        
        this.queryAjax = Edo.util.Ajax.request({
            url: this.url,
            params: params,
            onSuccess: function(text){ 
            
                if(combo.autoFill){
                    var data = Edo.util.Json.decode(text);
                    combo.data.load(data);
                }
                combo.fireEvent('query', {
                    type: 'query',
                    success: true,
                    data: text
                });
                combo.table.unmask();
            },
            onFail: function(code){
                if(combo.autoFill){
                    combo.data.clear();
                }
                combo.fireEvent('query', {
                    type: 'query',
                    success: false,
                    errorCode: code
                });
                combo.table.unmask();
            }
        });
        
    },
    _onTextChange: function(e){        
        Edo.controls.AutoComplete.superclass._onTextChange.call(this, e);
        if(this.field.value == ""){
            this.set('selectedIndex', -1);
        }
    }
    ,
    setValue: function(v){
        if(v && this.selectedItem != v){
            this.selectedItem = v;
            this.set('text', v[this.displayField]);
        }                    
    },
    getValue: function(){
        var o = this.selectedItem;        
        if(o) o = o[this.valueField];
        return o;
    }
});
Edo.controls.AutoComplete.regType('autocomplete');