@import "../const.less";

.ant-table {
    color: @black_title;
    table {
        border-radius: 0;
    }
    .ant-table-cell {
        .ant-form-item {
            margin-bottom: 0;
        }
        .ant-divider-vertical {
            height: 12px;
            border-left: 1px solid #EBECF0;
        }
        .ant-table-column-title {
            line-height: 22px;
        }
        // 换行类名
        &.dt-table-multi-line {
            padding-top: 12px;
            padding-bottom: 11px;
            line-height: 20px;
        }
    }
    .ant-table-tbody {
        & > tr.ant-table-row:hover > td, & > tr > td.ant-table-cell-row-hover {
            background: @black_titleBg;
        }
    }
    colgroup > col.ant-table-selection-col {
        width: 16px;
    }
}

.ant-table-thead {
    background: #FAFAFA;
    .ant-table-column-sorter, .ant-table-filter-trigger {
        color: @black_msg;
        &.active {
            color: @primaryColor;
        }
    }
}

.ant-table-column-sorter {
    margin-left: 7px;
    display: flex;
}

.ant-table-thead > tr > th {
    height: 44px;
    box-sizing: border-box;
    padding: 0 16px;
    border-bottom: 1px solid @black_readonly;
    &.ant-table-column-sort {
        background: #F9F9FA;
    }
    .anticon-filter {
        right: unset;
        top: -1.8px;
        background: transparent !important;
    }
    &.ant-table-selection-column {
        padding: 0 8px 0 16px;
        text-align: left;
        line-height: 43px;
        & + th {
            padding: 0 8px 0 0;
            line-height: 43px;
        }
    }
    &:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
        position: absolute;
        top: 50%;
        right: 0;
        width: 0;
        height: 1.6em;
        background-color: @black_titleBg;
        transform: translateY(-50%);
        transition: background-color 0.3s;
        content: "";
    }
}

.ant-table-tbody > tr {
    height: 44px;
    box-sizing: border-box;
    & > td {
        min-height: 44px;
        box-sizing: border-box;
        padding: 6px 16px 5px;
        border-bottom: 1px solid @black_readonly;
        &:first-child {
            padding-left: 16px;
        }
        &:last-child {
            padding-right: 16px;
        }
        &.ant-table-column-sort {
            background: #FFF;
        }
        &.ant-table-selection-column {
            padding: 0 8px 0 16px;
            line-height: 20px;
            text-align: left;
            & > .ant-radio-wrapper {
                line-height: 20px;
            }
            & + td {
                padding: 0 8px 0 0;
                line-height: 20px;
            }
        }
    }
    &.ant-table-row-selected > td {
        &.ant-table-column-sort {
            background: #E8F5FF;
        }
    }
}

.ant-table-tbody > .ant-table-placeholder > .ant-table-cell {
    border-bottom: 0;
}

.ant-table-tbody > .ant-table-expanded-row > .ant-table-cell {
    padding: 0 0 0 44px;
    background-color: @black_navBg;
    &:hover {
        background-color: @black_navBg !important;
    }
    .ant-table-wrapper {
        background: none;
        border-bottom: 0;
        border-left: 1px solid @grey_border;
        .ant-table {
            margin: 0;
        }
    }
}

.ant-table-footer {
    background: @white;
    padding: 6px 16px;
    height: 44px;
    display: flex;
    margin-top: -1px;
    z-index: 11;
    align-items: center;
    position: relative;
    &::before {
        height: 1px;
        background: @grey_border;
        position: absolute;
        top: -1px;
        left: 0;
        width: 100%;
        content: "";
    }
    &:empty {
        display: none;
    }
}

.ant-divider {
    background-color: transparent;
}

// 自带分页 样式设置
.ant-table-wrapper {
    background: @white;
    .ant-spin-container {
        >.ant-table-pagination {
            border-top: 1px solid #E8E8E8;
            width: 100%;
            margin: -1px 0 0;
            padding: 0 16px;
            height: 44px;
            line-height: 44px;
            text-align: right;
            position: relative;
            z-index: 10;
            align-items: center;
        }
    }
}

