@import "../../../styles/assets/constant.scss";

// hover
$table-row-hover-color: rgba(17, 18, 34, 0.04);
// 白底hover
$table-row-hover-bg-color: rgba(17, 18, 34, 0.04);
// 选定颜色
$table-row-active-color: rgba(233, 54, 54, 0.05);
// 带背景时背景颜色
$table-background-color: #f9fafc;
// 选中时，表头的北京颜色
$table-head-active-color: #222222;

$expand-row-color: #fff;

td {
  padding: 0;
}
.table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background-color: #ffffff;
  font-size: 12px;

  .react-resizable-handle {
    position: absolute;
    width: 10px;
    height: 100%;
    bottom: 0;
    right: -5px;
    cursor: col-resize;
  }

  &.border {
    border: 1px solid $basic-border-color;

    // .table-head {
    //   th:not([rowspan='1']) {
    //     border-right: 1px solid $basic-border-color;
    //   }
    // }

    .table-head,
    .table-body-row {
      border-bottom: 1px solid $basic-border-color;
    }
    .table-body-child-row,
    .child-open {
      border-bottom: none;
    }
    .child-open ~ .table-body-row:not(.table-body-child-row) {
      border-top: 1px solid $basic-border-color;
    }
    .table-body-expand-row ~ .table-body-row:not(.table-body-child-row) {
      border-top: 1px solid $basic-border-color;
    }
    th {
      position: relative;
      &[rowspan="1"] {
        border-bottom: 1px solid $basic-border-color;
      }
    }
    .table-body-row {
      &:last-child,
      &:last-of-type {
        border-bottom: none;
      }
    }
  }
  &.background {
    background-color: $table-background-color;

    .table-head {
      background-color: $basic-table-head-color;
    }
    &.hover {
      .table-body-row:hover {
        background-color: $table-row-hover-color;
      }
    }
  }
  &.dark {
    border: none;
    .table-body {
      border: 1px solid $basic-border-color;
      border-top: none;
    }
    .table-head {
      background-color: $dark-table-head-color;
      color: #ffffff;
      border-bottom: none;
      .topTriangle {
        border-bottom-color: #fff;
        &.table-active {
          border-bottom-color: #4cc1ff;
        }
      }
      .bottomTriangle {
        border-top-color: #fff;
        &.table-active {
          border-top-color: #4cc1ff;
        }
      }
    }
    .table-header-wrap {
      background-color: $dark-table-head-color;
    }
    .Select-control {
      background-color: $dark-table-head-color;
      border-color: $dark-table-head-color;
    }
    .is-open .Select-control {
      background-color: $table-head-active-color;
      border-color: $table-head-active-color;
      box-shadow: none;
    }
    .table-header-select-item {
      .drop-down-icon {
        border-color: #fff transparent transparent transparent;
      }
    }
    .Select-input {
      font-size: 12px;
    }
    .Select-placeholder {
      font-size: 12px;
    }
  }
  &.striped {
    .table-head {
      background-color: $basic-table-head-color;
    }
  }
  &.hover {
    .table-body-row:hover {
      background-color: $table-row-hover-bg-color;
    }
  }
  &.click {
    .table-body-row {
      cursor: pointer;
    }
  }

  table {
    width: 100%;
    border-collapse: collapse;
    border: none;
  }
}
.table-head {
  width: 100%;
  height: 30px;
  color: rgba($primaryDarkColor, 0.7);
  font-weight: bold;
  background-color: $basic-table-head-color;
  tr {
    height: 30px;
  }
}

.table-header-wrap {
  background-color: $basic-table-head-color;
}

.table-head-item {
  text-align: left;
  &.center {
    text-align: center;
    padding-left: 0 !important;
  }
}
.table-body-row {
  width: 100%;
  height: 50px;
  color: rgba($primaryDarkColor, 0.9);

  .operations-wrap {
    a {
      display: inline-block;
      padding: 0 10px;
      border-right: 1px solid #e0e2e1;

      &:last-child {
        border-right: none;
      }
    }
  }
  > td {
    height: 50px;
    text-align: center;
  }
  &.has-expand {
    cursor: pointer;
  }
  .table-body-has-child-icon {
    cursor: pointer;
    margin-top: 2px;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    vertical-align: top;
  }
  &.active,
  &.show-expand {
    background-color: $table-row-active-color;
    border-left: 1px solid #e93636;
  }
}
.striped:nth-child(2n) {
  background-color: $basic-aid-gray-color;
}
.table-row-item {
  &.limit {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.table-body-expand-row {
  background-color: $expand-row-color;
  border-right: 1px solid $basic-border-color;
}
.table-body-expand-row-wrap {
  position: relative;
  &::before {
    z-index: 1;
    content: "";
    display: block;
    width: 100%;
    height: 8px;
    position: absolute;
    top: -1px;
    left: 0;
    opacity: 0.3;
    background-image: linear-gradient(
      -180deg,
      rgba(34, 44, 67, 0.4),
      rgba(34, 44, 67, 0)
    );
  }
  .table {
    border: none;
  }
}
.table-show-more {
  cursor: pointer;
}
.table-sort-button {
  display: inline-block;
  vertical-align: top;
  margin-left: 5px;
  .topTriangle {
    margin-bottom: 2px;
  }
}
.table-body-wrap {
  overflow-y: scroll;

  &::-webkit-scrollbar {
    background-color: rgba(0, 0, 0, 0);
    width: 8px;
    border-right: 1px solid #e0e2e1;
    border-left: none;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #e0e2e1;
  }
  .table-row-item:last-child {
    border-right: 1px solid #e0e2e1;
  }
}

.table-header-select-item {
  display: flex;
  white-space: nowrap;
  align-items: center;
  padding-left: 10px;

  &.focus {
    background-color: $table-head-active-color;
  }
  .select {
    border: none !important;
    box-shadow: none !important;

    .drop-down-icon {
      stroke: #fff;
    }
    .Select-input {
      line-height: 30px;
    }
  }
  .select-single-value {
    font-weight: normal;
  }
}