<template>
    <div :class="classStr">
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: "yCellGroup",
        computed: {
            classStr() {
                return "y_cellGroup" +
                    (this.disRadius ? " y_cellGroup_noRadius" : "") +
                    (this.disBorder ? " y_cellGroup_noBorder" : "") +
                    (this.layout == 'noPadding' ? " y_cellGroup_noPadding" : "") +
                    (this.isBroke ? " y_cellGroup_broke" : "") +
                    (this.brokeWithNotMargin ? " y_cellGroup_broke_noMargin" : "") +
                    (this.bottomBorder ? " y_cellGroup_bottomBorder" : "") +
                    (this.splitAlignment ? "" : " y_cellGroup_splitAlignment") +
                    (this.disSplitBorder ? " y_cellGroup_splitBorderNone" : "") +
                    (this.disBgColor ? " y_cellGroup_noBgColor" : "") +
                    (this.customClass ? " " + this.customClass : "");
            },
            isSlot() {
                return !!(this.$slots && this.$slots.default);
            }
        },
        props: {
            bottomBorder:Boolean,
            brokeWithNotMargin:Boolean,
            customClass: "",
            disRadius: {
                default: false,
                type: Boolean
            },
            disBorder: {
                default: false,
                type: Boolean
            },
            disBgColor:Boolean,
            disSplitBorder:Boolean,
            isBroke:Boolean,
            topic:{
                default:"normal",
            },

            splitAlignment: {
                default: false,
                type: Boolean
            }
        },
        provide(){
            return {
                yCellGroup:this
            }
        }
    };
</script>

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

    .y_cellGroup {
        border: $cell_border;
        border-radius: $cell_border_radius;
        overflow: hidden;
        position: relative;
        background-color:#fff;

        &.y_cellGroup_noBgColor{
            background-color: transparent;
        }

        &.y_cellGroup_noRadius {
            border-radius: 0;
        }

        &.y_cellGroup_noBorder {
            border:none;
        }

        &.y_cellGroup_splitBorderNone{
            & > div,&>y-cell,&>y-cell-field,&>y-cell-mobile,&>y-cell-select,& > div,&>tt-y-cell,&>tt-y-cell-field,&>tt-y-cell-mobile,&>tt-y-cell-select {
                &:after{
                    content:"";
                    display: none;
                }
            }
        }

        &.y_cellGroup_splitAlignment{
            & > div,&>y-cell,&>y-cell-field,&>y-cell-mobile,&>y-cell-select,&>tt-y-cell,&>tt-y-cell-field,&>tt-y-cell-mobile,&>tt-y-cell-select {
                &:after {
                    left: 0;
                    right: 0;
                }
            }
        }

        &.y_cellGroup_bottomBorder{
            & > div,&>y-cell,&>y-cell-field,&>y-cell-mobile,&>y-cell-select,&>tt-y-cell,&>tt-y-cell-field,&>tt-y-cell-mobile,&>tt-y-cell-select{
                &:last-child {
                    &:after {
                        border-bottom: 1px solid $cell_borderBottom_color;
                        transform: scaleY(.5);
                    }
                }
            }
        }

        &.y_cellGroup_broke{
            & > .y_cellGroup_item,&>y-cell,&>y-cell-field,&>y-cell-mobile,&>y-cell-select,&>tt-y-cell,&>tt-y-cell-field,&>tt-y-cell-mobile,&>tt-y-cell-select{
                margin-bottom: 13px;
                padding-bottom: 13px;
                &:last-child{
                    margin-bottom: 0;
                    padding-bottom: 0;
                }
                &:after {
                    left: 0;
                    right: 0;
                }
            }

            &.y_cellGroup_broke_noMargin{
                & > .y_cellGroup_item,&>y-cell,&>y-cell-field,&>y-cell-mobile,&>y-cell-select,&>tt-y-cell,&>tt-y-cell-field,&>tt-y-cell-mobile,&>tt-y-cell-select{
                    margin-bottom: 0px;
                }
            }
        }

        & > div,&>y-cell,&>y-cell-field,&>y-cell-mobile,&>y-cell-select,&>tt-y-cell,&>tt-y-cell-field,&>tt-y-cell-mobile,&>tt-y-cell-select {
            display: flex;
            position: relative;

            &:after {
                content: " ";
                display: block;
                position: absolute;
                left: $cell_padding_horizantal;
                right: $cell_padding_horizantal;
                bottom: 0;
                height: 1px;
                border-bottom: 1px solid $cell_borderBottom_color;
                box-sizing: border-box;
                transform: scaleY(.5);
            }
            &:last-child {
                &:after {
                    border-bottom: none;
                }
            }
        }
        &>.y_cell{
            display: flex;
        }
        &>div,&>y-cell,&>y-cell-field,&>y-cell-mobile,&>y-cell-select{
            //display: block;
        }
        &>tt-y-cell,&>tt-y-cell-field,&>tt-y-cell-mobile,&>tt-y-cell-select{
            display: block;
        }
    }
</style>