// 固定表格高度(footer实现分页）
.dt-table-fixed-contain-footer {
    .ant-table-wrapper, &.ant-table-wrapper {
        background: @white;
        height: 100%;
        padding: 0 !important;
        box-shadow: none;
        .ant-spin-nested-loading {
            height: 100%;
            .ant-spin-container {
                height: 100%;
                .ant-table-fixed-header {
                    display: flex;
                    flex-direction: column;
                    height: 100%;
                    .ant-table-container {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        overflow-y: auto;
                        .ant-table-body {
                            flex: 1;
                            .ant-table-placeholder {
                                color: #BFBFBF;
                            }
                        }
                    }
                    .ant-table-content {
                        height: 100%;
                        .ant-table-scroll {
                            height: 100%;
                            display: flex;
                            flex-direction: column;
                            .ant-table-body {
                                flex: 1;

                                /** 内部嵌套表格，数据为空的情况 */
                                .ant-table-expanded-row .ant-table-empty {
                                    .ant-table-placeholder {
                                        position: relative;
                                        top: unset;
                                    }
                                }
                            }
                        }
                        .ant-table-fixed-left, .ant-table-fixed-right {
                            z-index: 10;
                            height: 100%;
                            .ant-table-body-outer {
                                height: calc(100% - 44px - 56px + 1px);
                            }
                        }
                        .ant-table-placeholder {
                            position: absolute;
                            top: 45px;
                            width: 100%;
                            text-align: center;
                            border: none;
                        }
                    }
                }
                .ant-table-footer {
                    margin-top: -1px;
                    z-index: 11;
                    position: relative;
                    &::before {
                        position: absolute;
                        top: -1px;
                        left: 0;
                        width: 100%;
                        content: "";
                    }
                    .ant-pagination {
                        position: absolute;
                        right: 16px;
                        .pagination_total {
                            color: #3F87FF;
                        }
                    }
                }
            }
        }
    }
}

// 固定表格高度(自带分页）有 border
.dt-table-fixed-base, .dt-table-fixed-base-no-border {
    &.ant-table-wrapper, .ant-table-wrapper {
        background: @white;
        border: 1px solid @grey_border;
        padding: 0 !important;
        box-shadow: none;
        .ant-spin-nested-loading {
            height: 100%;
            .ant-spin-container {
                height: 100%;
                .ant-table-fixed-header {
                    // 存在数据的时候 有分页组件存在 高度需要减去分页的高度
                    &:not(:last-child) {
                        height: calc(100% - 44px) !important;
                    }
                    height: 100%; // 分页高度为 67px
                    .ant-table-content {
                        height: 100%;
                        .ant-table-scroll {
                            height: 100%;
                            .ant-table-body {
                                height: calc(100% - 44px); // 表格 header 高度为 44px

                                /** 内部嵌套表格，数据为空的情况 */
                                .ant-table-expanded-row .ant-table-empty {
                                    .ant-table-placeholder {
                                        position: relative;
                                        top: unset;
                                    }
                                }
                            }
                        }
                        .ant-table-fixed-right, .ant-table-fixed-left {
                            // height: 100%;
                            height: calc(100% - 18px);
                            z-index: 10;
                            .ant-table-body-outer {
                                height: calc(100% - 44px);
                                .ant-table-body-inner {
                                    overflow-x: hidden !important;
                                    overflow-y: auto !important;
                                    height: 100%;
                                }
                            }
                        }
                        .ant-table-placeholder {
                            position: absolute;
                            top: 45px;
                            width: 100%;
                            color: #BFBFBF;
                            text-align: center;
                            border: none;
                        }
                    }
                }
            }
        }
    }
}
// 固定表格高度(自带分页）没有 border
.dt-table-fixed-base-no-border {
    &.ant-table-wrapper, .ant-table-wrapper {
        border: none;
    }
}

// 表格添加外边框
.dt-table-border {
    border: 1px solid @black_readonly;
}

