<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']"  v-if="expand">
            <template v-for="(row, index) in data" >
                <table-tr
                        :row="row"
                        :key="row._rowKey"
                        :prefix-cls="prefixCls"
                        :id="rowID(row.pid,row.id)"
                        :parenttr="row.parentTr"
                        :class="rowClasses(row._index,row.level,row.pid,row.id,row.firstR,row.hasChild)"
                        @mouseenter.native.stop="handleMouseIn(row._index)"
                        @mouseleave.native.stop="handleMouseOut(row._index)"
                        @click.native="clickCurrentRow(row._index)"
                        @dblclick.native.stop="dblclickCurrentRow(row._index)">
                    <td v-for="column in columns" :class="alignCls(column, row)">
                        <Cell
                                :fixed="fixed"
                                :prefix-cls="prefixCls"
                                :row="row"
                                :treeTable="isTreeTable"
                                :key="column._columnKey"
                                :column="column"
                                :expandLevel="levelExpand"
                                :natural-index="index"
                                :index="row._index"
                                :checked="rowChecked(row._index)"
                                :disabled="rowDisabled(row._index)"
                                :expanded="rowExpanded(row._index)"
                        ></Cell>
                    </td>
                </table-tr>
            <tr v-if="rowExpanded(row._index)">
                <td :colspan="columns.length" :class="prefixCls + '-expanded-cell'">
                    <Expand :key="row._rowKey" :row="row" :render="expandRender" :index="row._index"></Expand>
                </td>
            </tr>
            </template>
        </tbody>
        <tbody :class="[prefixCls + '-tbody']" v-else>
        <tr
                v-for="(row, index) in data"
                :key="row._rowKey"
                :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)">
                <TreeCell
                        :fixed="fixed"
                        :prefix-cls="prefixCls"
                        :treeTable="isTreeTable"
                        :row="row"
                        :column="column"
                        :expandLevel="levelExpand"
                        :natural-index="Math.random()"
                        :index="row._index"
                        :checked="rowChecked(row._index)"
                        :disabled="rowDisabled(row._index)"
                        @hasError="hasError"
                        :hasErrorAlready="hasErrorAlready"
                ></TreeCell>
            </td>
        </tr>
        </tbody>
    </table>
</template>
<script>
    // todo :key="row"
    import TableTr from './table-tr.vue';
    import Cell from './cell.vue';
    import Mixin from './mixin';
    import Expand from './expand.js';
    import TreeCell from './treeCell.vue';

    export default {
        name: 'TableBody',
        mixins: [ Mixin ],
        components: { Cell ,TreeCell,Expand,TableTr },
        props: {
            prefixCls: String,
            styleObject: Object,
            isTreeTable:{
                type:Boolean,
                default:false
            },
            isExpanded:{
                type:Boolean,
                default:false
            },
            levelExpand:Number,
            columns: Array,
            data: Array,    // rebuildData
            objData: Object,
            columnsWidth: Object,
            fixed: {
                type: [Boolean, String],
                default: false
            }
        },
        data () {
            return {
                hasErrorAlready: false,
                expand:false,
            }
        },
        created(){
          this.expand=this.$props.isExpanded;
        },
        computed: {
            expandRender () {
                let render = function () {
                    return '';
                };
                for (let i = 0; i < this.columns.length; i++) {
                    const column = this.columns[i];
                    if (column.type && column.type === 'expand') {
                        if (column.render) render = column.render;
                    }
                }
                return render;
            }
        },
        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="";
                let obj=document.getElementById(firstR);
                let vExpandLevel=0;
                vExpandLevel=parseInt(this.levelExpand);
                if(obj==undefined){
                    if(level==vExpandLevel&&vExpandLevel==0){
                        if(bHaveChild){
                            sReturn=""
                        }else{
                            sReturn="ut-table-tree-leaf"
                        }
                    }else{
                        if(level<vExpandLevel){
                            if(bHaveChild){
                                sReturn="ut-expanded"
                            }else{
                                sReturn="ut-table-tree-leaf"
                            }
                        }else{
                            if(level==vExpandLevel){
                                if(bHaveChild){
                                    sReturn=""
                                }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==vExpandLevel&&vExpandLevel==0){
                            if(bHaveChild){
                                sReturn=""
                            }else{
                                sReturn="ut-table-tree-leaf"
                            }
                        }else{
                            if(level<vExpandLevel){
                                if(bHaveChild){
                                    sReturn="ut-expanded"
                                }else{
                                    sReturn="ut-table-tree-leaf"
                                }
                            }else{
                                if(level==vExpandLevel){
                                    if(bHaveChild){
                                        sReturn=""
                                    }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;
            },
            rowExpanded(_index){
                return this.objData[_index] && this.objData[_index]._isExpanded;
            },
            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);
            },
            hasError (flag) {
                this.hasErrorAlready = flag;
            }
        }
    };
</script>
<style>
    td.focus{
        border: 1px solid #9fe8f9;
        border-radius: 5px;
    }
    td.error{
        border: 1px solid red;
        border-radius: 5px;
    }
</style>
