@import '../styles/themes/themes.less';
@import '../styles/mixins/scroll.less';
@import '../virtual-render/virtual-render.less';
@import '../checkbox/checkbox.less';
@import '../button/button.less';
@import '../exception/exception.less';
@import '../pagination/pagination.less';
@import '../popover/popover.less';
@import './plugins/head-filter.less';
@import './plugins/head-sort.less';
@import './plugins/settings.less';

.@{bk-prefix}-table {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-spacing: 0;
  display: flex;
  flex-direction: column;

  .@{bk-prefix}-table-body {
    position: relative;
    overflow: auto;

    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    &::-webkit-scrollbar-thumb {
      background: #ddd;
      border-radius: 20px;
      box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);
    }

    &.is-bk-scrollbar {
      overflow: hidden;
    }

    // height=auto + 非像素 maxHeight 时，内容未超出 maxHeight：
    // 阻止 Chrome scrollHeight/clientHeight 整数截断产生的 1px 虚假垂直滚动条
    &.is-overflow-hidden {
      overflow-y: hidden !important;
    }

  }

  // body overlay wrapper（让 overlay 不参与原生滚动）
  .bk-table-body-wrapper {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    font-size: 0;

    // 表头右侧设置按钮：固定在可视区域右侧（不随横向滚动移动）
    .bk-table-head-settings-wrapper {
      position: absolute;
      top: 0;
      right: 0;
      width: calc(var(--row-height));
      height: calc(var(--row-height));
      z-index: 8;
      pointer-events: auto;

      > div {
        height: 100%;
      }

      .table-head-settings {
        display: flex;
        height: 100%;
        width: calc(var(--row-height));
        height: calc(var(--row-height));
        font-size: 14px;
        cursor: pointer;

        background: @table-head-bg-color;
        border-left: 1px solid @table-border-color;
        border-radius: 0 2px 0 0;
        justify-content: center;
        align-items: center;
      }
    }

    // 列宽拖拽指示线（overlay）
    .resize-column {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 1px;
      background-color: #3785ff;
      // 辅助线不应随纵向滚动位移，否则滚动一定距离后会被移出可视区域导致“看不到”
      transform: translate3d(var(--drag-offset-x), 0, 0);
      z-index: 8;
      pointer-events: none;
    }
  }

  .@{bk-prefix}-table-body-content {
    &.@{bk-prefix}-stripe {
      table {
        tbody {
          tr {
            &:nth-child(even) {
              td {
                background-color: @table-strip-color;
              }
            }

            td {
              border-bottom: none;
            }
          }
        }
      }
    }
  }

  .@{bk-prefix}-table-head,
  .@{bk-prefix}-table-body {
    background: @table-bg-color;
    transform: translateZ(0);
  }

  // body 及其内 table 不设 transform，否则会破坏 tbody td.column_fixed 的 position: sticky 粘滞参照，导致固定列与可滚动列错位重叠
  .@{bk-prefix}-table-body {
    transform: none;

    table {
      transform: none;
    }
  }

  .@{bk-prefix}-table-head,
  .@{bk-prefix}-table-body {    
    &.__is-empty {
      display: flex;
      height: 100%;
      justify-content: center;
      align-items: center;

      .@{bk-prefix}-table-body-content {
        position: relative;
        display: flex;
        width: 100%;
        height: 100%;
        padding-bottom: 20px;
      }
    }

    table {
      width: 100%;
      border-collapse: separate;

      transform: translateZ(0);
      table-layout: fixed;
      align-self: flex-start;

      &.@{bk-prefix}-table-col-resizing {
        th {
          cursor: col-resize !important;
        }
      }

      th,
      td {
        height: var(--row-height);
        min-width: 30px;
        clear: both;

        &.expand-row {
          .expand-btn-action {
            color: #575961;
          }
        }

        .cell {
          padding: 0 16px;
          overflow: hidden;
          font-size: 12px;
          color: @table-body-font-color;
          text-overflow: ellipsis;
          white-space: nowrap;

          .drag-cell {
            height: 100%;
            font-size: 14px;
          }

          &.has-sort {
            cursor: pointer;
          }

          &.explain {
            text-decoration-style: dashed;
            text-decoration-line: underline;
          }

          .head-text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          &.selection {
            padding: 0;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
          }

          &.expand-cell {
            display: flex;
            padding: 0;
            text-overflow: unset;
            align-items: center;
            justify-content: center;
          }
        }

        .expand-btn-action {
          display: flex;
          padding: 0 16px;
          color: #c4c6cc;
          cursor: pointer;
        }

        &.column_fixed {
          position: sticky;
          // 固定列需要盖住可滚动区域的内容（避免内容透传/重叠）
          // 阴影层再由 .bk-table-fixed 以更高层级渲染
          z-index: 3;
          // 不要使用 inherit（它会从 tr/table 继承，导致固定列背景变透明）
          // 保持 td 自身的背景（stripe/hover 等）即可
          background-clip: padding-box;
        }

        &.row_expend {
          .expand-cell-ctx {
            min-height: 30px;
          }
        }
      }

      .left {
        text-align: left;

        .cell {
          justify-content: start;
          text-align: left;
        }
      }

      .center {
        text-align: center;

        .cell {
          justify-content: center;
          text-align: center;
        }
      }

      .right {
        text-align: right;

        .cell {
          justify-content: end;
          text-align: right;
        }
      }

      thead {
        background-color: @table-head-bg-color;

        th {
          position: relative;
          font-weight: 400;
          background-color: var(--background-color);

          &.col-pointer-hover {
            &.poiner-right {
              &::after {
                content: '';
                position: absolute;
                top: 0;
                bottom: 0;
                right: 0;
                width: 3px;
                background-color: #3785ff;
                transform: translateX(1px);
                pointer-events: none;
              }
            }
            &.poiner-left {
              &::after {
                content: '';
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                width: 3px;
                transform: translateX(-1px);
                background-color: #3785ff;
                pointer-events: none;
              }
            }
          }


          .across-page-cell {
            position: relative;

            .dropwn-icon {
              display: block;
              position: absolute;
              width: 16px;
              height: 16px;
              top: 50%;
              right: 0;
              transform: translate(18px, -50%);

              &::after {
                position: absolute;
                top: 50%;
                right: 0;
                left: 50%;
                width: 5px;
                height: 5px;
                border: 1px solid #63656e;
                border-top: 0;
                border-left: 0;
                transform: translate(-50%, -100%) scaleY(1) rotate(45deg);
                transform-origin: center;
                content: '';
              }
            }

          }

          &.cell-resize {
            cursor: col-resize;
          }

          .cell {
            display: flex;
            align-items: center;
            height: calc(var(--row-height) - 2px);
            color: @table-head-font-color;
          }

        }
      }

      &:not(.col-resize-hover) {
        thead {
          th {
            &.active,
            &:hover {
              cursor: pointer;
              background: @table-row-active-bg-color;
            }
          }
        }
      }

      tbody {
        tr {

          &.stripe-row {
            background: #fafbfd;
            td {
              background-color: #fafbfd;
            }
          }

          &:last-child {
            td {
              border-bottom: none;
            }
          }

          td {
            background-color: #fff;
            border-top: 1px solid @table-bg-color;
            border-bottom: 1px solid @table-bg-color;
            border-right: 1px solid @table-bg-color;

            box-sizing: border-box;

            &.empty-cell {
              padding-bottom: 30px;
            }

            .cell {
              display: block;
              width: 100%;
              line-height: calc(var(--row-height) - 4px);
              box-sizing: border-box;

              &.drag {
                text-align: center;
                cursor: move;
              }
            }
          }

          &.row-height-auto {
            td {
              // 覆盖全局 th, td { height: var(--row-height) }，让内容撑起行高
              // auto 模式使用独立的 --row-min-height 变量，语义上明确表示最小高度而非固定高度
              height: auto !important;
              min-height: var(--row-min-height, 42px);

              .cell {
                display: flex;
                align-items: center;
                height: auto;
                min-height: calc(var(--row-min-height, 42px) - 4px);
                // 允许文字换行，覆盖全局 white-space: nowrap / overflow: hidden / text-overflow: ellipsis
                white-space: normal;
                overflow: visible;
                text-overflow: unset;
                word-break: break-word;
                line-height: normal;
              }
            }
          }

          &:hover {
            &.hover-highlight {
              td {
                &:not(.empty-cell) {
                  background: @table-row-hover-bg-color;
                  border-right-color: @table-row-hover-bg-color;
                }
              }
            }
          }

          &.--drag-start {
            td {
              background: #fff !important;
            }
          }
        }
      }
    }
  }

  .@{bk-prefix}-table-head {
    position: sticky;
    top: 0;
    z-index: 5;
    // 若设置 overflow: hidden，会让 th.column_fixed 的 sticky 参照变为 table-head 自身（其 scrollLeft 不变化）
    // 导致横向滚动时 header 固定列不生效；这里保持 visible，让 sticky 参照外层滚动容器
    overflow: visible;
    background-color: var(--background-color);
    height: var(--row-height);
    min-height: var(--row-height);

    th.column_fixed {
      z-index: 6;
    }

    &.has-group {
      .is-head-group {
        border-bottom: 1px solid @table-border-color;
      }

      th {
        border-right: 1px solid @table-border-color;

        &.is-last-child {
          border-right: none;
        }
      }
    }

    .col-resize-drag {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: 7;
      width: 6px;
      background-color: #3785ff;
      transform: translate3d(var(--drag-offset-h-x), 0, 0);
      pointer-events: none;
    }

    .@{bk-prefix}-table-fixed {
      transform: translate(0, 0);
    }

    .table-head-settings {
      // 由 .bk-table-head-settings-wrapper 负责定位，这里只保留内部图标布局
      > span {
        display: flex;
        width: 1em;
        height: 1em;
      }
    }
  }

  .@{bk-prefix}-table-footer {
    display: flex;
    width: 100%;
    height: var(--footer-height);
    min-height: var(--footer-height);
    align-items: center;
    padding: 0 16px 0 22px;

    &.is-hidden {
      display: none;
    }

    &:not(.is-hidden) {
      border-top: 1px solid @table-border-color;
    }
  }

  &.bordered-row {
    .@{bk-prefix}-table-head {
      border-bottom: 1px solid @table-border-color;
    }

    .bk-table-body {
      tbody {
        tr {
          td {
            border-bottom-color: @table-border-color;
          }
        }
      }
    }
  }

  &.bordered-outer {
    .bk-table-body-wrapper {
      border: 1px solid @table-border-color;
      border-radius: 2px;
      box-sizing: border-box;
    }

    .@{bk-prefix}-table-footer:not(.is-hidden) {
      border-left: 1px solid @table-border-color;
      border-right: 1px solid @table-border-color;
      border-bottom: 1px solid @table-border-color;
      border-radius: 0 0 2px 2px;
      box-sizing: border-box;
    }

    .bk-table-body-wrapper:has(~ .@{bk-prefix}-table-footer:not(.is-hidden)) {
      border-bottom: none;
      border-radius: 2px 2px 0 0;
    }
  }

  &.bordered-horizontal {
    .bk-table-body-wrapper {
      border-top: 1px solid @table-border-color;
      border-bottom: 1px solid @table-border-color;
      box-sizing: border-box;
    }

    .@{bk-prefix}-table-footer:not(.is-hidden) {
      border-bottom: 1px solid @table-border-color;
      box-sizing: border-box;
    }

    .bk-table-body-wrapper:has(~ .@{bk-prefix}-table-footer:not(.is-hidden)) {
      border-bottom: none;
    }
  }

  &.bordered-outer,
  &.bordered-horizontal {
    .@{bk-prefix}-table-body {
      tbody {
        tr:last-child {
          td {
            border-bottom-color: @table-bg-color;
          }
        }
      }
    }
  }

  &.bordered-col {
    .@{bk-prefix}-table-head {
      border-right: 1px solid @table-border-color;
      .is-head-group {
        border-bottom: 1px solid @table-border-color;
      }
    }
    th {
      border-right: 1px solid @table-border-color;

      &:last-child {
        border-right: none;
      }
    }

    .@{bk-prefix}-table-body {
      border-right: 1px solid @table-border-color;
      tbody {
        tr {
          td {
            border-right-color: @table-border-color;

            &:last-child {
              border-right: none;
            }
          }

          &:hover {
            &.hover-highlight {
              td {
                &:not(.empty-cell) {
                  border-right-color: @table-border-color;
                }
              }
            }
          }
        }
      }
    }

    &.bordered-outer {
      .@{bk-prefix}-table-head {
        border-right: none;
      }
      .@{bk-prefix}-table-body {
        border-right: none;
      }
    }
  }

  th,
  td {
    border-right: 1px solid @table-bg-color;
  }

  &.bordered-none {
    th,
    td {
      border-top: none;
      border-right: 1px solid @table-bg-color;
      border-bottom: none;
      border-left: none;
    }
    .@{bk-prefix}-table-body {
      table {
        tbody {
          tr {
            td {
              border-top: none;
              border-right: 1px solid @table-bg-color;
              border-bottom: none;
              border-left: none;
            }
          }
        }
      }
    }
  }

  .@{bk-prefix}-table-fixed {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    // 阴影层应固定在可视区域，不应随滚动位移（避免抖动/错位）
    transform: none;
    // 确保阴影不被 sticky 单元格盖住
    z-index: 4;

    .column_fixed_right {
      box-shadow: var(--shadow-right);
    }

    .column_fixed_left {
      box-shadow: var(--shadow-left);
    }

    .column_fixed {
      position: absolute;
      z-index: 4;
      bottom: 0;
      top: 0;
    }

    .scroll-loading {
      &._bottom {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;

        display: flex;
        justify-content: center;
      }
    }
  }

  .@{bk-prefix}-table-fixed-bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
  }
  colgroup {
    col {
      background: @table-bg-color;

      &.active {
        position: relative;
        background: @table-row-active-bg-color;
      }
    }
  }

  .@{bk-prefix}-pagination {
    .is-last {
      margin-left: auto;
    }
  }
}

.@{bk-prefix}-across-page-popover {
  padding: 0!important;

  .dropwn-content {
    min-width: 100%;
    padding: 5px 0;
    margin: 0;
    background: #fff;
    border: 1px solid  #dcdee5;
    border-radius: 2px;
    box-sizing: border-box;

    > div {
      display: block;
      height: 32px;
      padding: 0 16px;
      font-size: 12px;
      line-height: 33px;
      color: #63656e;
      white-space: nowrap;
      list-style: none;
      cursor: pointer;

      &:hover {
        background-color: #f5f7fa;
      }
    }
  }
}
