import {tpl, noDataRendererTpl, loadingRendererTpl, tableTpl, fixedTheadTableTpl} from './pageTableTpl';
import PageBase from './PageBase';
import StringUtil from '../../util/StringUtil';
import "./pageTable.scss";
const PageTable = (($) => {
    const DefaultConfig = {
        nodataRenderer:noDataRendererTpl,
        loadingRenderer:loadingRendererTpl,
        theadRenderer:null,
        columnCount:null,
        fixedThead:false,
        columnWidth:null,
        defaultClassName:"cd-common-table"
    };
    class PageTable extends PageBase{
        constructor(config) {
            super(config);
            this.__name = "PageTable";
            this.columnCount = this._config.columnCount || 1;
        }
        _getConfig(config){
            config = $.extend(true, {}, DefaultConfig, config);
            return super._getConfig(config);
        }
        
        renderTD() {
            const {itemRenderer, nodataRenderer, loadingRenderer, loadingText, nodataText} = this._config;
            if(itemRenderer == null){
                throw Error("PageTable error: itemRenderer 不能为空");
            }
            if(this.state.loading){
                return template.compile(loadingRenderer)( {colSpan:this.columnCount, text:loadingText});
            }
            else{
                let pageData = this.state.pageData;
                if (pageData && pageData.length > 0) {
                    let _renderList = pageData.map((item, index) => {
                        let itemStr = template.compile(itemRenderer)(item);
                        return this.applyColumnWidth(itemStr);
                    })
                    return _renderList.join("");
                }
                else{
                    return template.compile(nodataRenderer)({colSpan:this.columnCount, text:nodataText});
                }
            }
        }
        
        applyColumnWidth(itemStr){
            let result = itemStr;
            let {columnWidth} = this._config;
            if(itemStr && columnWidth && columnWidth.length>0){
                let $item = $(itemStr);
                let $tdList = $item.find("td");
                if($tdList.length>0){
                    $tdList.each(function(index, td) {
                        let _w = "";
                        if(index<columnWidth.length){
                            _w = columnWidth[index];
                        }
                        if(_w){
                            $(td).css("width", _w);
                        }
                    });
                    result = $item[0].outerHTML;
                }
            }
            return result;
        }
        
        renderTheadByList(theadList){
            let result = "";
            let {columnWidth} = this._config;
            if(!columnWidth){
                columnWidth = [];
            }
            if(theadList){
                result = theadList.map((item, index)=>{
                    let _w = "";
                    if(index < columnWidth.length){
                        _w = columnWidth[index];
                    }
                    if(_w){
                        return `<th style="width:` + _w + `;">` + item + `</th>`;
                    }
                    else{
                        return `<th >` + item + `</th>`;
                    }
                });
            }
            return `<tr>`+result.join("")+`</tr>`;
        }
        
        renderThead(){
            const {theadRenderer} = this._config;
            if(theadRenderer){
                if(StringUtil.isArray(theadRenderer)){
                    this.columnCount = theadRenderer.length;
                    return this.renderTheadByList(theadRenderer);
                }
                else if(StringUtil.isString(theadRenderer)){
                    this.columnCount = this._config.columnCount || 1;
                    return theadRenderer;
                }
                else{
                    throw Error("PageTable error: theadRenderer必须是数组或者字符串类型");
                }
            }
            return "";
        }
        renderContent(){
            const {fixedThead} = this._config;
            let renderData = {
                thead:this.renderThead(),
                tdList:this.renderTD()
            };
            let renderText = "";
            if(fixedThead){
                renderText = template.compile(fixedTheadTableTpl)(renderData);
            }
            else{
                renderText = template.compile(tableTpl)(renderData);
            }
            return renderText;
        }
        
        dispose() {
            super.dispose();
        }
    }
    return PageTable;
})($);
export default PageTable;