/*
 * @Author: 焦质晔
 * @Date: 2021-07-23 19:05:57
 * @Last Modified by: 焦质晔
 * @Last Modified time: 2025-08-06 22:45:58
 */
@use 'sass:math';

@use '../../style/src/themes' as *;
@use '../../style/src/mixins/reset' as *;
@use './variable' as *;

// 外层容器
.#{$prefix-table}--wrapper {
  @include reset-component();
}

/* 全屏 */
.#{$prefix-table}--maximize {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: 100;
  overflow-y: auto;
  padding: $v-module-distance;
  padding-bottom: 0;
  background-color: $v-table-background-color;
}

/* table 样式 */
.#{$prefix-table} {
  position: relative;
  background-color: $v-table-background-color;
  &:before,
  &:after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 0;
    z-index: 3;
    pointer-events: none;
  }
  &:before {
    top: 0;
    border-top: 1px solid $v-table-border-color;
  }
  &:after {
    bottom: 0;
    border-bottom: 1px solid $v-table-border-color;
  }

  &--header,
  &--body,
  &--footer {
    border: 0;
    border-spacing: 0;
    border-collapse: separate;
    table-layout: fixed;
  }

  &--header-wrapper,
  &--footer-wrapper {
    overflow-x: hidden;
    overflow-y: hidden;
  }

  &--body-wrapper {
    overflow-y: auto;
    overflow-x: auto;
    .virtual-container {
      will-change: margin-top, margin-left;
    }
  }

  &.c--resize {
    cursor: col-resize;
    .header--column {
      pointer-events: none;
    }
  }

  .header--column {
    background-color: $v-table-header-background-color;
  }

  .body--column {
    transition: background-color 0.3s ease;
    background-color: $v-table-background-color;
  }

  .footer--column {
    background-color: $v-table-footer-background-color;
    border-bottom: 0;
  }

  .body--row:hover {
    .body--column {
      background-color: $v-table-row-hover-background-color;
    }
  }

  .body--row-striped {
    .body--column {
      background-color: $v-table-header-background-color;
    }
  }

  .body--row-selected {
    .body--column {
      background-color: $v-table-row-selected-background-color;
    }
  }

  .body--row-current {
    .body--column {
      background-color: $v-table-row-current-background-color;
    }
  }

  .body--row-expanded {
    .body--column {
      background-color: $v-table-row-expanded-background-color;
    }
  }

  .body--row-group_1 {
    .body--column {
      background-color: $primary-light-9;
    }
  }

  .body--row-group_2 {
    .body--column {
      background-color: $primary-light-7;
    }
  }

  .body--row-group_3 {
    .body--column {
      background-color: $primary-light-5;
    }
  }

  .header--column,
  .body--column,
  .footer--column {
    position: relative;
    text-align: left;
    // line-height: $v-table-row-line-height;
    /* 溢出列 */
    &.col--ellipsis {
      .cell {
        @include text-overflow-cut();
        word-break: break-all;
        white-space: pre;
      }
    }
    &:not(.col--ellipsis) {
      padding: #{math.div($v-table-row-height - $v-table-row-line-height, 2)} 0;
      .cell {
        line-height: 1.2;
      }
    }
    &.col--center:not(.header--column) {
      text-align: center;
    }
    &.col--right:not(.header--column) {
      text-align: right;
    }
    .cell {
      white-space: pre-wrap;
      word-break: break-all;
      padding: 0 $v-module-distance;
      .cell--indent {
        float: left;
        height: 1px;
        visibility: hidden;
      }
      .cell--sign {
        content: ' ';
        top: -5px;
        left: -5px;
        position: absolute;
        z-index: 1;
        border-width: 5px;
        border-style: solid;
        border-color: transparent $v-primary-color transparent transparent;
        transform: rotate(45deg);
        pointer-events: none;
      }
      .is-cell-bg {
        position: relative;
        z-index: 1;
      }
      .cell--bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        pointer-events: none;
      }
      .cell--copy {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: space-between;
        .text {
          flex: 1;
          @include text-overflow-cut();
        }
        .icon {
          margin-right: -2px;
          color: $v-font-color-placeholder;
          cursor: pointer;
        }
      }
    }
  }

  // 自定义
  &.is--fixed {
    .cell-fix-left,
    .cell-fix-right {
      position: sticky;
      z-index: 2;
    }
    .cell-fix-left-last {
      &::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: -1px;
        width: 20px;
        transform: translateX(100%);
        transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
        pointer-events: none;
      }
    }
    .cell-fix-right-first {
      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: -1px;
        width: 20px;
        transform: translateX(-100%);
        transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
        pointer-events: none;
      }
    }
    &.is--ping-left .cell-fix-left-last::after {
      box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15);
    }
    &.is--ping-right .cell-fix-right-first::after {
      box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.15);
    }
  }

  &.is--sortable {
    .column-has-sorter {
      transition: background-color 0.3s ease;
      cursor: pointer;
      &:hover {
        background-color: $v-table-column-sort-hover-color;
      }
      &.column--sort {
        background-color: $v-table-column-sorted-color;
      }
    }
    .column--sort {
      background-color: $v-table-header-background-color;
    }
  }

  &.is--border {
    .header--column,
    .body--column,
    .footer--column {
      border-bottom: 1px solid $v-table-border-color;
      border-inline-end: 1px solid $v-table-border-color;
      // box-shadow: inset -1px -1px 0 $v-table-border-color;
      @include box-sizing-content();
    }
  }

  &:not(.is--border) {
    &:before,
    &:after {
      border: 0;
    }
    .header--column,
    .body--column {
      border-bottom: 1px solid $v-table-border-color;
      // box-shadow: inset 0 -1px 0 $v-table-border-color;
    }
  }

  &.is--area-select &--body-wrapper {
    & > div {
      position: relative;
    }
    table td {
      user-select: none;
    }
  }

  /* body 填充元素 */
  .body--x-space {
    height: 0;
    visibility: hidden;
    &::after {
      content: '.';
    }
  }
  .body--y-space {
    width: 0;
    line-height: 0;
    float: left;
    visibility: hidden;
    &::after {
      content: '.';
    }
  }

  /* 列宽线 */
  &--resizable-bar {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    z-index: 4;
    &:before {
      content: '';
      display: block;
      height: 100%;
      background-color: $v-table-resizable-color;
    }
  }

  /* 边框线 */
  &--border-line {
    &:before,
    &:after {
      content: '';
      position: absolute;
      top: 0;
      width: 0;
      height: 100%;
      z-index: 3;
      pointer-events: none;
    }
    &:before {
      left: 0;
      border-left: 1px solid $v-table-border-color;
    }
    &:after {
      right: 0;
      border-right: 1px solid $v-table-border-color;
    }
  }

  /* 弹出层 */
  &__popper {
    padding: $v-module-distance;
  }
}