@import '../../mixins/config.less';

@tw: ~'@{ns}-ap-table__table-wrapper';
// vben表格
// 新增对sticky表格的样式类型
[class$='-basic-table'],
[class$='-basic-table-form-container'],
[class$='-basic-table ap-table--sticky'],
[class$='-basic-table-form-container ap-table--sticky'] {
  width: 100%;
  height: 100%;

  .ant-table-wrapper {
    // 自定义title样式
    .ant-table.ant-table.ant-table-small .ant-table-title,
    .ant-table.ant-table.ant-table-middle .ant-table-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 40px;
      padding: 0 0 10px;
      border: none;
    }

    // ①-表格公共样式
    .ant-table {
      width: 100%;
      overflow-x: hidden;
      border-radius: 0;
      // 自定义 header 样式
      .ant-table-container .ant-table-header {
        border-radius: 0;

        .ant-table-thead > tr > th {
          color: #182948;
          font-weight: 700;
          font-size: 14px;
          font-style: normal;
          text-align: left;
          text-transform: none;
          background: #f2f6f9;
          // 去掉ant表头竖线
          &::before {
            display: none;
            width: 0;
            visibility: hidden;
          }
        }
      }

      // 自定义 body 样式
      &-body {
        .ant-table-tbody > tr.ant-table-row {
          &:hover {
            background: #f6f9fa;
          }

          &:hover > td {
            background: #f6f9fa;
          }
        }

        .ant-table-tbody > tr.ant-table-row > td {
          color: #182948;
          font-weight: 400;
          font-size: 14px;
          font-style: normal;
          text-align: left;
          text-transform: none;
          transition: unset; // 解决表格td，hover延迟
        }
      }
    }

    // ②-基础性表格样式
    .ant-table.ant-table-middle {
      .ant-table-container {
        // 表头
        .ant-table-thead {
          tr > th {
            padding: 12px 16px; //表头内边距16px
            line-height: 22px;
          }
        }
        // 单元格
        .ant-table-tbody {
          tr.ant-table-measure-row + tr > td {
            border-top: 1px solid;
            border-top-color: transparent;
          }

          tr > .ant-table-cell {
            padding: 12px 16px; // 表格单元格内边距16px
            line-height: 22px; // 基础表格单元格行高
          }
        }
      }
    }

    // ③-紧凑型表格样式
    .ant-table.ant-table-small {
      .ant-table-container {
        .ant-table-thead {
          tr > th {
            padding: 10.5px 16px; //紧凑型表格表头
            line-height: 18px;
          }
        }

        .ant-table-tbody {
          tr.ant-table-measure-row + tr > td {
            border-top: 1px solid;
            border-top-color: transparent;
          }

          tr > .ant-table-cell {
            padding: 10.5px 16px; // 紧凑型表格高度单元格
            line-height: 18px;
          }
        }
      }
    }
  }
}

// vben表格的斑马纹
[class$='-basic-table-row__striped'] {
  td {
    background-color: #f6f9fa;
  }
}

// 三种表格（ApTable，BacisTable，ProTable）的表头+分页器的sticky定位样式
[class*='-basic-table'].ap-table--sticky,
[class*='-ap-table'].ap-table--sticky,
[class*='-pro-table'].ap-table--sticky {
  .@{tw},
  .ant-table-wrapper {
    padding-bottom: 0;

    & .ant-spin-container,
    &,
    .ant-spin-container {
      overflow: visible;

      .ant-table {
        overflow: visible;

        .ant-table-container {
          overflow: visible;

          .ant-table-header {
            position: sticky;
            top: 0;
            z-index: 99;
            border-top: 4px solid #ffffff;
          }
        }
      }

      ul.ant-pagination {
        position: sticky;
        bottom: 0;
        z-index: 99;
        margin: 0;
        padding: 16px 0;
        background-color: #ffffff;
      }
    }
  }
}