@import "mixins/mixins";
@import "common/var";
@import "background";
@import "mixins/uedStyle.scss";
@import "scrollbar.scss";

$templateNameSpace: 'el-basic-template';

$headerNameSpace: $templateNameSpace + '-header';

$contentNameSpace: $templateNameSpace + '-content';


@mixin basic-template-size ($size: "default") {
    padding: 0 uedGrid(16, $size);
    // 头部
    .#{$headerNameSpace} {
        height: uedGrid(80, $size);
        &-left {
            padding-left: uedGrid(16, $size);
            &-title {
                font-size: uedFontSize(20, $size);
            }
        }
        &-right {
            padding: 0 uedGrid(16, $size);
            height: uedGrid(80, $size);
            .el-basic-template-header-right-action-right > .el-button {
                min-width: uedGrid(64, $size);
                // 使用calc 减 1px的原因：消除border的影响。不然四个字时，总宽度为66
                padding-left: calc(uedGrid(8, $size) - 1px);
                padding-right: calc(uedGrid(8, $size) - 1px);
            }
        }
    }
    // 主体
    .#{$contentNameSpace} {
        // 左侧树
        &-left {
            top: uedGrid(0, $size);
            left: uedGrid(0, $size);
            width: uedGrid(176, $size);
            &-container {
                padding: uedGrid(16, $size);
            }
        }
        // 右侧主体区域
        &-right {
            top: uedGrid(0, $size);
            // left: uedGrid(0, $size);
            right: uedGrid(0, $size);
            bottom: uedGrid(0, $size);
            // &.has-left-tree {
            //     left: uedGrid(176, $size);
            // }
            // 筛选区
            &-filter {
                padding: uedGrid(16, $size) uedGrid(16, $size) 0 uedGrid(16, $size);
                // 筛选区左侧
                &-left {
                    font-size: uedFontSize(0, $size);
                    // 吸收筛选条件下间距对样式的影响
                    margin-bottom: calc(0px - uedGrid(8, $size));
                    // 给筛选区左侧的筛选空间默认加8px的间距
                    // 这里用*性能太差，暂时使用div和span
                    > div, > span {
                        // 预防筛选条件过多导致换行时，上下没有间隔
                        margin-bottom: uedGrid(8, $size);
                        margin-right: uedGrid(8, $size);
                        &:last-child{
                            margin-right: uedGrid(0, $size);
                        }
                    }
                    // 以下控件特殊处理
                    // 输入框240
                    > .el-input {
                        width: uedGrid(240, $size);
                    }
                    // 下拉144
                    > .el-select {
                        width: uedGrid(144, $size);
                    }
                    // 日区间选择
                    > .el-date-editor {
                        width: uedGrid(144, $size);
                        &.el-range-editor {
                            width: uedGrid(320, $size);
                        }
                    }
                }
                // 筛选区右侧
                &-right {
                    margin-left: uedGrid(8, $size);
                    > .el-button {
                        min-width: uedGrid(64, $size);
                    }
                }
            }
            &-default {
                &-container {
                    box-sizing: border-box;
                    padding: uedGrid(16, $size);
                    .el-table .el-table__body-wrapper .el-table__body tbody .el-table__row {
                        min-height: uedGrid(40, $size);
                        height: uedGrid(40, $size);
                    }
                    > .el-pagination {
                        padding-top: uedGrid(16, $size);
                    }
                }
            }
        }
    }
}

@include b(basic-template) {
    &.#{$templateNameSpace}-4-0 {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        // 头部
        .#{$headerNameSpace} {
            display: flex;
            align-items: center;
            position: relative;
            z-index: 1;
            // 标题
            &-left {
                &-title {
                    color: $--color-white;
                    font-weight: 500;
                }
            }
            // 交互区
            &-right {
                flex: 1;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }
        // 主体区域
        .#{$contentNameSpace} {
            flex: 1;
            position: relative;
            z-index: 1;
            // 拖拽辅助dom
            &-handle {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 999;
                width: 8px; // 作为一个辅助dom，不需要跟随系统尺寸变化
                height: 100%;
                cursor: col-resize;
            }
            // 主体左侧，树区域
            &-left {
                position: absolute;
                height: 100%;
                box-sizing: border-box;
                border-radius: 8px 0 0 0px;
                background-color: $--color-white;
                border-right: 1px solid $--color-gray;
                &.background-fuzzy {
                    background-color: rgba(255, 255, 255, 0.65);
                    backdrop-filter: blur(3px);
                    border-right: none;
                }
                &-container {
                    width: 100%;
                    height: 100%;
                    box-sizing: border-box;
                }
                & > .el-scrollbar__wrap {
                    overflow-x: hidden;
                }
            }
            // 主体右侧
            &-right {
                position: absolute;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                border-radius: 8px 8px 0 0;
                background-color: $--color-white;
                &.has-left-tree {
                    border-radius: 0 8px 0px 0;
                }
                &-filter {
                    display: flex;
                    justify-content: space-between;
                    &-left {
                        flex: 1;
                    }
                }
                &-default {
                    flex: 1;
                    // // 以下样式为了解决在父元素flex布局下，el-table只能随父元素，不能缩小的问题
                    // position: relative;
                    // ::v-deep .el-table {
                    //     position: absolute;
                    // }
                    > .el-scrollbar__wrap {
                        overflow-x: hidden;
                    }
                    &-container > .el-pagination {
                        text-align: right;
                    }
                }
            }
        }
        // 区分不同尺寸
        // 默认尺寸
        @include basic-template-size('default');
        // 小尺寸
        &--mini {
            @include basic-template-size('mini');
        };
        // 大尺寸
        &--medium {
            @include basic-template-size('medium');
        };
    }

    // 修改表格样式
    .el-table__header-wrapper .el-table__header thead th.el-table__cell{
        background: $--table-header-bg;
        color: $--color-text-primary;
    }
    .el-table__body-wrapper {  
        &::-webkit-scrollbar {
            height: 6px;
            width: 6px;
        }
        &::-webkit-scrollbar-track {
            background-color: #fff;
        }
        &::-webkit-scrollbar-thumb {
            background-color: #ccc;
        }
        &::-webkit-scrollbar-thumb:hover {
            background-color: #409eff;
        }
    }

    // 解决表格固定列问题
    .el-table__fixed,
    .el-table__fixed-right {
        height: calc(100% - 7px) !important;
        box-shadow: -5px -2px 10px rgba(0, 0, 0, 0.12) !important;
        .el-table__fixed-body-wrapper {
            height: calc(100% - 36px) !important;
        }
    }
    // 当表格没有滚动条时
    .el-table__body-wrapper.is-scrolling-none ~ .el-table__fixed-right {
        height: 100% !important;
        bottom: 0 !important;
        box-shadow: none !important;
    }
    // 当表格有纵向滚动条时
    .el-table--scrollable-y .el-table__fixed-right {
        right: 7px !important;
    }
    // 当表格只有横向滚动条，没有纵向滚动条时
    .el-table--scrollable-x:not(.el-table--scrollable-y) .el-table__fixed-right {
        right: 0 !important;
    }
}
