<template>
    <view :class="'easy-table-tr' + (checked ? ' easy-table-checked' : '')" @tap="toggle">
        <slot></slot>
    </view>
</template>

<script>
    export default {
        name: 'easyTableTr',
        props: {
        },
        data(){
            return{
                checked: false
            }
        },
        
        created() {
            this.tdChildren = [];
            this.root = this.getTable();
            this.isThead = this.$parent.$parent.$options.name === 'easyTableThead';
            if (!this.isThead) {
                this.root.trChildren.push(this);
            }
        },
        methods: {
            /**
             * 获取父元素实例
             */
            getTable(name = 'easyTable') {
                let parent = this.$parent;
                let parentName = parent.$options.name;
                while (parentName !== name) {
                    parent = parent.$parent;
                    if (!parent) return false;
                    parentName = parent.$options.name;
                }
                return parent;
            },
            
            check(){
                if (this.isThead) {
                    return;
                }
                this.checked = true;
            },
            
            uncheck(){
                if (this.isThead) {
                    return;
                }
                this.checked = false;
            },
            
            toggle() {
                if (this.isThead) {
                    return;
                }
                this.checked = !this.checked;
            },
            
            getTdIndex(td){
                let index = -1;
                for(let i = 0; i < this.tdChildren.length; i++){
                    if (this.tdChildren[i] === td) {
                        index = i;
                        break;
                    }
                }
                return index;
            }
        }
    }
</script>

<style lang="scss">
    .easy-table-tr {
        position: relative;
        display: flex;
    }
    
    .easy-table-tr:nth-child(even) {
        background-color: #fafafa;
    }
    
    .easy-table-checked {
        background-color: #e7f8ff !important;
    }
</style>