@use '../../style/themes/default.scss' as *;
@use '../../style/util.scss' as *;
@use './css-var.scss' as *;
$ele-expand-path: 'M362 811 662 512 362 213' !default;
$ele-loading-path: 'M512 128V299M789 235 672 352M896 512H725M789 789 672 672M512 896V725M235 789 352 672M128 512H299M235 235 352 352' !default;
$ele-filter-path: 'M349 838c0 17 14 32 31 32h262c17 0 31-14 31-32V642H349v196ZM880 154H143c-24 0-39 26-27 48l221 376h348l221-376c12-21-3-48-27-48' !default;

@include set-data-table-var($ele);
@include table-var-style('body .ele-data-table.el-table');

/* 原始样式重写 */
.ele-data-table.el-table,
.ele-data-table.el-table tr {
  background: none;
}

.ele-data-table > .el-table__inner-wrapper > .el-table__header-wrapper {
  z-index: 4;
}

/* 底部间距补丁 */
.ele-data-table.el-table > .el-table__inner-wrapper > .el-table__body-wrapper {
  & > .el-scrollbar > .el-scrollbar__wrap {
    padding-bottom: eleVar('table', 'fix-height');
    box-sizing: border-box;
  }
}

.ele-data-table {
  /* 单元格背景 */
  & > .el-table__inner-wrapper {
    .ele-table-tr {
      & > td.el-table__cell {
        background: eleVar('table', 'tr-bg');
      }

      &.el-table__row--striped > td.el-table__cell {
        background: eleVar('table', 'even-bg');
      }

      &:hover > td.el-table__cell,
      &.hover-row > td.el-table__cell {
        background: eleVar('table', 'tr-hover-bg');
      }

      &.current-row > td.el-table__cell {
        background: eleVar('table', 'tr-active-bg');
      }

      &.current-row:hover > td.el-table__cell,
      &.current-row.hover-row > td.el-table__cell {
        background: eleVar('table', 'tr-active-hover-bg');
      }
    }

    & > .el-table__header-wrapper .ele-table-head-tr > th.el-table__cell,
    & > .el-table__footer-wrapper > .el-table__footer .el-table__cell {
      background: eleVar('table', 'th-bg');
    }

    & > .el-table__header-wrapper .ele-table-head-tr {
      & > .el-table__cell.is-sortable:hover {
        background: eleVar('table', 'sort-hover-bg');
      }
    }
  }

  /* 表头单元格 */
  .cell > .ele-cell-title {
    flex: 1;
    position: relative;
    color: eleVar('table', 'th-color');
    font-weight: eleVar('table', 'th-font-weight');
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .ele-table-head-tr > .el-table__cell {
    transition: background-color $ele-transition;

    & > .cell {
      display: flex;
      align-items: center;
    }

    &.is-center > .cell {
      justify-content: center;
    }

    &.is-right > .cell {
      justify-content: flex-end;
    }

    &::after {
      content: '';
      width: 0;
      height: 20px;
      border-right: 1px solid eleVar('table', 'border-color');
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -10px;
    }
  }

  .ele-table-head-tr > .el-table__cell:last-child::after,
  .ele-table-head-tr > .el-table__cell.el-table-column--selection::after,
  .ele-table-head-tr > .el-table__cell.el-table__expand-column::after,
  &.is-scrolling-middle .el-table-fixed-column--left.is-last-column::after,
  &.is-scrolling-right .el-table-fixed-column--left.is-last-column::after,
  &.el-table--border .ele-table-head-tr > .el-table__cell::after {
    display: none;
  }

  /* 表头单元格省略 */
  .ele-table-head-tr.is-ellipsis > .el-table__cell > .cell {
    white-space: nowrap;
  }

  /* 表头排序图标 */
  .ele-table-head-tr .caret-wrapper {
    flex-shrink: 0;
    width: auto;
    height: auto;
    overflow: visible;
    position: static;
    margin-left: eleVar('table', 'icon-margin');
    box-sizing: border-box;

    .sort-caret {
      position: static;
      border: eleVar('table', 'sort-size') solid transparent;
      transition: border-color $ele-transition;
      box-sizing: border-box;
      pointer-events: none;
    }

    .ascending {
      border-bottom-color: eleVar('table', 'icon-color');
      margin-top: calc(0px - #{eleVar('table', 'sort-size')});
      margin-bottom: calc(#{eleVar('table', 'sort-space')} / 2);
    }

    .descending {
      border-top-color: eleVar('table', 'icon-color');
      margin-bottom: calc(0px - #{eleVar('table', 'sort-size')});
      margin-top: calc(#{eleVar('table', 'sort-space')} / 2);
    }
  }

  .ele-table-head-tr > .el-table__cell:hover {
    .sort-caret.ascending {
      border-bottom-color: eleVar('table', 'icon-hover-color');
    }

    .sort-caret.descending {
      border-top-color: eleVar('table', 'icon-hover-color');
    }
  }

  .ele-table-head-tr > .el-table__cell.ascending .sort-caret.ascending {
    border-bottom-color: elVar('color-primary');
  }

  .ele-table-head-tr > .el-table__cell.descending .sort-caret.descending {
    border-top-color: elVar('color-primary');
  }

  /* 表头筛选图标 */
  .ele-table-head-tr .el-table__column-filter-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: eleVar('table', 'filter-margin');
    padding: eleVar('table', 'filter-padding');
    border-radius: eleVar('table', 'icon-radius');
    transition: (color $ele-transition, background-color $ele-transition);
    box-sizing: border-box;
    position: relative;

    & > .el-icon {
      color: eleVar('table', 'icon-color');
      font-size: eleVar('table', 'filter-size');
      transition: (color $ele-transition, font-size $ele-transition);

      & > svg > path {
        #{'d'}: path($ele-filter-path);
      }
    }

    &:hover {
      background: eleVar('table', 'icon-hover-bg');

      & > .el-icon {
        color: eleVar('table', 'icon-hover-color');
      }
    }
  }

  .cell.highlight > .el-table__column-filter-trigger > .el-icon {
    color: elVar('color-primary');
  }

  /* 行高 */
  .ele-table-tr > .el-table__cell > .cell,
  .ele-table-head-tr > .el-table__cell > .cell {
    line-height: eleVar('table', 'line-height');
  }

  /* 展开按钮 */
  .ele-table-tr > .el-table__cell > .cell {
    & > .el-table__expand-icon {
      font-size: 14px;
      align-items: center;
      justify-content: center;
      border-radius: eleVar('table', 'icon-radius');
      transition: (color $ele-transition, background-color $ele-transition);
      transform: none;

      &:hover {
        background: eleVar('table', 'icon-hover-bg');
      }

      & > .el-icon {
        transition: all $ele-transition;
        font-size: inherit;

        & > svg > path {
          fill: none;
          stroke: currentColor;
          stroke-linecap: round;
          stroke-linejoin: round;
          stroke-width: 98;
          #{'d'}: path($ele-expand-path);
        }
      }

      & > .is-loading > svg > path {
        stroke-width: 85;
        #{'d'}: path($ele-loading-path);
      }

      & > .el-icon:not(.is-loading) > svg {
        transform: translateX(0.4px);
      }
    }

    & > .el-table__expand-icon,
    & > .el-table__indent,
    & > .el-table__placeholder {
      height: 16px;
      display: inline-flex;
      vertical-align: -2px;
    }

    & > .el-table__expand-icon,
    & > .el-table__placeholder {
      width: 16px;
      margin: eleVar('table', 'expand-margin');
    }

    & > .el-table__expand-icon--expanded > .el-icon:not(.is-loading) {
      transform: rotate(90deg);
    }
  }

  /* 展开列 */
  .ele-table-tr > .el-table__expand-column > .cell > .el-table__expand-icon {
    margin: 0;
    justify-content: center;
  }

  /* 复选框 */
  .ele-table-head-tr > .el-table-column--selection > .cell,
  .ele-table-tr > .el-table-column--selection > .cell {
    height: auto;
    vertical-align: middle;
    overflow: visible;
  }

  .ele-table-tr > .el-table-column--selection {
    &.is-center > .cell {
      justify-content: center;
    }

    &.is-right > .cell {
      justify-content: flex-end;
    }
  }

  /* 表尾 */
  & > .el-table__inner-wrapper > .el-table__footer-wrapper {
    border-top: 1px solid eleVar('table', 'border-color');
    margin-top: -1px;
    z-index: 3;

    td.el-table__cell {
      border-bottom-color: transparent;
    }
  }

  /* 边框线 */
  &.el-table--border,
  &.el-table > .el-table__inner-wrapper {
    &::before,
    &::after {
      background: none;
      position: absolute;
      box-sizing: border-box;
      pointer-events: none;
      z-index: 5;
    }
  }

  &.el-table > .el-table__inner-wrapper::before,
  &.el-table > .el-table__inner-wrapper::after {
    left: 0;
    right: 0;
    width: 100%;
    height: calc(1px + #{eleVar('table', 'radius')});
  }

  &.el-table > .el-table__inner-wrapper::before {
    content: '';
    bottom: 0;
    border-bottom: 1px solid eleVar('table', 'border-color');
  }

  &.el-table.el-table--border > .el-table__inner-wrapper::after,
  &.el-table.hide-header > .el-table__inner-wrapper::after {
    content: '';
    top: 0;
    border-top: 1px solid eleVar('table', 'border-color');
  }

  &.el-table--border > .el-table__inner-wrapper {
    &::before,
    &::after {
      border-right: 1px solid transparent;
      border-left: 1px solid transparent;
    }
  }

  & > .el-table__inner-wrapper > .el-table__border-left-patch,
  &.has-footer:not(.el-table--border) > .el-table__inner-wrapper::before,
  &.hide-bottom-line > .el-table__inner-wrapper::before {
    display: none;
  }

  /* 全边框 */
  &.el-table--border {
    &::before,
    &::after {
      content: '';
      top: 0;
      bottom: 0;
      height: 100%;
      width: calc(1px + #{eleVar('table', 'radius')});
      border-bottom: 1px solid transparent;
      border-top: 1px solid transparent;
    }

    &::before {
      left: 0;
      border-left: 1px solid eleVar('table', 'border-color');
    }

    &::after {
      right: 0;
      border-right: 1px solid eleVar('table', 'border-color');
    }
  }

  /* 适配底部间距补丁 */
  &.el-table:not(.has-footer) > .el-table__inner-wrapper::before {
    bottom: eleVar('table', 'fix-height');
    box-shadow: 0 0.8px 0 eleVar('table', 'tr-bg');
  }

  &.el-table--border:not(.has-footer)::before,
  &.el-table--border:not(.has-footer)::after {
    bottom: eleVar('table', 'fix-height');
    height: auto;
  }

  /* 圆角 */
  @include data-table-radius(eleVar('table', 'radius'));

  &.el-table--large {
    @include data-table-radius(eleVar('table', 'lg-radius'));
  }

  &.el-table--small {
    @include data-table-radius(eleVar('table', 'sm-radius'));
  }

  /* 内部组件 */
  &.el-table--border > .el-loading-mask {
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
  }

  @include table-empty-style();

  .ele-table-tr,
  .ele-table-head-tr {
    @include table-common-style();
  }

  /* 粘性表头 */
  &.is-sticky.el-table {
    overflow: visible;

    & > .el-table__inner-wrapper > .el-table__header-wrapper {
      position: sticky;
      top: eleVar('table', 'sticky-top');
    }
  }
}

/* 粘性头部适配布局风格 */
.ele-admin-fixed-header:not(.ele-admin-maximized) .ele-data-table.is-sticky {
  &.el-table > .el-table__inner-wrapper > .el-table__header-wrapper {
    top: eleVar('table', 'fixed-header-sticky-top');
  }
}

.ele-admin-fixed-header.ele-admin-maximized:not(.ele-admin-expanded) {
  &:not(.ele-admin-fixed-body) .ele-data-table.is-sticky {
    &.el-table > .el-table__inner-wrapper > .el-table__header-wrapper {
      top: eleVar('table', 'maximized-sticky-top');
    }
  }
}

/* Tooltip */
body .ele-popper.el-popper.ele-tooltip.ele-table-tooltip {
  padding: eleVar('tooltip', 'padding');

  &::after {
    content: '';
    background: inherit;
    border-radius: inherit;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
  }
}

.ele-table-tr > .el-table__cell > .cell.el-tooltip {
  min-width: auto;

  & > div {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.ele-table-tr > .is-index > .cell.el-tooltip > div {
  display: inline;
}