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

<script>
    export default {
        name: 'easyTableTh',
        props: {
            checked: {
                type: Boolean,
                default: false
            },
            width: {
                type: [Number, String],
                default: ''
            },
            align: {
                type: String,
                default: 'left'
            }
        },
        data() {
            return {
                flexGrow: 0
            }
        },
        created() {
            this.root = this.getTable();
            this.root.thChildren.push(this);
        },
        computed: {
            // 根据props中的width属性 自动匹配当前th的宽度(px)
            customWidth() {
                if (typeof this.width === 'number') {
                    return this.width;
                } else if (typeof this.width === 'string') {
                    let regexHaveUnitPx = new RegExp(/^[1-9][0-9]*px$/g);
                    let regexHaveUnitRpx = new RegExp(/^[1-9][0-9]*rpx$/g);
                    let regexHaveNotUnit = new RegExp(/^[1-9][0-9]*$/g);
                    if (this.width.match(regexHaveUnitPx) !== null) { // 携带了 px
                        return this.width.replace('px', '');
                    } else if (this.width.match(regexHaveUnitRpx) !== null) { // 携带了 rpx
                        let numberRpx = Number(this.width.replace('rpx', ''));
                        let widthCoe = uni.getSystemInfoSync().screenWidth / 750;
                        return Math.round(numberRpx * widthCoe);
                    } else if (this.width.match(regexHaveNotUnit) !== null) { // 未携带 rpx或px 的纯数字 String
                        return this.width;
                    } else { // 不符合格式
                        this.flexGrow = 1;
                        return '';
                    }
                } else {
                    this.flexGrow = 1;
                    return '';
                }
            },

            contentAlign() {
                let align = '';
                switch (this.align) {
                    case 'center':
                        align = 'center';
                        break;
                    case 'right':
                        align = 'flex-end';
                        break;
                    default:
                        align = 'flex-start';
                        break;
                }
                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-th {
        position: relative;
        display: flex;
        padding: 12upx;
        min-height: 80upx;
        align-items: center;
        color: #909399;
        border-left: 1upx solid #ebeef5;
        border-top: 1upx solid #ebeef5;
        box-sizing: border-box;
    }
    
    .easy-table-th:last-child {
        border-right: 1upx solid #ebeef5;
    }
</style>