@use '../../styles/mixins/hover';
@use '../../styles/variables';
@use './skeleton.scss';

@mixin thy-table-scroll-left {
    .thy-table-fixed-column-right {
        box-shadow: variables.$table-fixed-column-right-box-shadow;

        & + .thy-table-fixed-column-right {
            box-shadow: variables.$box-shadow-none;
        }
    }
}

@mixin thy-table-scroll-right {
    .thy-table-fixed-column-left {
        box-shadow: variables.$table-fixed-column-left-box-shadow;
    }
}

// .thy-table

.thy-table-modal-wrap {
    margin: 0 -30px;
    padding: 0 30px;
    overflow-y: auto;
    max-height: 400px;

    thy-table {
        .table {
            margin-bottom: 0;
        }

        .pagination {
            margin-bottom: 0;
        }
    }
}

.thy-operation-links {
    white-space: nowrap;
    text-align: left;

    > button,
    > a {
        display: inline-block;
        margin-right: variables.$table-operation-column-spacing;
        &:last-child {
            margin-right: 0px;
        }
    }
    // 目前只处理链接，不处理 Action，因为会影响首页的星标操作区域，等首页操作区域重构后再修改为如下样式
    // > button,
    // > a {
    //     display: inline-block;
    //     margin-left: variables.$table-operation-column-spacing;
    //     &:first-child {
    //         margin-left: 0px;
    //     }
    // }

    // > .thy-action + a,
    // > a + .thy-action {
    //     margin-left: variables.$table-operation-column-spacing - 8px;
    // }
    // > .thy-action + .thy-action {
    //     margin-left: variables.$table-operation-column-spacing - 16px;
    // }
}

// 利用层级消除 td 的 padding,以免 operationLinks 中的 icon 撑高 td
.thy-table .thy-table-body tr td.thy-operation-links {
    padding-top: 0;
    padding-bottom: 0;
}

// 目前只处理 bordered 和 boxed 类型表格，不处理 default 表格
.table-bordered,
.table-boxed {
    .thy-operation-links {
        > button,
        > a {
            display: inline-block;
            margin-right: variables.$table-operation-column-spacing;
            &:first-child {
                &.thy-action {
                    margin-left: -8px;
                    margin-right: variables.$table-operation-column-spacing - 16px;
                }
            }
            &:last-child {
                margin-right: 0px;
            }
        }

        > .thy-action + a:not(:last-child),
        > a + .thy-action:not(:last-child) {
            margin-right: variables.$table-operation-column-spacing - 8px;
        }

        > .thy-action + .thy-action:not(:last-child) {
            margin-right: variables.$table-operation-column-spacing - 16px;
        }
    }
}

// 次要列，文字颜色为 #999
.thy-table-column-secondary {
    color: variables.$gray-600;
}

