@import '../style/theme/color';
@import '../style/theme/shadow';
@import '../style/theme/corner';
@import '../style/core/_font';

$devui-table-inset-shadow-left: var(--devui-table-inset-shadow-left, 8px 0 8px -4px);
$devui-table-inset-shadow-right: var(--devui-table-inset-shadow-right, -8px 0 8px -4px);

:host {
  display: block;

  &.devui-table-shadow {
    border-radius: $devui-border-radius-card;
    box-shadow: $devui-shadow-length-base $devui-light-shadow;
    background-color: $devui-base-bg;

    ::ng-deep table tbody tr:last-child td {
      border-bottom-color: transparent;
    }
  }
}

.devui-data-table ::ng-deep {
  border: none;
  height: 100%;

  .devui-table-view {
    padding: 0;
    border: none;
    position: relative;
    height: 100%;
    z-index: 1;

    &.contain-fix-height {
      display: flex;
      flex-direction: column;

      .scroll-view {
        flex: 1;
      }
    }

    &.has-width-scroll:not(:hover):not(:has(.table-row-selected))::after {
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      top: 0;
      width: 50px;
      z-index: 100;
      background: linear-gradient(90deg, transparent, $devui-base-bg);
    }

    &.has-height-scroll:not(:hover)::before {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 100;
      height: 20px;
      background: linear-gradient(180deg, transparent, $devui-base-bg);
    }

    .scroll-view {
      overflow-x: auto;
      overflow-y: scroll;

      &.overflow-overlay {
        &.table-wrap {
          overflow: auto;
        }

        &::-webkit-scrollbar-thumb {
          background-color: transparent;
        }

        &:hover {
          &::-webkit-scrollbar-thumb {
            background-color: $devui-line;
          }

          &::-webkit-scrollbar-thumb:hover {
            background-color: $devui-placeholder;
          }
        }
      }
    }

    .devui-table {
      border-collapse: separate;
      border-spacing: 0;
      table-layout: fixed;
      width: 100%;
      max-width: 100%;
      margin: 0;

      & > tbody + tbody {
        border-top: none;
      }
    }

    .viewport-wrapper {
      overflow-x: auto;
      overflow-y: scroll;
      position: relative;

      &.overflow-overlay {
        &.virtual-scroll-wrap {
          overflow: auto;
        }

        &::-webkit-scrollbar-thumb {
          background-color: transparent;
        }

        &:hover {
          &::-webkit-scrollbar-thumb {
            background-color: $devui-line;
          }

          &::-webkit-scrollbar-thumb:hover {
            background-color: $devui-placeholder;
          }
        }
      }

      &.has-width-scroll:not(:hover)::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        top: 0;
        width: 50px;
        background: linear-gradient(90deg, transparent, #ffffff);
      }

      &.has-height-scroll:not(:hover)::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 20px;
        background: linear-gradient(180deg, transparent, #ffffff);
      }
    }

    .resize-bar {
      top: 0;
      bottom: 0;
      position: absolute;
      cursor: col-resize;
      background: $devui-form-control-line-active;
      width: 2px;
      z-index: 9999;
      display: none;
    }

    .resize-overlay {
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      bottom: 0 !important;
      right: 0;
      z-index: 1000;
    }
  }
  $half-sort-icon-size: 8px;

  .table-wrap {
    overflow-y: auto;
  }

  .virtual-scroll-wrap {
    & .cdk-virtual-scroll-content-wrapper {
      padding-top: $half-sort-icon-size;
    }
  }
}

