import { tpl } from './accordionTpl';
const Accordion = (($) => {
    const EVENT_SUFFIX = '.Accordion' + Date.now();     
    const defaultConfig = {
        rootClass: 'cd-accordion-slide',        
        listNode: 'li',                           
        rowNode: '.J_rowItem',                      
        toggleNode: '.J_accordionTitle',            
        toggleClass: 'cd-content-show',                            
        rowClick: null,                         
        list: [
            {
                accordionTitle: '菜单一'
            },
            {
                accordionTitle: '菜单二'
            }
        ],
        tpl: tpl
    };
    class Accordion {
        constructor(config) {
            this._config = this._getConfig(config);
            let html = template.render(this._config.tpl, this._config);
            this._element = this._config.container;
            this._$el = $(this._element);
            this._$el.html(html);
            this._bindEvent();
        }
        
        _getConfig(config) {
            return $.extend({}, defaultConfig, config);
        }
        
        _bindEvent() {
            let that = this;
            this._$el.on('click' + EVENT_SUFFIX, this._config.toggleNode, function(e){
                let _$listItem = $(this).closest(that._config.listNode);
                let _arrow = _$listItem.find('.J_accordionArrow');
                _arrow.toggleClass('cd-accordion-arrowUp');
                _$listItem.toggleClass(that._config.toggleClass);
            });
            this._$el.on('click' + EVENT_SUFFIX, that._config.rowNode, function(e){
                let clickCallback = that._config.rowClick;
                typeof clickCallback === 'function' && clickCallback(e);
            });
        }
        
        dispose() {
            this._$el.off('click' + EVENT_SUFFIX);
            this._$el.html('');
        }
    }
    return Accordion;
})($);
export default Accordion;