<template>
    <table cellspacing="0" cellpadding="0" border="0" :style="styleObject">
        <colgroup>
            <col v-for="(column, index) in columns" :width="setCellWidth(column, index, false)">
        </colgroup>
        <tbody :class="[prefixCls + '-tbody']">
            <tr
                v-for="(row, index) in data"
                :key="row"
                :id="rowID(row.pId,row.id)"
                :parenttr="row.parentTr"
                :class="rowClasses(row._index,row.level,row.pId,row.id,row.firstR,row.hasChild)"
                @mouseenter.stop="handleMouseIn(row._index)"
                @mouseleave.stop="handleMouseOut(row._index)"
                @click.stop="clickCurrentRow(row._index)"
                @dblclick.stop="dblclickCurrentRow(row._index)">
                <td v-for="column in columns" :class="alignCls(column, row)">
                    <Cell
                        :fixed="fixed"
                        :prefix-cls="prefixCls"
                        :treeTable="isTreeTable"
                        :row="row"
                        :column="column"
                        :expandLevel="levelExpand"
                        :natural-index="index"
                        :index="row._index"
                        :checked="rowChecked(row._index)"
                        :disabled="rowDisabled(row._index)"
                        ></Cell>
                </td>
            </tr>
        </tbody>
    </table>
</template>
<script>
    // todo :key="row"
    import Cell from './cell.vue';
    import Mixin from './mixin';

    export default {
        name: 'TableBody',
        mixins: [ Mixin ],
        components: { Cell },
        props: {
            prefixCls: String,
            styleObject: Object,
            isTreeTable:{
                type:Boolean,
                default:false
            },
            levelExpand:Number,
            columns: Array,
            data: Array,    // rebuildData
            objData: Object,
            columnsWidth: Object,
            fixed: {
                type: [Boolean, String],
                default: false
            }
        },
        methods: {
            rowID:function (pID,ID) {
                return (pID==null||pID=="")?"tr_Root_"+ID+"":"tr_"+pID+"_"+ID+""
            },
            rowClasses (_index,level,pID,ID,firstR,bHaveChild) {
                return [
                    `${this.prefixCls}-row`,
                    this.rowClsName(_index),
                    {
                        [`${this.prefixCls}-row-highlight`]: this.objData[_index] && this.objData[_index]._isHighlight,
                        [`${this.prefixCls}-row-hover`]: this.objData[_index] && this.objData[_index]._isHover
                    },
                        this.treeRowClass(level,pID,ID,firstR,bHaveChild)
                ];
            },
            treeRowClass(level,pID,ID,firstR,bHaveChild){
                let sReturn=null;
                let obj=document.getElementById(firstR);
                let vExpandLevel=1;
                if(parseInt(this.levelExpand)>1){
                 vExpandLevel=parseInt(this.levelExpand)
                }
                if(obj==undefined){
                    if(level==0){
                        if(bHaveChild){
                            sReturn="ut-expanded"
                        }else{
                            sReturn="ut-table-tree-leaf"
                        }
                    }else{
                        if(level>vExpandLevel){
                            sReturn="ut-hidden"
                        }else if(!bHaveChild){
                            sReturn="ut-table-tree-leaf"
                        }
                    }
                }
                else{
                    if(this.hasClassT(obj,"rowOperate")){
                        if(pID==null||pID==""){
                            obj=document.getElementById("tr_Root_"+ID);
                            sReturn=" rowOperate"
                        }else{
                            obj=document.getElementById("tr_"+pID+"_"+ID);
                        }
                        if(this.hasClassT(obj,"ut-table-tree-leaf")){
                            sReturn="ut-table-tree-leaf "+sReturn
                        }
                        if(this.hasClassT(obj,"ut-hidden")){
                            sReturn="ut-hidden "+sReturn
                        }
                        if(this.hasClassT(obj,"ut-expanded")){
                            sReturn="ut-expanded "+sReturn
                        }
                    }else{
                        if(level==0){
                            if(bHaveChild){
                                sReturn="ut-expanded"
                            }else{
                                sReturn="ut-table-tree-leaf"
                            }
                        }else{
                            if(level>vExpandLevel){
                                sReturn="ut-hidden"
                            }else if(!bHaveChild){
                                sReturn="ut-table-tree-leaf"
                            }
                        }
                    }
                }
                return sReturn;
            },
            hasClassT:function (obj,cls) {
                return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
            },
            rowChecked (_index) {
                return this.objData[_index] && this.objData[_index]._isChecked;
            },
            rowDisabled(_index){
                return this.objData[_index] && this.objData[_index]._isDisabled;
            },
            rowClsName (_index) {
                this.$parent.treeTable=this.isTreeTable;
                return this.$parent.rowClassName(this.objData[_index], _index);
            },
            handleMouseIn (_index) {
                this.$parent.treeTable=this.isTreeTable;
                this.$parent.handleMouseIn(_index);
            },
            handleMouseOut (_index) {
                this.$parent.treeTable=this.isTreeTable;
                this.$parent.handleMouseOut(_index);
            },
            clickCurrentRow (_index) {
                this.$parent.treeTable=this.isTreeTable;
                this.$parent.clickCurrentRow(_index);
            },
            dblclickCurrentRow (_index) {
                this.$parent.treeTable=this.isTreeTable;
                this.$parent.dblclickCurrentRow(_index);
            }
        }
    };
</script>