.thy-table {
    display: flex;
    flex-direction: column;
    flex: auto;
    width: 100%;

    .thy-table-body {
        flex: 1;
        width: 100%;
        overflow-x: auto;

        &-empty {
            display: flex;
            flex-direction: column;
        }
    }

    .thy-table-empty {
        display: flex;
        min-height: 280px;
        flex: auto;
        flex-direction: column;
        justify-content: center;
    }

    .thy-table-group {
        &:hover {
            cursor: variables.$hand-cursor;
            background-color: variables.$table-hover-color;
        }

        td {
            padding: 0;
        }

        .thy-table-group-container {
            display: flex;
            align-items: center;
            padding-left: 16px;

            .expand-icon {
                color: variables.$gray-500;
                margin-right: 8px;
            }
        }
    }

    .thy-table-column-sortable {
        cursor: variables.$hand-cursor;
        &-icon {
            color: variables.$gray-300;
            // To align sort icon with text
            vertical-align: -0.04rem;
            &.desc {
                color: variables.$gray-300;
                svg g path:last-child {
                    fill: variables.$primary;
                }
            }
            &.asc {
                color: variables.$primary;
                svg g path:last-child {
                    fill: variables.$gray-300;
                }
            }
        }
    }

    .tree-expand-icon {
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -8px;
        color: variables.$gray-500;
    }

    .thy-table-checkbox-column {
        line-height: initial;
    }

    &.thy-table-hover-display-operation {
        .thy-operation-links {
            a,
            button {
                visibility: hidden;
            }
        }

        table {
            tr {
                @include hover.hover {
                    .thy-operation-links {
                        a,
                        button {
                            visibility: visible;
                        }
                    }
                }
            }
        }
    }

    .thy-table-item-hover-display-operation {
        .thy-operation-links {
            a,
            button {
                visibility: hidden;
            }
        }

        @include hover.hover {
            .thy-operation-links {
                a,
                button {
                    visibility: visible;
                }
            }
        }
    }

    .thy-table-footer {
        margin-top: variables.$table-footer-margin-top;

        &.thy-table-footer-has-padding {
            padding: variables.$table-footer-padding;
        }
    }

    &.thy-table-boxed {
        // 设置  border-radius
        table {
            border-collapse: separate;
            border-spacing: 0;
            border-radius: variables.$table-boxed-border-radius;

            thead {
                tr {
                    th:first-child {
                        border-top-left-radius: variables.$table-boxed-border-radius;
                    }
                    th:last-child {
                        border-top-right-radius: variables.$table-boxed-border-radius;
                    }
                }
            }
            tbody {
                tr:last-child {
                    td:first-child {
                        border-bottom-left-radius: variables.$table-boxed-border-radius;
                    }
                    td:last-child {
                        border-bottom-right-radius: variables.$table-boxed-border-radius;
                    }
                }
            }
        }
    }

    &-fixed {
        flex: auto;
        width: 100%;
        overflow-x: auto;
        position: relative;
        table {
            border-collapse: separate;
            border-spacing: 0;
        }

        .thy-table-empty {
            position: sticky;
            left: 0;
        }

        .thy-table-fixed-column-left,
        .thy-table-fixed-column-right {
            background-color: variables.$bg-default;
            position: sticky !important;
            z-index: variables.$z-index-5;
        }

        .table-hover {
            tbody tr {
                &:hover {
                    td {
                        background-color: variables.$table-hover-color !important;
                    }
                }
            }
        }

        .table-bordered {
            thead th,
            thead td {
                border: 0px;
                background-color: variables.$gray-100 !important;
                border-bottom: variables.$table-border-width solid variables.$gray-200;
            }
            tbody {
                th,
                td {
                    border: 0px;
                    border-right: variables.$table-border-width solid variables.$gray-200;
                }
                > tr:not(:last-child) {
                    th,
                    td {
                        // 最后一个 tr 底部不加边框，否则底部会有加粗的线，整个表格有一个边框线
                        border-bottom: variables.$table-border-width solid variables.$gray-200;
                    }
                }
            }
        }

        .table-boxed {
            thead th,
            thead td {
                background-color: variables.$gray-100 !important;
            }
            tbody {
                th,
                td {
                    border: 0px;
                }
                > tr:not(:last-child) {
                    th,
                    td {
                        // 最后一个 tr 底部不加边框，否则底部会有加粗的线，整个表格有一个边框线
                        border-bottom: variables.$table-border-width solid variables.$gray-200;
                    }
                }
            }
        }
    }

    &-fixed-header {
        thead {
            background-color: variables.$bg-default;
            position: sticky;
            left: 0;
            top: 0;
            z-index: variables.$z-index-6;
            &::after {
                content: '';
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                height: 1px;
                background: variables.$gray-200;
            }
            th {
                border-bottom: 0;
            }
        }
        .table-bordered {
            border-top: 0;
            thead {
                top: 1px;
                th {
                    border-top: 0;
                }
            }
            tbody {
                tr:first-child td {
                    border-top: 0;
                }
            }
        }
        .table-boxed {
            thead {
                top: 1px;
                border-top-left-radius: 3px;
                border-top-right-radius: 3px;
                th:first-child::before,
                th:last-child::after {
                    width: 1px;
                    height: 2px;
                    background: variables.$bg-default;
                    content: '';
                    display: block;
                    position: absolute;
                    top: -1px;
                }
                th:first-child::before {
                    left: -1px;
                }
                th:last-child::after {
                    right: -1px;
                }
            }
        }
    }

    .thy-table-bordered-theme {
        border-right: variables.$table-border-width solid variables.$gray-200;
        border-left: variables.$table-border-width solid variables.$gray-200;
    }

    &-scroll-left {
        @include thy-table-scroll-left();
    }

    &-scroll-right {
        @include thy-table-scroll-right();
    }

    &-scroll-middle {
        @include thy-table-scroll-left();
        @include thy-table-scroll-right();
    }
}

.thy-table-drag-preview {
    display: table;

    td {
        display: table-cell;
        vertical-align: middle;
        padding-left: variables.$table-draggable-first-td-padding-left;

        .table-draggable-icon,
        .expand-icon {
            display: none;
        }
    }
}

.table-draggable {
    .thy-table-group {
        .thy-table-group-container {
            padding-left: 0;
        }
    }
}