.ant-table.ant-table-small {
    .ant-table-thead > tr,
    .ant-table-tbody > tr {
        height: 36px;
    }
    .ant-table-title, .ant-table-footer, .ant-table-thead > tr > th, .ant-table-tbody > tr > td, tfoot > tr > th, tfoot > tr > td {
        padding: 2px 16px 1px;
        min-height: 36px;
        height: auto;
        line-height: 20px;
        box-sizing: border-box;
    }
    .ant-table-cell {
        // 换行类名
        &.dt-table-multi-line {
            padding-top: 8px;
            padding-bottom: 7px;
            line-height: 20px;
        }
    }
}

// size为small的边框设置
.ant-table-small > .ant-table-content .ant-table-placeholder,
.ant-table-small > .ant-table-content .ant-table-row:last-child td {
    border-bottom: 1px solid #E8E8E8;
}

.ant-table-small {
    & > .ant-table-content > .ant-table-body {
        margin: 0;
    }
    & > .ant-table-content > .ant-table-header > table > .ant-table-thead > tr > th,
    & > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th,
    & > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr > th,
    & > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th,
    & > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-thead > tr > th,
    & > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-thead > tr > th,
    & > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th,
    & > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th {
        border-bottom: 1px solid #E8E8E8;
        height: 36px;
        box-sizing: border-box;
        &:first-child {
            padding-left: 16px;
        }
        &:last-child {
            padding-right: 16px;
        }
    }
    & > .ant-table-content > .ant-table-header > table > .ant-table-tbody > tr > td,
    & > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td,
    & > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-tbody > tr > td,
    & > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td,
    & > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-tbody > tr > td,
    & > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-tbody > tr > td,
    & > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td,
    & > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td {
        &:first-child {
            padding-left: 16px;
        }
        &:last-child {
            padding-right: 16px;
        }
        padding: 0 16px;
    }
}

.ant-table-row-expand-icon {
    border: solid 1px @blue;
    &::before {
        color: @blue;
    }
    &::after {
        color: @blue;
    }
    &:hover, &:focus, &:active {
        border-color: @blue;
    }
}

// 表格筛选
.ant-table-filter-dropdown {
    .ant-dropdown-menu-item {
        height: 32px;
        .ant-dropdown-menu-title-content {
            display: flex;
            align-items: center;
            .ant-radio-wrapper {
                padding-top: 0;
            }
        }
    }
}

// 表格筛选框样式
.ant-table-filter-dropdown-btns {
    border-top: none;
    padding: 8px;
    justify-content: end;
    .ant-btn-link.ant-btn-sm {
        margin-right: 8px;
        color: @black_title;
        border: 1px solid @black_border;
        padding: 0 8px;
        height: 24px;
        &:hover, &:focus {
            border: 1px solid @hoverColor;
            color: @hoverColor;
            padding: 0 8px;
            height: 24px;
        }
        &:active {
            color: @clickColor;
            height: 24px;
            padding: 0 8px;
            border: 1px solid @clickColor;
        }
        &:disabled {
            padding: 0 8px;
            height: 24px;
            color: @black_msg;
            background-color: @black_readonly;
            border: 1px solid @black_readonly;
            &:hover, &:focus {
                padding: 0 8px;
                height: 24px;
                color: @black_msg;
                background-color: @black_readonly;
                border: 1px solid @black_readonly;
            }
        }
    }
}

.ant-dropdown-menu {
    padding-top: 8px;
}

// 分页器 mini版高度设置
.ant-pagination.mini {
    height: 32px;
    line-height: 32px;
}

.ant-table.ant-table-middle .ant-table-tbody > tr > td {
    padding-top: 0;
    padding-bottom: 0;
}

.react-resizable {
    position: relative;
    background-clip: padding-box;
}

.react-resizable-handle {
    position: absolute;
    right: -5px;
    bottom: 0;
    z-index: 1;
    width: 10px;
    height: 100%;
    cursor: col-resize;
}

