@import "mixins/mixins";
@import "checkbox";
@import "tag";
@import "tooltip";
@import "common/var";

.el-table-pagination-right {
  display: flex;
  justify-content: flex-end;
}

.el-table-pagination-center {
  display: flex;
  justify-content: center;
}

.el-table-pagination-left {
  display: flex;
  justify-self: flex-start;
}
@include b(table) {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  flex: 1;
  width: 100%;
  max-width: 100%;
  background-color: $--color-white;
  font-size: $--font-size-body-3;
  font-weight: $--font-weight-400;
  color: $--color-text-1;
  // border-radius: 4px;
  border-radius: $--border-radius-medium;

  // hover显示滚动条
  &:hover{
    > .el-table__body-wrapper >.el-table__body-scrollbar > .el-scrollbar__bar{
      opacity: 1;
    }
  }

  .el-pagination {
    padding: 8px 0 0;
    .btn-prev {
      margin: 0 8px 0 0;
    }

    .btn-next {
      margin: 0 0 0 8px;
    }
  }

  &__row {
    .el-button--text {
      color: $--primary-6;
      border-color: transparent;
      background: transparent;
      padding: 0!important;

      &:hover {
        color: $--primary-5;
        border-color: transparent;
        background: transparent;
      }
      &:active {
        color: $--primary-7;
        border-color: transparent;
        background: transparent;
      }

      &.is-disabled {
        &,
        &:hover,
        &:focus,
        &:active {
          color: $--color-text-4;
          border-color: transparent;
          background: transparent;
        }
      }
    }

    .el-dropdown {
      .el-dropdown-link {
        &:hover {
          background-color: transparent;
          color: $--primary-5;
        }
        &:active {
          color: $--primary-7;
          background: transparent;
        }

        &.is-disabled {
          &,
          &:hover,
          &:focus,
          &:active {
            color: $--color-text-4;
            background: transparent;
          }
        }
      }
    }

    &.expanded {
      td {
        .cell {
          // display: flex;
          // align-items: center;
          box-sizing: border-box;
        }
      }
    }
  }

  // 数据为空
  @include e(empty-block) {
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  @include e(empty-text) {
    // min-height doesn't work in IE10 and IE11 https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
    // set empty text line height up to contrainer min-height as workaround.
    line-height: 48px;
    width: 50%;
    color: $--color-text-2;
  }

  // 展开行
  @include e(expand-column) {
    .cell {
      padding: 0;
      text-align: center;
    }
  }

  @include e(expand-icon) {
    position: relative;
    cursor: pointer;
    color: $--color-text-2;
    font-size: $--font-size-body-1;
    transition: transform 0.2s ease-in-out;
    // height: 16px;
    height: 100%;
    width: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    // @include m(expanded) {
    //   transform: rotate(90deg);
    // }
    .icon {
      width: 16px;
      height: 16px;
    }
    > .el-icon {
      // position: absolute;
      // left: 50%;
      // top: 50%;
      // margin-left: -7px;
      // margin-top: -7px;
      background: $--color-bg-4;
      // border-radius: 2px;
      border-radius: $--border-radius-small;
      font-size: $--font-size-title-1;
      &:hover{
        background: $--color-fill-5;
        color: $--color-text-2;
      }
    }
    .isExpand:hover {
      background-color: $--color-fill-5 !important;
    }
  }

  @include e(expanded-cell) {
    background-color: $--color-white;

    // 纯属为了增加权重
    &[class*=cell] {
      // padding: 20px 50px;
      padding: 0;
    }

    &:hover {
      background-color: transparent !important;
    }
  }

  @include e(placeholder) {
    display: inline-block;
    width: 20px;
  }

  @include e(append-wrapper) {
    // 避免外边距重合 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
    overflow: hidden;
  }

  @include m(fit) {
    border-right: 0;
    border-bottom: 0;

    th.gutter, td.gutter {
      border-right-width: 1px;
    }
  }

  @include m(scrollable-x) {
    .el-table__body-wrapper {
      overflow-x: auto;
      // 火狐浏览器属性
      scrollbar-width: thin;
      /*scrollbar-width: none;
      scrollbar-color: rgba($color: #1D2129, $alpha: .3) white;
      // 火狐浏览器属性
      &:hover {
        // 火狐浏览器属性
        scrollbar-width: thin;
        // 火狐浏览器属性
      }*/
    }

    .el-scrollbar__bar.is-horizontal{
      display: block !important;
    }
  }

  @include m(font-size) {
    font-size: $--font-size-body-1;
  }

  @include m(scrollable-y) {
    &.el-table-scrolling-y-middle, &.el-table-scrolling-y-bottom{
      //box-shadow: $--shadow1-center;
      .el-table__header-wrapper{
        box-shadow: $--shadow1-center;
      }
    }
    .el-table__header-wrapper{
      position: relative;
      z-index: 1;
      // box-shadow: 0 0 10px 0px #E5E6EB;
      // box-shadow: $--shadow1-center;
      box-shadow: none;
    }
    .el-table__body-wrapper {
      overflow-y: auto;
      scrollbar-width: thin;
    }
    thead{
      // box-shadow: $--table-fixed-box-shadow;
      box-shadow: $--shadow1-center;
    }
  }

  @include m(scrollable-y-scroll) {
    .el-table__header-wrapper{
      box-shadow: $--shadow1-center;
    }
  }

  thead {
    color: $--table-header-font-color;
    font-weight: $--font-weight-400;

    &.is-group {
      th {
        // background: $--background-color-base;
      }
    }
  }

  th, td {
    padding: 0;
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: left;
    .el-button + .el-button {
      margin-left: 16px;
    }

    @include when(center) {
      text-align: center;
      // table-header
      .custom-value {
        justify-content: center;
      }
    }

    @include when(right) {
      text-align: right;
      .custom-value {
        justify-content: flex-end;
      }
    }

    &.gutter {
      width: 15px;
      border-right-width: 0;
      border-bottom-width: 0;
      padding: 0;
    }

    &.is-hidden {
      > * {
        visibility: hidden;
      }
    }
  }
  @include m(large) {
    th,td > .cell{
      height: 48px;
      line-height: 48px;
    }
  }
  @include m(medium) {
    th > .cell{
      height: 44px;
      line-height: 44px;
    }
    td> .cell{
      height: 44px;
      line-height: 44px;
    }
  }

  @include m(small) {
    th > .cell{
      height: 40px;
      line-height: 40px;
    }
    td> .cell{
      height: 40px;
      line-height: 40px;
    }
  }

  @include m(mini) {
    th > .cell{
      height: 36px;
      line-height: 36px;
    }
    td> .cell{
      height: 36px;
      line-height: 36px;
    }
  }

  tr {
    background-color: $--color-white;

    input[type="checkbox"] {
      margin: 0;
    }
  }

  th.is-leaf, td {
    border-bottom: $--table-border;
  }

  th.is-sortable {
    cursor: pointer;
  }

  th {
    overflow: hidden;
    user-select: none;
    background-color: $--table-header-background-color;
    font-weight: $--font-weight-400;

    > .cell {
      box-sizing: border-box;
      position: relative;
      vertical-align: middle;
      // padding-left: 16px;
      // padding-right: 16px;
      width: 100%;

      // &.el-tooltip{
      //   width: auto;
      // }

      .isScreen:hover {
        cursor: pointer;
        background-color: $--color-fill-4;
      }
      .isSearch:hover {
        cursor: pointer;
        background-color: $--color-fill-4;
      }
      .isToSearch:hover {
        cursor: pointer;
        background-color: $--color-fill-4;
      }
    }
    .center {
      .custom-icon {
        position: absolute;
        right: 10px;
      }
      text-align: center;
    }
    .left {
      .custom-icon {
        position: absolute;
        right: 10px;
      }
      text-align: left;
    }
    &.required > div::before {
      display: inline-block;
      content: "";
      width: 8px;
      height: 8px;
      // border-radius: 50%;
      border-radius: $--border-radius-circle;
      background: $--danger-6;
      margin-right: 5px;
      vertical-align: middle;
    }
  }

  td {
    div {
      box-sizing: border-box;
    }

    &.gutter {
      width: 0;
    }
  }

  .cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    height: 48px;
    line-height: 48px;
    padding-left: 16px;
    padding-right: 16px;

    .custom-value{
      display: flex;
      align-items: center;
      .el-table-th-title {
        .el-checkbox {
          display: initial;
        }
      }
    }

    &.el-tooltip {
      white-space: nowrap;
      min-width: 50px;
    }
    .el-tag:hover {
      background-color: $--primary-1;
    }
    .radio-select {
      .el-radio__label {
        display: none;
      }
    }
    .el-radio {
      .el-radio__input:hover {
        // border-radius: 50%;
        border-radius: $--border-radius-circle;
        background-color: $--color-fill-4;
        .el-radio__inner {
          border: 1px solid $--color-border-4;
          background-color: $--color-fill-4;
        }
      }
      .is-checked:hover {
        // border-radius: 0;
        border-radius: $--border-radius-none;
        background-color: $--color-fill-3;
        .el-radio__inner {
          background-color: $--primary-6;
        }
      }
      .is-disabled:hover {
        // border-radius: 0;
        border-radius: $--border-radius-none;
        background-color: $--color-fill-3;
        .el-radio__inner {
          // border:none;
          background-color: $--color-fill-3;
        }
      }
    }
  }
  .is-center{
    >.cell{
      justify-content: center;
    }
    .custom-value{
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  // 拥有多级表头
  @include m((group, border)) {
    border: $--table-border;

    @include share-rule(border-pseudo) {
      content: '';
      position: absolute;
      background-color: $--table-border-color;
      z-index: 1;
    }

    // 表格右部伪 border
    &::after {
      @include extend-rule(border-pseudo);
      top: 0;
      right: 0;
      // width: 1px;
      height: 100%;
      width: 0;
    }
  }

  // 表格底部伪 border，总是有的
  &::before {
    @include extend-rule(border-pseudo);
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
  }
  &::after {
    @include extend-rule(border-pseudo);
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
  }

  // table--border
  @include m(border) {
    border-right: none;
    // border-bottom: none;
    // border-left: none;

    &.el-loading-parent--relative {
      border-color: transparent;
    }

    th, td {
      border-right: $--table-border;
      &:last-of-type{
        // border-right: none;
      }
    }

    th.gutter:last-of-type {
      border-bottom: $--table-border;
      border-bottom-width: 1px;
    }

    & th {
      border-bottom: $--table-border;
    }

    // &:not(.el-table--scrollable-y){
    //   .el-table__body {
    //     tr:last-of-type td{
    //       border-bottom: none;
    //     }
    //   }
    // }

    // &.el-table--scrollable-y{
    //   .is-scrolling-none {
    //     .el-table__body {
    //       tr:last-of-type td{
    //         border-bottom: none;
    //       }
    //     }
    //   }
    // }

    // .el-table__header{
    //   thead {
    //     tr:nth-of-type(1) {
    //       th:nth-last-child(1) {
    //         border-right: none;
    //       }
    //     }
    //   }
    // }

    tr:nth-last-child(1) {
      td{
        // border-bottom: none;
      }
    }
  }

  @include m(hidden) {
    visibility: hidden;
  }

  @include e((fixed, fixed-right)) {
    position: absolute;
    top: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    // box-shadow: $--table-fixed-box-shadow;
    // box-shadow: $--shadow1-center;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      // height: 1px;
      background-color: $--border-color-lighter;
      z-index: 4;
    }
  }

  @include e(fixed-right-patch) {
    position: absolute;
    top: -1px;
    right: 0;
    background-color: $--color-white;
    border-bottom: $--table-border;
    z-index: 3;
  }

  @include e(fixed-right) {
    top: 0;
    left: auto;
    right: 0;

    .el-table__fixed-header-wrapper,
    .el-table__fixed-body-wrapper,
    .el-table__fixed-footer-wrapper {
      left: auto;
      right: 0;
    }
  }

  @include e(fixed-header-wrapper) {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
  }

  @include e(fixed-footer-wrapper) {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;

    & tbody td {
      border-top: $--table-border;
      background-color: $--table-row-hover-background-color;
      color: $--table-font-color;
    }
  }

  @include e(fixed-body-wrapper) {
    position: absolute;
    left: 0;
    top: 37px;
    overflow: hidden;
    // 注释掉这里是为了让固定列，在滚动的情况下，左右侧固定列的底部也显示下边框
    // z-index: 3;
  }

  @include e((header-wrapper, body-wrapper, footer-wrapper)) {
    width: 100%;
  }

  @include e(footer-wrapper) {
    margin-top: -1px;
    td {
      border-top: $--table-border;
    }
  }

  @include e((header, body, footer)) {
    table-layout: fixed;
    border-collapse: separate;
  }

  @include e((header-wrapper, footer-wrapper)) {
    overflow: hidden;

    & tbody td {
      background-color: $--table-row-hover-background-color;
      color: $--table-font-color;
    }
  }

  @include e(body-wrapper) {
    overflow: hidden;
    position: relative;
    // border-radius: 0 0 4px 4px;
    border-radius: $--border-radius-none $--border-radius-none $--border-radius-medium $--border-radius-medium;
    @include when(scrolling-x-none) {
      ~ .el-table__fixed,
      ~ .el-table__fixed-right {
        box-shadow: none;
      }
    }

    @include when(scrolling-x-middle) {
      ~ .el-table__fixed,
      ~ .el-table__fixed-right{
        box-shadow: $--shadow1-center;
      }
    }

    @include when(scrolling-x-left) {
      ~ .el-table__fixed {
        box-shadow: none;
      }
      ~ .el-table__fixed-right {
        box-shadow: $--shadow1-center;
      }
    }

    @include when(scrolling-x-right) {
      ~ .el-table__fixed-right {
        box-shadow: none;
      }
      ~ .el-table__fixed {
        box-shadow: $--shadow1-center;
      }
    }

    .el-table--border {
      @include when(scrolling-right) {
        ~ .el-table__fixed-right {
          border-left: $--table-border;
        }
      }

      @include when(scrolling-left) {
        ~ .el-table__fixed {
          border-right: $--table-border;
        }
      }
    }
    > .el-scrollbar{
      > .el-scrollbar__bar {
        z-index: 4;
      }
    }
  }

  .caret-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    height: 28px;
    width: 24px;
    vertical-align: middle;
    cursor: pointer;
    overflow: initial;
    position: relative;
    top: 0px;
  }

  .sort-caret {
    width: 0;
    height: 0;
    border: solid 5px transparent;
    position: absolute;
    left: 7px;

    &.ascending {
      border-bottom-color: $--color-text-3;
      top: 5px;
    }

    &.descending {
      border-top-color: $--color-text-3;
      bottom: 7px;
    }
  }


  .ascending .el-icon-caret-top.ascending {
    color: $--primary-6;
  }
  .descending .el-icon-caret-bottom.descending {
    color: $--primary-6;
  }
  .el-icon-caret-top,.el-icon-caret-bottom {
    color: $--color-text-4;
  }
  .hidden-columns {
    visibility: hidden;
    position: absolute;
    z-index: -1;
  }

  @include m(striped) {
    & .el-table__body {
      & tr.el-table__row--striped {
        td {
          background: #FAFAFA;
        }

        &.current-row td {
          background-color: $--table-current-row-background-color;
        }
      }
    }
  }

  @include e(body) {
    tr.hover-row {
      &, &.el-table__row--striped {
        &, &.current-row {
          > td {
            background-color: $--table-row-hover-background-color;
          }
        }
      }
    }

    tr.current-row > td {
      background-color: $--table-current-row-background-color;
    }
  }

  @include e(column-resize-proxy) {
    position: absolute;
    left: 200px;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: $--table-border;
    z-index: 10;
  }

  @include e(column-filter-trigger) {
    display: flex;
    cursor: pointer;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    text-align: center;
    height: calc(100% + 2px);
    align-items: center;
    justify-content: center;
    color: $--color-text-2;
    &:hover {
      background: $--primary-2;
    }

    & i {
      font-size: $--font-size-title-1;
      cursor: pointer;
      &.filter-highlight{
        color: $--primary-6;
      }
    }

    &.filter-trigger-bgd{
      background: $--primary-2;
    }
  }

  @include m(enable-row-transition) {
    .el-table__body td {
      transition: background-color .25s ease;
    }
  }

  @include m(enable-row-hover) {
    .el-table__body tr:hover > td {
      background-color: $--color-fill-3;
    }
  }

  @include m(fluid-height) {
    .el-table__fixed,
    .el-table__fixed-right {
      bottom: 0;
      overflow: hidden;
    }
  }

  [class*=el-table__row--level] {
    .el-table__expand-icon {
      display: inline-block;
      width: 16px;
      line-height: 16px;
      height: 16px;
      text-align: center;
      margin-right: 4px;

      .icon {
        width: 16px;
        height: 16px;
      }
    }
  }
  .el-table-column--selection {
    .cell {
      // padding: 0 12px;
      display: flex;
      align-items: center;
    }
  }
  .el-table-column--index {
    .cell {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }
  }
  .el-checkbox  {
    .el-checkbox__input:hover:not(.is-disabled) {
      background-color: $--color-fill-4!important;
      .el-checkbox__inner {
        // background-color: #E5E6EB;
        // border: 2px solid #C9CDD4;
        // border-radius: 2px;
        border-radius: $--border-radius-small;
      }
    }
    .is-checked:hover {
      // border-radius: unset;
      // border: none;
      // background: none;

      .el-checkbox__inner {
        border-color: $--primary-6;
        background-color: $--primary-6;
        color: #fff;
        border: $--border-2 solid transparent;
        // border-radius: 2px;
      }
    }
    .is-checked.el-checkbox__input:hover{
      background-color: transparent!important;
    }

    .is-indeterminate.el-checkbox__input:hover{
      background-color: transparent!important;
    }
    .is-disabled:hover {
      background-color: $--color-fill-3;
    }
  }

  .el-button {
    padding: 0;
  }
  .el-table__column-resize-proxy{
    border-left: 4px solid $--primary-6;
  }

  // scrollbar
  // ::-webkit-scrollbar {
  //   width: 6px;
  //   height: 6px;
  //   background: transparent;
  // }
  // ::-webkit-scrollbar-thumb {
  //   background: rgba(29, 33, 41, 0.3) content-box;
  //   border: 2px solid rgba(29, 33, 41, 0.3);
  //   border-radius: var(--border-radius-medium);
  // }
  // ::-webkit-scrollbar-track {
  //   background: transparent;
  // }
  // .el-scrollbar__bar.is-horizontal{
  //   position: absolute;
  //   z-index: 10;
  //   display: none;
  // }

  /*&:hover {
    // scrollbar
    ::-webkit-scrollbar {
      width: 8px;
      height: 6px;
      background: transparent;
    }
    ::-webkit-scrollbar-thumb {
      background: rgba(29, 33, 41, 0.3) content-box;
      border: 2px solid rgba(29, 33, 41, 0.3);
      border-radius: var(--border-radius-medium);
    }
    ::-webkit-scrollbar-track {
      background: transparent;
    }
  }*/
}
.el-table--no-verticalLine{
  th {
    border-right: none!important;
  }
  td {
    border-right: none!important;
  }
}
.el-table--12 {
  th {
    font-size: $--font-size-body-1!important;
  }
  td {
    font-size: $--font-size-body-1!important;
  }
}
.el-table--14 {
  th {
    font-size: $--font-size-body-3!important;
  }
  td {
    font-size: $--font-size-body-3!important;
  }
}
.table-row{
  height: 48px;
  text-align: left;
  background: $--color-fill-3;
  width: 100%;
  line-height: 48px;
  padding-left: 16px;
}

.el-table--border.tree-table{
  td{
    border-top: $--border-1 solid $--color-border-3;
    border-bottom: 0;
  }
  th{
    border-bottom: 0;
  }
}

.el-table th.gutter{
  display: table-cell!important;
}
.el-table--border{
  border-bottom: 0;
}

// .el-loading-spinner .circular{
//   width: 40px!important;
//   height: 40px!important;
// }

// scrollbar--all
// ::-webkit-scrollbar {
//   width: 4px;
//   height: 6px;
//   background: transparent;
// }
// ::-webkit-scrollbar-thumb {
//   background: rgba(29, 33, 41, 0.3) content-box;
//   border: 2px solid rgba(29, 33, 41, 0.3);
//   border-radius: var(--border-radius-medium);
// }
// ::-webkit-scrollbar-track {
//   background: transparent;
// }