@use '../../../styles/variate.scss' as *;

$border-color: rgb(240, 242, 245, 0.9);
$border-radius: 1.67vh;
$fz: 2.33vh;
$family: $font-text;
$title-family: $font-special;
$cell_h: 7vh;
$color: #4b4b68;
// $header_bg: #4de798; //#a0fcf8;
// $row_selected_bg: #a0fcf8; // #ffebbc;

$header_bg: #ccefff; //#a0fcf8;
$row_selected_bg: #ebf9ff; // #ffebbc;
$check_bg: #a2fb6e;

.mj-table {
  height: 100% !important;
  :deep(.vxe-grid) {
    // height: 100% !important;
    background-color: transparent;
    padding: 0;

    .vxe-body--x-space,
    .vxe-body--y-space,
    // 隐藏滚动条
    .vxe-table--scroll-y-virtual,
    .vxe-table--border-line {
      display: none;
    }

    // checkbox
    .col--checkbox {
      $i_wh: 3.33vh;
      $i_border: 0.25vh;
      $i_inner: 2.83vh;

      &.vxe-body--column,
      &.vxe-header--column {
        display: flex;
        justify-content: center;
      }

      .vxe-cell {
        width: $cell_h !important;
      }
      .vxe-cell--wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .custom-checkbox {
        display: flex;
        align-items: center;
        justify-content: center;

        position: relative;
        width: $i_wh;
        height: $i_wh;
        border-radius: 50% !important; /* 圆形样式 */
        background: rgba(0, 0, 0, 0.65);
        border: $i_border solid $check_bg;

        i {
          $before_hx: 0.33vh;
          $before_top: 1.25vh;
          $before_lr: 0.5vh;
          &::before {
            display: none;
          }

          position: absolute;
          transition: width 0.15s ease-in 0.05s;

          &.vxe-icon-square-checked-fill {
            left: 0.92vh;
            top: 0.42vh;
            width: 0.67vh;
            height: 1.25vh;
            border: 0.25vh solid $check_bg;
            border-left: 0;
            border-top: 0;
            box-sizing: content-box;
            transform: rotate(45deg);
          }

          &.vxe-icon-square-minus-fill {
            height: $before_hx;
            left: $before_lr;
            right: $before_lr;
            top: $before_top;
            background-color: $check_bg;
          }
        }
      }
    }

    // 被选中的行
    .row--checked {
      .vxe-body--column {
        background-color: $row_selected_bg;
      }
    }

    &.is--loading {
      &::before {
        content: none;
      }

      .vxe-grid--pager-wrapper {
        :disabled {
          opacity: 0.5;
        }
        // visibility: hidden;
      }
    }

    .vxe-table--render-default {
      color: $color;
    }

    .vxe-grid--layout-header-wrapper {
      background-color: #fff;
      border-radius: $border-radius;
      overflow: hidden;
      padding: 0 8px;

      .vxe-form {
        background-color: transparent !important;
      }
    }

    .vxe-grid--layout-body-content-wrapper {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100% !important;

      .vxe-grid--toolbar-wrapper {
        .vxe-toolbar {
          background-color: transparent !important;
          padding: 1.25vh 0 !important;
        }
      }

      .vxe-grid--table-container {
        flex: 1;
        border-radius: $border-radius;
        overflow: hidden;
        // border-top-left-radius: $border-radius;
        // border-top-right-radius: $border-radius;

        .vxe-table {
          overflow: visible;
          height: 100%;
          .vxe-cell {
            min-height: $cell_h !important;
            height: $cell_h !important;
            line-height: $cell_h;
            font-size: $fz;
            text-align: center;
            font-family: $family;
            color: $color;
            .vxe-cell--wrapper {
              overflow: visible;
            }
          }

          .vxe-table--empty-content {
            font-size: 3vh;
            font-family: $family;
          }

          .vxe-table--header-inner-wrapper {
            height: $cell_h !important;

            .vxe-header--column {
              background-image: none;
              .vxe-cell {
                font-family: $title-family;
              }
            }
          }

          .vxe-header--column,
          .vxe-table--scroll-y-top-corner {
            // color: #323233;
            background-color: $header_bg !important;
          }

          // .vxe-table--scroll-y-top-corner:before,
          // .vxe-table--scroll-y-wrapper:after {
          //   // border-color: $border-color !important;
          //   border: none !important;
          // }

          .vxe-body--column {
            background-image:
              linear-gradient($border-color, $border-color),
              linear-gradient($border-color, $border-color) !important;
          }
        }
      }

      .vxe-grid--pager-wrapper {
        background-color: transparent !important;

        $btn_w: 64px;
        $btn_h: 5.33vh;
        $btn_gap: 8px;
        $radius: 8px;
        $shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
        $btn_bg: rgba(0, 0, 0, 0.65);
        $icon_color: #4de798;

        // 悬浮框
        .vxe-select--panel {
          bottom: 5.83vh !important;
          .vxe-select--panel-wrapper {
            background-color: rgba(0, 0, 0, 0.65);
            .vxe-select-option--wrapper {
              max-height: inherit;
            }

            .vxe-select-option {
              color: #ccd4d4;
              font-size: 2.17vh;
              height: 5vh;
              display: flex;
              align-items: center;
              justify-content: center;

              &.is--selected {
                background-color: $icon_color;
                // background: linear-gradient(249deg, #4de798 26.9%, #a2fb6e 79.86%);
                color: $color;
              }
            }
          }
        }

        .vxe-pager {
          margin-top: 1.25vh;
          background-color: transparent !important;
          height: 6.16vh;

          .vxe-pager--wrapper {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            column-gap: $btn_gap;

            .vxe-pager--sizes,
            .vxe-pager--jump {
              // width: 9em !important;
              margin: 0 20px;
            }

            .vxe-pager--goto-text,
            .vxe-pager--classifier-text,
            .vxe-pager--count,
            .vxe-pager--total {
              font-size: $fz;
              font-family: $family;
              color: rgb(75, 75, 104, 0.65);
            }

            i {
              color: $icon_color !important;
              font-weight: bolder;
            }

            .vxe-select {
              border-radius: $radius;
              box-shadow: $shadow;
              font-family: $family;
              background-color: $btn_bg;
              width: 200px;

              .vxe-input {
                font-family: $family;
                background-color: transparent !important;
                font-size: $fz;
                height: $btn_h;
                // width: 250px;
                input {
                  color: #fff !important;
                  // width: 150px;
                }

                .vxe-input--wrapper,
                .vxe-input--suffix {
                  background-color: transparent !important;
                }
              }
            }

            .vxe-pager--jump .vxe-input {
              margin: 0 10px;
              background-color: #fff !important;
              input {
                color: $color !important;
              }
            }

            .vxe-pager--jump .vxe-input,
            button {
              font-size: $fz;
              width: $btn_w;
              height: $btn_h;
              border-radius: $radius;
              box-shadow: $shadow;
              font-family: $family;
              background-color: $btn_bg;

              &.is--disabled {
                box-shadow: none;
                i {
                  color: #bfbfbf !important;
                }
              }

              &.vxe-pager--num-btn {
                $border_w: 0.33vh;
                color: $color;
                background-color: #fff;
                border: $border_w solid #fff;
                line-height: 4.67vh;
                &.is--active {
                  background-color: $icon_color;
                  box-shadow: none;
                }
              }
            }
          }

          button:not(.is--disabled) {
            // background-color: $primary-color;
            color: #fff;
          }
        }
      }
    }
  }
}
.hideToolbar {
  :deep(.vxe-grid--toolbar-wrapper) {
    display: none;
  }
}