.ant-table-container table > thead > tr:first-child th:first-child {
    border-top-left-radius: 0;
    &.react-resizable {
        border-top-left-radius: 0;
    }
}

.ant-table-container table > thead > tr:first-child th:last-child {
    border-top-right-radius: 0;
}

.dt-resizable-table .ant-table-container table > thead > tr:first-child th:not(.ant-table-selection-column) {
    border-right: solid 1px @black_readonly;
    &:last-child {
        border-right: none;
    }
}

.dt-table-header-user-select-none {
    //  禁止用户选中表头文字
    tr {
        th {
            user-select: none; /* Chrome and Opera */
            -webkit-user-select: none; /* Safari */
            -khtml-user-select: none; /* Konqueror HTML */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
        }
    }
}

.dt-table-empty-top-20-percent {
    // 在表格设置了 scroll 之类会引起滚动的属性后，表格会在第一行之前生成一行tr，类名为 ant-table-measure-row
    .ant-table-measure-row {
        // 使用 display: none; 会导致表头不能滚动
        visibility: collapse;
    }
    // 固定高度无数据时，缺省图距顶部 20%
    .ant-spin-nested-loading {
        height: 100%;
        .ant-spin-container {
            height: inherit;
            .ant-table-empty {
                height: inherit;
                .ant-table-container {
                    height: inherit;
                    .ant-table-body, .ant-table-content {
                        height: inherit;
                    }
                    table {
                        height: inherit;
                        .ant-table-tbody {
                            height: inherit;
                            .ant-table-placeholder {
                                height: inherit;
                                .ant-table-cell {
                                    height: inherit;
                                    .ant-table-expanded-row-fixed {
                                        height: inherit;
                                    }
                                    .ant-empty {
                                        position: absolute;
                                        top: calc(calc(100% - 44px) / 5);
                                        left: 50%;
                                        transform: translate(-50%, 0);
                                    }
                                }
                                &:hover > td {
                                    background-color: inherit;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

// 无数据且左右滚动时 Empty 固定居中，注意需要设置 scroll 的x,y属性才能生效
.ant-spin-nested-loading > .ant-spin-container > .ant-table-empty.ant-table-scroll-horizontal > .ant-table-container > .ant-table-body {
    table {
        height: 100%;
        .ant-table-tbody > .ant-table-placeholder {
            height: 100%;
        }
    }
}

.ant-table-container {
    border-radius: 0;
    .ant-table-placeholder {
        .dtc-empty {
            margin: 32px 0;
        }
    }
}

.ant-table-column-sorters .ant-table-column-title, .ant-table-filter-column .ant-table-column-title {
    flex: none;
}

.ant-table-column-sorters, .ant-table-filter-column {
    justify-content: flex-start;
}

// 数字列表头居右显示
.dt-table-cell-right {
    .ant-table-column-sorters .ant-table-column-title, .ant-table-filter-column .ant-table-column-title {
        flex: 1;
    }
}

// 表格左侧固定列的阴影
.ant-table-ping-right .ant-table-cell-fix-right-first::after,
.ant-table-ping-left .ant-table-cell-fix-left-first::after {
    box-shadow: inset -10px 0 8px -8px rgba(29, 120, 255, 0.1);
}
// 表格右侧固定列的阴影
.ant-table-ping-right .ant-table-cell-fix-right-last::after,
.ant-table-ping-left .ant-table-cell-fix-left-last::after {
    box-shadow: inset 10px 0 8px -8px rgba(29, 120, 255, 0.1);
}

// 表格左侧无固定列的滑动阴影
.ant-table-ping-left:not(.ant-table-has-fix-left) > .ant-table-container::before {
    box-shadow: inset 10px 0 10px -2px rgb(235, 236, 240);
}
// 表格右侧无固定列的滑动阴影
.ant-table-ping-right:not(.ant-table-has-fix-right) > .ant-table-container::after {
    box-shadow: inset -10px 0 10px -2px rgb(235, 236, 240);
}

// size为middle UI5.0暂不支持
// .ant-table-middle {
//     .ant-table-thead > tr > th {
//         border-bottom: 1px solid @black_readonly;
//     }
//     & > .ant-table-content > .ant-table-header > table > .ant-table-thead > tr > th,
//     & > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th,
//     & > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr > th,
//     & > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th,
//     & > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-thead > tr > th,
//     & > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-thead > tr > th,
//     & > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th,
//     & > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th {
//         &:first-child {
//             padding-left: 16px;
//         }
//         &:last-child {
//             padding-right: 16px;
//         }
//         padding: 10.5px 8px;
//     }
//     & > .ant-table-content > .ant-table-header > table > .ant-table-tbody > tr > td,
//     & > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td,
//     & > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-tbody > tr > td,
//     & > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td,
//     & > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-tbody > tr > td,
//     & > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-tbody > tr > td,
//     & > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td,
//     & > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td {
//         &:first-child {
//             padding-left: 16px;
//         }
//         &:last-child {
//             padding-right: 16px;
//         }
//         padding: 12.5px 8px;
//     }
//     & > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th.ant-table-selection-column {
//         padding: 13px 12px 13px 16px !important;
//         text-align: left;
//     }
//     & > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td.ant-table-selection-column {
//         padding: 13px 12px 13px 16px !important;
//         text-align: left;
//     }
//     .ant-table-tbody > tr > td {
//         padding: 13px 8px;
//         &:first-child {
//             padding-left: 16px;
//         }
//         &:last-child {
//             padding-right: 16px;
//         }
//     }
// }

/** ————Custom ClassName———— **/
.dt-table-top-border {
    border-top: 1px solid @black_readonly;
}

// size = small的表格中的分页
.dt-pagination-small {
    .ant-table-pagination.ant-pagination {
        height: 36px;
        line-height: 36px;
    }
}

// 不需要最后一列的下边框 (一般在表格存在外边框时使用)
.dt-table-last-row-noborder {
    .ant-table-tbody {
        > tr:last-child {
            > td {
                border-bottom-color: rgba(0, 0, 0, 0) !important;
            }
        }
    }
    .ant-table-placeholder {
        border-bottom-color: rgba(0, 0, 0, 0) !important;
    }
}

.dt-table-scrollbar {
    // 正常列表 存在纵向滚动 会因为 scrollbar 导致列错位
    // 所以需要添加 .ant-table-header 的 scrollbar 设置
    .ant-table-body, .ant-table-body-inner, .ant-table-header {
        &::-webkit-scrollbar {
            width: 15px;  // 纵向滚动条宽度
            height: 13px;   // 横向滚动条高度（不同系统存在差异，目前按照windows设定） 数值太大\太小都会导致fixed列与普通列错位
        }
        &::-webkit-scrollbar-thumb {
            background: #BFBFBF;
            border-radius: 10px;
        }
        &::-webkit-scrollbar-track {
            background: transparent;
            border-radius: 2px;
        }
    }
    .ant-table-header {
        &::-webkit-scrollbar-thumb {
            background: transparent;
        }
    }
    // 修改滚动条 会导致 header 与 body的列有偏差错位 因为滚动条 占据了body一定的宽度
    // 所以 设置 header 也存在滚动边框
    // 但是会导致 滚动时 header右侧 会有一小部分的文字遮挡 并且会有一小截底部边框（滚动边框）
    .ant-table-scroll {
        .ant-table-header {
            overflow: scroll !important;
        }
    }
}

// 隐藏 表格中 fixed 模块代码横向滚动条 用于固定高度表格无数据时 (未优化 windows 滚动条样式时使用
.dt-table-fixed-overflowx-auto {
    .ant-table-body-inner {
        overflow-x: auto !important;
    }
}

// 排序图标的间距
.ant-table-column-sorter-up + .ant-table-column-sorter-down {
    margin-top: -0.5em;
}

// 行选中样式
.dt-row-selected {
    & > td {
        background-color: @black_titleBg;
    }
}