<template>
  <div class="ws-info-table">
    <slot></slot>
  </div>
</template>

<script>
export default {
    name: 'WsInfoTable',
    inject: ['elForm'],
    data(){
        return {
        }
    },
    created(){
        // 覆盖原有props.showMessage属性，永远禁止显示错误提示
        Object.defineProperty(this.elForm.$props, 'showMessage', {
            get: function(){
                return false;
            }
        })
    },
    mounted(){
        this.checkEmptyCell();
    },
    methods: {
        // 测量布局 当
        measure(){
            this.checkEmptyCell();
        },
        // 检测空行
        checkEmptyCell(){
            var curWidth = 0;//当前宽度

            var items = this.getFormItems();
            for(var i=0; i<items.length; i++){
                var it = items[i];
                var span = this.getSpanByItem(it);

                curWidth += span;

                if(curWidth > 4){
                    curWidth = span;
                    // TODO 将上一个设置为铺满
                    this.setItemAutoFull(items[i-1]);
                }
                if(curWidth == 4){
                    curWidth = 0;
                }
            }
        },
        // 获取所有FormItems
        getFormItems(){
            var slots = this.$slots.default || [];
            return slots.filter((sl)=>{
                if(sl.componentOptions && sl.componentOptions.tag == 'ws-form-item'){
                    return true;
                }
                return false;
            });
        },
        // 获取span
        getSpanByItem(item){
            if(item && item.data && item.data.attrs){
                var span = item.data.attrs.span;
                try{
                    span = parseInt(span);
                    if(span < 1){
                        return 1;
                    }
                    if(span > 4){
                        return 4;
                    }
                    return span;
                }catch(e){
                    return 1;
                }
            }
            return 1;
        },
        // 设置Item自动填充
        setItemAutoFull(item){
            if(!item || !item.elm){
                return;
            }
            item.elm.classList.add('auto-full');
        }
    },
}
</script>

<style lang="scss" scoped>
@import "../../WsTheme/var.scss";

.ws-info-table /deep/{
    display: flex;
    flex-wrap: wrap;
    border-left: 1px solid $color-light-shade;
    border-top: 1px solid $color-light-shade;
    position: relative;
    // background: red;
    .el-form-item{
        box-sizing: border-box;
        border-right: 1px solid $color-light-shade;
        border-bottom: 1px solid $color-light-shade;
        margin: 0;

        .el-form-item__label{
            background-color: $color-light-tint;
            border-right: 1px solid $color-light-shade;
            padding-right: 8px;
            padding-left: 8px;
            font-size: $font-size-small;
            font-weight: bold;
            color: $color-primary-shade;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 120px;
        }
        .el-form-item__content{
            padding-left: 8px;
            padding-right: 8px;
            background: #fff;
            height: 40px;
            display: flex;
            align-items: center;
            text-align: left;
            overflow: hidden;
            //text-overflow: ellipsis;
            //white-space: nowrap;
           // width: auto;
            //display: block;
            p{
                font-size: $font-size-small;
                color: $color-primary-shade;
                overflow:hidden;
                text-overflow:ellipsis;
                display:-webkit-box;
                -webkit-box-orient:vertical;
                -webkit-line-clamp:2;
                word-break: break-all;
                line-height: $line-height-small;
            }
        }
    }
}
.ws-info-table-tip{
    position: absolute;
    color: rgba(255, 0, 0, 0.5);
    font-size: 24px;
    font-weight: bold;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    p{
        font-size: 12px;
        margin: 0;
    }
}

.auto-full{
    flex-grow: 1;
}

// flex-grow: 1;
/deep/ {
    .el-form-item{
        width: (100% / 4);

        &[span="2"]{
            width: (100% / 2);
        }
        &[span="3"]{
            width: (100% / 4 * 3);
        }
        &[span="4"]{
            width: (100% / 1);
        }
    }
}

</style>
