@aplus-frontend/ui/theme/ap-grid/index.less

@import '../mixins/mixins.less';
// 因为在ApTable里面可能会查询表单因此表单和控件的样式最好直接导入
@import '../ap-form/index.less';
@import '../ap-field/index.less';
@import '../ap-action/item.less';
@import '../ap-action/item-dropdown.less';

@vxe: ~'@{ns}-ap-grid-vxe-wrapper';
@pg: ~'@{ns}-ap-grid-pagination-wrapper';
@sb: ~'@{ns}-scroll-bar';

.b(ap-grid, {
  .reset-scrollbar();
  .vxe-table--render-default.size--medium .vxe-body--column.is--padding div.vxe-cell{
    min-height: unset !important;
    padding: 9px 12px;
    font-size: @font-size-base;
    line-height: @line-height-base;
  }
  .vxe-table--render-default.size--mini .vxe-body--column.is--padding div.vxe-cell {
    min-height: unset !important;
    padding: 6px 9px;
    line-height: @line-height-base;
  }
  .vxe-table--render-default.size--medium .vxe-header--column.is--padding div.vxe-cell {
    font-size: @font-size-base;
    line-height: 16px;
    padding: 0px 12px;
  }
  .vxe-table--render-default.size--mini .vxe-header--column.is--padding div.vxe-cell {
    line-height: 16px;
    padding: 0 9px;
  }
  &-adaptive {
    height: 100%;
    display: flex;
    flex-direction: column;
    .@{vxe} {
      min-height: 0;
      flex: 1;
    }
  }
  .@{pg} {
    ul.ant-pagination {
      margin-block: @spacing;
    }
  }
  &-sticky {
    .@{pg} {
      background-color: #fff;
      z-index: 10;
      position: sticky;
      bottom: 0;
    }
    // 如果粘贴模式下渲染了自定义滚动条，则隐藏默认滚动条及其区域，重设分页器顶部间距
    &:has(.@{sb}) {
      .@{pg} {
        ul.ant-pagination {
          margin-top: 0;
          padding-top: 4px;
        }
      }
      .vxe-table--scroll-x-wrapper {
        opacity: 0;
      }
      .vxe-table .vxe-table--scroll-x-virtual {
        height: 0px !important;
      }
    }
  }
  &-wrapper {
    padding: @spacing;
    padding-bottom: @spacing-lg;
    // 如果渲染了分页器，则取消容器的底部边距，防止双重边距
    &:has(ul.ant-pagination) {
      padding-bottom: 0;
    }
    background-color: #fff;
  }
  &-wrapper&-sticky {
    padding-bottom: 0;
  }
  &-sticky > &__table-wrapper-card {
    padding-bottom: 0;
  }
  &__search-wrapper {
    padding: @spacing;
    padding-bottom: 0;
    background-color: #fff;
    border-radius: @border-radius;
    margin-bottom: 10px;
  }
  &__table-wrapper {
    flex: 1;
    min-height: 0;
    max-height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  &__table-wrapper-card {
    padding: @spacing;
    padding-bottom: @spacing-lg;
    &:has(ul.ant-pagination) {
      padding-bottom: 0;
    }
    border-radius: @border-radius;
    background-color: #fff;
  }
  &-pagination {
    margin-block: @spacing-lg;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 8px;
    .ant-pagination-total-text {
      flex: 1;
      height: unset;
      line-height: @line-height-base;
      display: flex;
      align-items: center;
    }
  }
  // 兼容使用了vxe-pc-ui时自定义的场景
  .vxe-loading.vxe-table--loading {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99;
    user-select: none;
    .vxe-loading--wrapper {
      width: 100%;
      height: 100%;
    }
  }
  &__table-loading-wrapper {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--vxe-ui-loading-background-color);
  }
  &-pagination-count-text {
    color: var(--ap-text-color-2);
  }
  &-pagination--total-right {
    padding-left: 12px;
  }
  &-pagination-total-wrapper {
    color: var(--ap-text-color-1);
  }
  &-header-wrapper {
  }
  // ApGrid中表格表头的样式
  &-table-header {
    &__title {
      display: -webkit-inline-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      max-width: 100%;
      vertical-align: middle;
      word-break: break-all;
      flex: 1;
      font-weight: bold;
      text-align: right;
      &--single {
        flex: unset;
      }
    }
  }
  // 实现表头不换行排列
  th.vxe-header--column .vxe-cell--wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    min-width: unset;
    .vxe-cell--title {
      flex-shrink: 1;
      flex-grow: 0;
    }
  }

  // 浮动表头和浮动页脚为对齐问题
  .fixed-left--wrapper,
  .fixed-right--wrapper {
    .vxe-table--header {
      height: 100%;
    }
    .vxe-table--footer {
      height: 100%;
    }
  }

  // 树形表格图标
  i.vxe-tree--node-btn {
    &::before {
      content: "\f292"
    }
  }
  i.vxe-tree--node-btn.rotate90 {
    &::before {
      content: "\f293"
    }
    transform: none;
  }
  i[class*=vxe-table-icon-] {
    font-family: aplusuiiconfont !important;
  }
  .vxe-cell--checkbox.is--disabled > .vxe-checkbox--icon {
    background-color: var(--ap-table-header-bg);
    border-radius: 4px;
  }
  .vxe-cell--checkbox span.vxe-checkbox--icon {
    vertical-align: text-top;
  }
  div.vxe-cell--tree-btn > i {
    font-size: 10px;
    color: var(--ap-text-color-2);
  }
});