<template>
    <view class="easy-table-td" :style="{ width: customWidth + 'upx', 'justify-content': contentAlign, 'flex-grow': flexGrow }">
        <slot></slot>
    </view>
</template>

<script>
    export default {
        name: 'easyTableTd',
        props: {
            checked: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                flexGrow: 0,
                index: -1
            }
        },
        created() {
            this.root = this.getTable();
            this.tr = this.getTable('easyTableTr');
            this.tr.tdChildren.push(this);
            this.index = this.tr.getTdIndex(this);
        },
        computed: {
            // 根据props中的width属性 自动匹配当前th的宽度(px)
            customWidth() {
                let width = '';
                if (this.index > -1) {
                    width = this.root.thChildren[this.index].customWidth;
                }
                if (width === '') {
                    this.flexGrow = 1;
                }
                return width;
            },
        
            contentAlign() {
                let align = 'flex-start';
                if (this.index > -1) {
                    align = this.root.thChildren[this.index].contentAlign;
                }
                return align;
            }
        },
        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;
            }
        }
    }
</script>

<style lang="scss">
    .easy-table-td {
        position: relative;
        display: flex;
        padding: 12upx;
        min-height: 80upx;
        align-items: center;
        word-break: break-all;
        color: #606266;
        border-left: 1upx solid #ebeef5;
        border-top: 1upx solid #ebeef5;
        box-sizing: border-box;
    }
    
    .easy-table-td:last-child {
        border-right: 1upx solid #ebeef5;
    }
    
    .easy-table-tbody .easy-table-tr:last-child .easy-table-td {
        border-bottom: 1upx solid #ebeef5;
    }
</style>