@use "../../libs/css/theme" as *;
@use "../../libs/css/mixin" as *;

$header-text-color: #909399;
$stripe-bg: $hy-background--table-header;

@include b(table) {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: $hy-border-line;
  @include flex(column);

  /* 表格头部 */
  @include e(header) {
    position: relative;
    z-index: 10;
    border-bottom: $hy-border-line;

    @include m(scroll) {
      width: 100%;
      height: 50px;
      white-space: nowrap;
    }

    @include m(wrapper) {
      display: flex;
      height: 100%;

      @include e(cell) {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 0 20rpx;
        font-weight: bold;
        color: $header-text-color;
        font-size: 28rpx;
        border-right: $hy-border-line;
        box-sizing: border-box;
        position: relative;
        flex-shrink: 0;
        background-color: $hy-background--table-header;

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

        @include m(sortable) {
          :deep(.is-active) {
            color: $hy-primary;
          }
        }
      }

      @include e(left, center, right) {
        display: flex;
        height: 100%;
      }

      @include e(left, right) {
        position: sticky;
      }

      @include e(left) {
        left: 0;
        border-right: $hy-border-line;

        @include is(shadow) {
          box-shadow: 4px 0 10px rgba(0, 0, 0, 0.1);
        }
      }

      @include e(right) {
        right: 0;
        border-left: $hy-border-line;

        @include is(shadow) {
          box-shadow: -4px 0 10px rgba(0, 0, 0, 0.1);
        }
      }
    }
  }

  /* 表格主体 */
  @include e(body) {
    position: relative;
    width: 100%;
    height: 100%;

    /* 加载状态 */
    @include m(loading) {
      z-index: 999;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: $hy-background--container;
    }

    /* 空状态 */
    @include m(empty) {
      width: 100%;
      height: 100%;
    }

    @include m(content) {
      display: flex;
      flex-direction: column;

      @include e(row) {
        display: flex;
        width: 100%;
        border-bottom: $hy-border-line;
        box-sizing: border-box;
        background-color: $hy-background--container;

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

        @include is(stripe) {
          background: $stripe-bg;
        }

        @include m(cell) {
          display: flex;
          align-items: center;
          padding: 0 8px;
          font-size: 14px;
          border-right: $hy-border-line;
          box-sizing: border-box;
          flex-shrink: 0;
          white-space: nowrap;

          @include e(text) {
            width: 100%;
            overflow: hidden;

            @include is(ellipsis) {
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
          }
        }
      }
    }

    @include m(center) {
      position: absolute;
      top: 0;
      z-index: 1;
      overflow: scroll;
    }

    @include m(left, right) {
      position: absolute;
      top: 0;
      z-index: 5;
      overflow: hidden;
    }

    @include m(left) {
      left: 0;

      @include is(shadow) {
        box-shadow: 4px 0 10px rgba(0, 0, 0, 0.1);
      }
    }

    @include m(right) {
      right: 0;
      border-left: $hy-border-line;

      @include is(shadow) {
        box-shadow: -4px 0 10px rgba(0, 0, 0, 0.1);
      }
    }
  }
}

//.is-shadow {
//  box-shadow: -4px 0 10px rgba(0, 0, 0, 0.1);
//}