// @import "../var.scss";

$tdPadding: 10px;

@mixin highlightTD($color) {
  td,
  th {
    // background-color: $color;
    color: $color;
    border-bottom-color: darken($color, 10%);
  }
}
.__table-scroll-container {
  &.table-fixed {
    position: absolute;
    top: 0;
    background-color: #FFF;
    overflow: hidden;
    z-index: 1;
    &.left {
      left: 0;
      // box-shadow: 3px 0 3px rgba(#000, 0.1);
      // display: none;
    }
    &.right {
      right: 0;
      box-shadow: -8px 0 6px -6px #BBB;
      // border-left: 1px solid #CCC;
    }
    .__table-scroll {
      overflow: hidden;
      // overflow-y: auto;
    }
  }
}
.__table-scroll {
  overflow-y: auto;
  overflow-x: hidden;
}
.break-word {
  white-space: inherit;
  word-break: break-word;
}
.table-header {
  table-layout: fixed;
  th {
    position: relative;
    &._order {
      &:hover {
        background: #EEE;
      }
      // background: linear-gradient(180deg, darken(#FFF, 3%), darken(#FFF, 6%));
      // position: relative;
      // color: $themeColor;
      // .caret {
      //   position: absolute;
      //   top: 45%;
      //   right: 10px;
      // }
    }
    .sort-caret-group, .selector-group {
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      color: #CCC;
      .caret {
        border-width: 5px;
      }
      .up {
        margin-bottom: 3px;
      }
    }
    .icon {
      margin: 0 5px;
    }
    &._asc {
      .up {
        color: $themeColor;
      }
    }
    &._desc {
      .down {
        color: $themeColor;
      }
    }
    .icon {
      font-size: 14px;
      color: #999;
    }
    .selector-group {
      .active {
        color: $themeColor;
      }
    }
  }
}
.__table {
  position: relative;
  .checked-actions {
    opacity: 0;
    position: absolute;
    pointer-events: none;
    bottom: 100%;
    left: 0;
    background-color: #FFF;
    padding: 5px 10px;
    box-shadow: 0 -3px 6px rgba(39,44,49,.1);
    transition: all ease 0.3s;
    transform: translateY(10px);
    display: flex;
    align-items: center;
    z-index: 1;
    &.show {
      pointer-events: all;
      opacity: 1;
      transform: translateY(0);
    }
  }
}
// @include scrollBar(5px, 5px, '.table-render');
// @include scrollBar(5px, 5px, '.__table-scroll');
.table-render {
  overflow-x: auto;
  .table-fixed {
    // display: block;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .table-header {
    transform: translateY(-50px);
    transition: transform 0.3s ease;
  }
  &.ready {
    .table-fixed {
      // display: block;
      opacity: 1;
    }
    .table-header {
      transform: translateY(0);
    }
  }
  &.scroll-to-left {
    .table-fixed.left {
      box-shadow: 8px 0 6px -6px #BBB;
      // display: block;
      // border-right: 2px solid #DDD;
    }
  }
  &.auto-width {
    .table-fixed {
      display: none;
    }
  }
  &.auto-width,&.scroll-at-right {
    .table-fixed.right {
      // box-shadow: 1px 0 1px rgba(#000, 0.1);
      box-shadow: none;
      // display: none;
      // border-left: none;
    }
  }
}
.table-container {
  @include card();
  // padding-bottom: 10px;
}
.hide-table {
  // opacity: 0;
  height: 0;
  overflow: hidden;
}
.no-record-tip {
  padding: 20px 0;
  color: #CCC;
  display: flex;
  align-items: center;
  justify-content: center;
  .icon {
    font-size: 26px;
    margin-right: 10px;
  }
  .text {
    font-size: 16px;
  }
}
.table {
  border-spacing: 0;
  .right {
    text-align: right;
  }
  th, td {
    user-select: auto;
  }
  .statistics {
    td {
      min-width: auto !important;
    }
  }
  thead {
    // background-color: $tableHeaderBgColor;
    tr th {
      font-weight: normal;
      color: $tableHeaderTextColor;
      padding: 8px $tdPadding + 5 8px $tdPadding;
      vertical-align: middle;
      // border-bottom: 2px solid #ddd;
      // text-align: center;
      background: linear-gradient(180deg, #fefefe, #f6f6f6);
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      // border-right: 1px solid #DDD;
      // border-top: 1px solid #EEE;
      border-bottom: 1px solid #ddd;
    }
  }

  tr {
    &.theme {
      @include highlightTD($red);
    }
    &.blue {
      @include highlightTD($blue);
    }
    &.red {
      @include highlightTD($red);
    }
    &.orange {
      @include highlightTD($orange);
    }
  }

  tbody {
    // background-color: $tableBodyBgColor;
    tr {
      &.hovering {
        background-color: rgba($themeColor, 0.08) !important;
      }
      &.highlight {
        background-color: rgba($themeColor, 0.2) !important;
        td {
          border-color: rgba($themeColor, 0.25) !important;
        }
      }
      td {
        border-bottom: 1px solid #f0f0f0;
        border-top: 0;
        // border-right: 1px solid #EEE;
        padding: 8px $tdPadding;
        // text-align: center;
        // word-break: break-all;
        // white-space: inherit;
        /** 为了让表格形成一行 */
        word-break: keep-all;
        white-space: nowrap;
        // vertical-align: middle;
        color: $tableBodyTextColor;
        min-width: 100px;
        max-width: 400px !important;
        // border-right: 1px solid #e9e9e9;
        &.check-td  {
          min-width: 30px !important;
          width: 30px !important;
        }
        &.break-word {
          word-break: break-word;
          white-space: inherit;
          min-width: 400px;
        }
      }
      &:nth-of-type(even) {
        background-color: #f9f9f9;
      }
    }
  }
  // tfoot {
  //   tr td {
  //     text-align: center;
  //   }
  // }

  // &.fixed {
  //   table-layout: fixed;
  // }
}