@use 'mixins/mixins' as *;

@mixin shadow($offsetX) {
  box-shadow: $offsetX 0 10px -10px #ddd inset;
  content: '';
  position: absolute;
  top: 0px;
  width: 10px;
  bottom: -1px;
  overflow-x: hidden;
  overflow-y: hidden;
  touch-action: none;
  pointer-events: none;
}

@include b(data-table) {
  background-color: var(--el-bg-color-overlay);
  color: var(--el-text-color-regular);
  border: 1px solid #eee;
  font-size: 14px;
  position: relative;

  @include e(resize-line) {
    position: absolute;
    top: 0;
    width: 1px;
    background-color: var(--el-border-color-darker);
    height: 100%;
    left: 0;
    z-index: 1;
    pointer-events: none;
    visibility: hidden;
  }

  table {
    table-layout: fixed;
    border-spacing: 0;
    border-collapse: separate;
    min-width: 100%;
    width: 100%;
  }

  thead {
    background-color: #f8f8f8;
  }

  th,
  td {
    & > div {
      padding: 0 6px;
    }
  }
  td {
    padding: 0;
  }
  th {
    padding: 6px 0;
    background-color: #f8f8f8;
  }
  [draggable='true'] {
    cursor: grab;
  }

  @include e(expand-icon) {
    cursor: pointer;
    background-color: var(--el-bg-color);
    border: 1px solid var(--el-border-color);
    box-sizing: content-box;
  }

  @include e(leaf-icon) {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      left: 3px;
      top: 3px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      box-sizing: border-box;
      border: 2px solid var(--el-border-color);
    }
  }

  // 表头
  @include e(header-wrap) {
    will-change: scroll-position;

    @include when(resizing) {
      cursor: col-resize;
    }
  }

  @include e(header) {
    background-color: #fff;
    user-select: none;

    &-wrap {
      width: 100%;
      overflow: hidden;
    }

    &:hover {
      .el-data-table__column-resize {
        border-right-color: var(--el-border-color);
      }
    }
  }

  @include e(sort-trigger) {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    height: 14px;
    width: 14px;
    vertical-align: middle;
    cursor: pointer;
    overflow: initial;
    position: relative;

    i {
      width: 0;
      height: 0;
      border: solid 5px transparent;
      position: absolute;
      right: 0;

      &.asc {
        border-bottom-color: var(--el-text-color-placeholder);
        top: -5px;
        @include when(active) {
          border-bottom-color: var(--el-color-primary);
        }
      }

      &.dsc {
        border-top-color: var(--el-text-color-placeholder);
        bottom: -3px;
        @include when(active) {
          border-top-color: var(--el-color-primary);
        }
      }
    }
  }

  @include e(align-adjuster) {
    position: fixed;
    z-index: 1;
    background-color: var(--el-bg-color);
    padding: 6px 8px;
    border-radius: 4px;
    box-shadow: var(--el-box-shadow);
  }

  @include e(column-resize) {
    position: absolute;
    height: 100%;
    width: 4px;
    top: 0;
    cursor: col-resize;
    z-index: 0;
    box-sizing: border-box;
    border-right: 4px double transparent;
    transition: border-color 0.3s;
  }

  @include e(header-cell) {
    border-bottom: 1px solid #eee;
    box-shadow: -1px 0px 0px 0px #eee inset;
    box-sizing: border-box;

    & > div {
      width: 100%;
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &--left,
    &--right {
      position: sticky;
      z-index: 1;
    }

    &--center {
      @include when(leaf) {
        position: relative;
      }
    }

    &--right {
      @include when(first) {
        box-shadow: 1px 0px 0px 0px #eee inset;
      }
    }
  }

  // 表体
  @include e(body) {
  }

  @include e(row) {
    &:hover {
      td {
        background-color: var(--el-fill-color-light);
      }
    }
  }

  @include when(stripe) {
    .el-data-table__row {
      &.is-odd {
        td {
          background-color: var(--el-fill-color-lighter);
        }
      }
    }
  }

  @include e(cell) {
    box-shadow: -1px -1px 0px 0px #eee inset;
    & > div {
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
    }

    &--left,
    &--right {
      position: sticky;
      z-index: 1;
      background-color: var(--el-bg-color);
    }

    &--left {
      @include when(last) {
      }
    }

    &--right {
      @include when(first) {
        & > div {
          border-left: 1px solid #eee;
        }
      }
    }

    &--center {
      @include when(last) {
        & > div {
          border-right: none;
        }
      }
    }
  }

  // 合计行
  @include e(footer-wrap) {
    overflow: hidden;
    will-change: scroll-position;
  }

  @include e(footer-cell) {
    box-shadow: -1px 1px 0px 0px #eee inset;

    & > div {
      width: 100%;
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &--left,
    &--right {
      position: sticky;
      z-index: 1;
      background-color: var(--el-bg-color);
    }
  }

  // 左固定栏阴影
  @include when(left-fixed-shadow) {
    .el-data-table__header-cell,
    .el-data-table__cell,
    .el-data-table__footer-cell {
      &--left.is-last::after {
        @include shadow(10px);
        right: -10px;
      }
    }
  }

  // 右固定栏阴影
  @include when(right-fixed-shadow) {
    .el-data-table__header-cell,
    .el-data-table__cell,
    .el-data-table__footer-cell {
      &--right.is-first::before {
        @include shadow(-10px);
        left: -10px;
      }
    }
  }
}