.devui-table ::ng-deep {
  thead {
    tr {
      background-color: $devui-base-bg;

      th {
        text-align: left;
        background-clip: padding-box !important;
        $drag-icon-size: 16px;
        $drag-icon-margin-right: 2px;
        $filter-icon-size: 16px;
        $sort-clickable-area: 8px;
        $half-sort-icon: 8px;
        $childtable-toggler-icon: 20px;
        $negative-half-sort-icon-size: -($sort-clickable-area + $half-sort-icon); // 排序图标的大小为16 * 16 px，所以图标需要移动8px，让图标的一半显示在标题头外

        border-bottom: 1px solid $devui-dividing-line;
        display: table-cell;
        padding: 0;
        font-size: 0;
        background-color: inherit;

        .drag-icon {
          display: inline-block;
          margin-right: $drag-icon-margin-right;
          visibility: hidden;
        }

        .drag-icon + .childtable-toggler {
          > .customized-icon {
            font-size: $devui-font-size-icon;
          }
        }

        > * {
          display: inline-block;
        }

        .title,
        .parent-title {
          display: inline-block;
          max-width: calc(100% - #{$drag-icon-size} - #{$drag-icon-margin-right});
          line-height: 42px;
          vertical-align: middle;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          font-size: $devui-font-size-sm;
          font-weight: bold;
          color: $devui-text;
        }

        .title.can-filter {
          width: calc(100% - #{$drag-icon-size} - #{$drag-icon-margin-right} - #{$filter-icon-size});
        }

        .childtable-toggler + .title {
          width: calc(100% - #{$drag-icon-size} - #{$drag-icon-margin-right} - #{$childtable-toggler-icon});
        }

        .childtable-toggler + .title.can-filter {
          width: calc(100% - #{$drag-icon-size} - #{$drag-icon-margin-right} - #{$filter-icon-size} - #{$childtable-toggler-icon});
        }

        // .sort-clickable {
        //   position: absolute;
        //   top: $negative-half-sort-icon-size;
        //   left: 50%;
        //   transform: translateX(-50%);
        //   padding: $sort-clickable-area;
        // }
        &:hover,
        &.hover {
          border-radius: $devui-border-radius 0 0 $devui-border-radius;

          d-table-sort {
            display: block;
          }

          d-table-filter {
            display: block;
          }

          .filter-icon {
            visibility: visible;
          }

          .sort-icon-default {
            visibility: visible;
          }
        }

        &.operable:hover {
          background-color: $devui-list-item-hover-bg;
        }

        &.sindu_handle:hover,
        &.sindu_handle.hover {
          border-radius: $devui-border-radius 0 0 $devui-border-radius;

          .drag-icon {
            visibility: visible;
          }

          .hidden-icon.drag-icon {
            visibility: hidden;
          }
        }

        &.devui-checkable-cell {
          padding: 10px 0 10px 20px;
        }

        &.devui-detail-cell {
          width: 36px;
          text-align: center;
          padding-right: 0;
          cursor: pointer;
        }

        &.devui-sticky-left-cell,
        &.devui-sticky-right-cell {
          position: sticky;
          z-index: 40;
        }

        & .header-container {
          position: relative;
          display: flex;
          align-items: center;
          padding-left: 2px;
          padding-right: 8px;
        }
      }

      th[colspan]:not([colspan='1']) {
        text-align: center;

        .header-container {
          display: block;
        }
      }

      .sort-active {
        background: $devui-list-item-hover-bg;
        border-radius: $devui-border-radius 0 0 $devui-border-radius;
      }

      .filter-active {
        background: $devui-list-item-hover-bg;
        border-radius: $devui-border-radius 0 0 $devui-border-radius;
      }

      .check-box-all {
        vertical-align: middle;
        margin-right: 5px;
      }
    }
  }

  tbody > tr {
    background: $devui-base-bg;
    user-select: auto;

    &.table-row-selected {
      background: $devui-list-item-selected-bg;
    }

    &:hover td.editable-cell {
      .cell-editable {
        position: relative;
        z-index: 10;
      }

      &::after {
        content: '';
        display: block;
        width: calc(100% - 32px);
        position: absolute;
        height: 32px;
        border: 1px solid $devui-line;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: $devui-border-radius;
        pointer-events: none;
        background-color: $devui-base-bg;
        z-index: 1;
      }
    }

    > td {
      background-clip: padding-box;
      vertical-align: middle;
      padding: 10px 20px 9px;
      border-top: none;
      word-wrap: break-word;
      word-break: normal;
      line-height: 22px;
      font-size: $devui-font-size;
      color: $devui-text; // #3C4458;
      background-color: inherit;
      border-bottom: 1px solid $devui-dividing-line;

      &.editable-cell {
        position: relative;
      }

      &.devui-checkable-cell {
        padding: 10px 0 10px 20px;
      }

      &.devui-detail-cell {
        width: 36px;
        text-align: center;
        padding-right: 0;
        cursor: pointer;
      }

      &.devui-sticky-left-cell,
      &.devui-sticky-right-cell {
        position: sticky;
        z-index: 40;
      }
    }
  }

  .clickable {
    cursor: pointer;
    vertical-align: middle;
  }

  .d-checkbox > label {
    margin: auto;
  }

  .childtable-toggler {
    svg.svg-icon rect {
      stroke: $devui-disabled-text;
    }

    svg.svg-icon.svg-icon-close rect:last-child {
      stroke: none;
      fill: $devui-disabled-text;
    }

    path:not(.devui-tick) {
      fill: $devui-disabled-text;
    }

    svg.svg-icon:hover g path {
      fill: $devui-icon-fill-active;
    }

    svg.svg-icon:hover g rect {
      stroke: $devui-icon-fill-active;
    }

    svg.svg-icon.svg-icon-close:hover rect:last-child {
      stroke: none;
      fill: $devui-icon-fill-active;
    }
  }

  .tree-table-icon {
    &.svg-icon rect {
      stroke: $devui-disabled-text;
    }

    &.svg-icon.svg-icon-close rect:last-child {
      stroke: none;
      fill: $devui-disabled-text;
    }

    path:not(.devui-tick) {
      fill: $devui-disabled-text;
    }

    &.svg-icon:hover g path {
      fill: $devui-icon-fill-active;
    }

    &.svg-icon:hover g rect {
      stroke: $devui-icon-fill-active;
    }

    &.svg-icon.svg-icon-close:hover rect:last-child {
      stroke: none;
      fill: $devui-icon-fill-active;
    }
  }

  .resize-handle {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
  }

  .resizeable:hover {
    .resize-handle {
      border-right: 2px solid $devui-line;

      &::before {
        content: '';
        display: block;
        width: 0;
        height: 0;
        border: 5px solid transparent;
        border-right-color: $devui-line;
        position: absolute;
        left: -8px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
      }

      &::after {
        content: '';
        display: block;
        width: 0;
        height: 0;
        border: 5px solid transparent;
        border-left-color: $devui-line;
        position: absolute;
        left: 6px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
      }
    }
  }

  .resizeable {
    .resize-handle:hover {
      border-right: 2px solid $devui-form-control-line-active;

      &::before {
        display: none;
      }

      &::after {
        display: none;
      }
    }
  }

  thead tr th:last-of-type {
    &.resizeable .resize-handle {
      &::after {
        display: none !important;
      }
    }
  }
}

.devui-no-result-wrapper {
  padding: 40px 0;
  background: $devui-base-bg;
  width: calc(100% - 8px);
  border-radius: 0 0 $devui-border-radius-card $devui-border-radius-card;

  &.overlay-table-no-result {
    width: 100%;
  }
}

.devui-table.area-active ::ng-deep {
  thead > tr > th {
    &.operable {
      background-color: $devui-list-item-hover-bg;

      .filter-icon {
        visibility: visible;
      }

      .sort-icon-default {
        visibility: visible;
      }
    }
  }
}

.devui-table ::ng-deep {
  tbody > tr > td.devui-operation-cell {
    padding: 5px 20px;
  }
}

.devui-table {
  &.devui-table-md ::ng-deep {
    tbody > tr > td {
      padding: 11px 20px 12px;
    }

    thead > tr > th.devui-checkable-cell {
      padding: 10px 20px;
    }
  }

  &.devui-table-lg ::ng-deep {
    tbody > tr > td {
      padding: 15px 20px 16px;
    }

    thead > tr > th.devui-checkable-cell {
      padding: 10px 20px;
    }
  }

  &.devui-table-xs ::ng-deep {
    tbody > tr > td {
      padding: 3px 20px 4px;
    }

    thead > tr > th.devui-checkable-cell {
      padding: 10px 20px;
    }

    thead tr th .title {
      line-height: 32px;
    }
  }

  &.devui-table-mini ::ng-deep {
    tbody > tr > td {
      padding: 0 0 1px 18px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: $devui-font-size-sm;
    }

    thead > tr > th.devui-checkable-cell {
      padding: 0;
      padding-left: 18px;
    }

    thead tr th .title {
      line-height: 24px;
      font-size: $devui-font-size-sm;
    }

    thead tr th .header-container {
      padding-left: 0;
    }
  }

  &.table-borderless {
    &.devui-table-md ::ng-deep {
      tbody > tr > td {
        padding: 12px 20px 12px;
      }
    }

    &.devui-table-lg ::ng-deep {
      tbody > tr > td {
        padding: 16px 20px 16px;
      }
    }

    &.devui-table-xs ::ng-deep {
      tbody > tr > td {
        padding: 4px 20px 4px;
      }
    }

    &.devui-table-mini ::ng-deep {
      tbody > tr > td {
        padding: 0 0 0 18px;
      }
    }
  }
}

.devui-table.table-striped ::ng-deep {
  tbody > tr:nth-of-type(even) {
    background: $devui-list-item-strip-bg;
  }
}

.devui-table.table-borderless ::ng-deep {
  tbody > tr {
    > td {
      border-bottom: none;
    }
  }
}

:host ::ng-deep .devui-table.header-bg {
  thead {
    tr {
      background-color: $devui-list-item-strip-bg;
    }
  }
}

:host ::ng-deep .devui-table-scroll-middle:not(.d-table-on-resize),
:host ::ng-deep .devui-table-scroll-right:not(.d-table-on-resize) {
  .devui-table.header-bg {
    thead {
      tr {
        background-color: $devui-list-item-strip-bg;

        .devui-last-sticky-left-cell {
          background: linear-gradient(to left, transparent, $devui-table-column-shadow-color 10px, $devui-list-item-strip-bg 10px);
          border-right-color: transparent;
        }
      }
    }
  }
}

:host ::ng-deep .devui-table-scroll-middle:not(.d-table-on-resize),
:host ::ng-deep .devui-table-scroll-left:not(.d-table-on-resize) {
  .devui-table.header-bg {
    thead {
      tr {
        background-color: $devui-list-item-strip-bg;

        .devui-first-sticky-right-cell {
          background: linear-gradient(to right, transparent, $devui-table-column-shadow-color 10px, $devui-list-item-strip-bg 10px);
        }
      }
    }
  }
}

.devui-table.table-bordered ::ng-deep {
  tr {
    td:first-child {
      border-left: 1px solid $devui-dividing-line;
    }

    td {
      border-right: 1px solid $devui-dividing-line;
    }
  }

  thead {
    tr {
      th:first-child {
        border-left: 1px solid $devui-dividing-line;
      }

      th {
        border-top: 1px solid $devui-dividing-line;
        border-right: 1px solid $devui-dividing-line;
      }
    }
  }
}

.devui-table.table-hover ::ng-deep {
  tbody > tr:not(.table-row-selected):not(.expand-row):not(.child-table):hover {
    background: $devui-list-item-hover-bg;
  }
}

.devui-table-scroll-middle:not(.d-table-on-resize) .devui-table.table-hover ::ng-deep {
  tbody > tr:not(.table-row-selected):not(.expand-row):not(.child-table):hover {
    .devui-first-sticky-right-cell {
      background: linear-gradient(to right, transparent, $devui-table-column-shadow-color 10px, $devui-list-item-hover-bg 10px);
    }

    .devui-last-sticky-left-cell {
      background: linear-gradient(to left, transparent, $devui-table-column-shadow-color 10px, $devui-list-item-hover-bg 10px);
      border-right-color: transparent !important;
    }
  }
}

.devui-fix-header.shadow-fix-header {
  background-color: $devui-list-item-strip-bg;
  border-radius: $devui-border-radius-card $devui-border-radius-card 0 0;
}

:host ::ng-deep .devui-toggle-childtable {
  cursor: pointer;
  margin-right: 5px;

  & > svg {
    vertical-align: middle;

    & > g > path {
      fill: $devui-placeholder; // TODO: Color-Question
    }
  }
}

:host ::ng-deep .full-width {
  width: 100%;
}

:host ::ng-deep .hover-bg {
  background: $devui-list-item-hover-bg;
  pointer-events: none;

  & + th {
    pointer-events: none;
  }
}

:host ::ng-deep .table-view-selector {
  user-select: none;
  cursor: col-resize;
}

:host ::ng-deep .edit-padding-fix {
  margin-top: -6px;
  margin-bottom: -6px;
}

:host ::ng-deep .childtable-toggler {
  cursor: pointer;
  padding-right: 8px;
  font-size: unset !important;

  & > svg {
    vertical-align: middle;

    & > g > path {
      fill: $devui-placeholder;// TODO: Color-Question
    }
  }
}

:host ::ng-deep .table.table-bordered.table-fix-header {
  border-bottom: 0;

  th {
    border-bottom: 0;
  }
}

:host ::ng-deep table {
  &.table-fix-header thead tr {
    th:first-child {
      border-top-left-radius: $devui-border-radius-card;
    }

    th:last-child {
      border-top-right-radius: $devui-border-radius-card;
    }
  }

  thead tr {
    th:first-child {
      border-top-left-radius: $devui-border-radius-card;
    }

    th:last-child {
      border-top-right-radius: $devui-border-radius-card;
    }
  }

  tbody tr:last-child {
    td:first-child {
      border-bottom-left-radius: $devui-border-radius-card;
    }

    td:last-child {
      border-bottom-right-radius: $devui-border-radius-card;
    }
  }
}

:host ::ng-deep .devui-table-scroll-middle:not(.d-table-on-resize),
:host ::ng-deep .devui-table-scroll-right:not(.d-table-on-resize) {
  tr,
  th {
    .devui-last-sticky-left-cell {
      background: linear-gradient(to left, transparent, $devui-table-column-shadow-color 10px, $devui-base-bg 10px);
      border-right-color: transparent !important;
    }
  }

  tr.table-row-selected {
    .devui-last-sticky-left-cell {
      background: linear-gradient(to left, transparent, $devui-table-column-shadow-color 10px, $devui-list-item-selected-bg 10px);
    }
  }
}

:host ::ng-deep .devui-table-scroll-middle:not(.d-table-on-resize),
:host ::ng-deep .devui-table-scroll-left:not(.d-table-on-resize) {
  tr,
  th {
    .devui-first-sticky-right-cell {
      background: linear-gradient(to right, transparent, $devui-table-column-shadow-color 10px, $devui-base-bg 10px);
    }
  }

  tr.table-row-selected {
    .devui-first-sticky-right-cell {
      background: linear-gradient(to right, transparent, $devui-table-column-shadow-color 10px, $devui-list-item-selected-bg 10px);
    }
  }
}

:host ::ng-deep .gu-unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

:host ::ng-deep .gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;

  /* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; */

  /* filter: alpha(opacity=80); */
  background-color: white;
  box-shadow: $devui-shadow-length-connected-overlay var(--dark-1-boxshadow, rgba(41, 48, 64, 0.2));
  list-style: none;
}

:host ::ng-deep .gu-hide {
  display: none !important;
}

:host ::ng-deep .sindu_dragger {
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
}

:host ::ng-deep .sindu_handle > .header-container > .drag-icon {
  cursor: move;
}

:host ::ng-deep .sindu_dragger li {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: inherit;
}

:host ::ng-deep .sindu_dragger li table,
:host ::ng-deep .sindu_dragger tr,
:host ::ng-deep .sindu_dragger th,
:host ::ng-deep .sindu_dragger td {
  box-sizing: border-box;
}

:host ::ng-deep .sindu_dragging .sindu_origin_table {
  visibility: hidden;
}

:host ::ng-deep .gu-mirror li {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: inherit;
}

:host ::ng-deep .gu-mirror li table,
:host ::ng-deep .gu-mirror tr,
:host ::ng-deep .gu-mirror th,
:host ::ng-deep .gu-mirror td {
  box-sizing: border-box;
}

:host ::ng-deep .gu-transit {
  opacity: 0.5;
}

:host ::ng-deep .devui-table.table-bordered {
  thead tr th.devui-checkable-cell {
    padding: 10px;
  }

  tbody > tr > td.devui-checkable-cell {
    padding: 10px;
  }

  tbody > tr.child-table .devui-table {
    margin-left: -1px;
    width: calc(100% + 2px);
    max-width: calc(100% + 2px);
  }
}
