$--selectPerson-base-font-size: 12px !default;
$--selectPerson-title-font-size: 14px !default;
$--selectPerson-base-font-weight: bold !default;
$--selectPerson-split-line-color: #dcdfe6 !default;
$--selectPerson-notice-font-color: #b2b2b2 !default;
$--selectPerson-primary-font-color: #027aff !default;
$--selectPerson-box-hover-bgColor: #f5f7fa !default;
$--selectPerson-box-active-bgColor: #e6f2ff !default;
$--selectPerson-box-border-radius: 2px !default;
$--selectPerson-box-border-color: #ebeef5 !default;
$--selectPerson-expend-icon-color: #dcdfe6 !default;
$--selectPerson-sign-primary-bgColor: #027aff !default;
$--selectPerson-sign-orange-bgColor: #f5a623 !default;
$--selectPerson-input-border-color: #e4e7ed !default;
$--selectPerson-input-hover-border-color: #c0c4cc !default;
$--selectPerson-base-height: 32px !default;


@mixin circleShape($width) {
  width: $width;
  height: $width;
  min-width: $width;
  min-height: $width;
  border-radius: 50%;
}

.x-person-modal {
  .header {
    display: flex;
    align-items: center;
    .header-title {
      flex: 0 0 72px;
      width: 72px;
      margin-right: 12px;
      font-size: $--selectPerson-title-font-size;
      font-weight: $--selectPerson-base-font-weight;
      border-right: 1px solid $--selectPerson-split-line-color;
    }
  }
  .main {
    margin: -12px 0;
    .el-tabs__nav-scroll {
      display: flex;
      justify-content: center;
      .el-tabs__item {
        min-width: 80px;
        text-align: center;
        box-sizing: content-box;
      }
    }
    .el-tabs__nav-wrap::after {
      height: 1px;
      background-color: $--selectPerson-box-border-color;
    }
    // .x-loading {
    //   height: 100%;
    //   >img {
    //     object-fit: cover;
    //     width: 440px;
    //     height: 90%;
    //   }
    // }
  }
  .person-tabs {
    height: calc(100vh - 524px);
    max-height: 458px;
    min-height: 288px;
    .el-tabs__content {
      height: calc(100vh - 524px - 56px);
      max-height: 402px;
      min-height: 232px;
      .el-tab-pane {
        height: 100%;
        .user-tab-pane {
          height: 100%;
        }
      }
    }
  }
  .selected-block {
    display: flex;
    height: 120px;
    padding: 16px 0;
    margin: 0 -6px;
    overflow-y: auto;
    border-top: 1px solid $--selectPerson-box-border-color;
    box-sizing: border-box;
    flex-wrap: wrap;
    .x-person-tag {
      margin: 0 6px 12px;
    }
  }
  .footer {
    display: flex;
    .footer-notice {
      display: flex;
      align-items: center;
      justify-items: flex-start;
      flex: 1;
      .footer-notice-text {
        font-size: $--selectPerson-base-font-size;
        color: $--selectPerson-notice-font-color;
      }
    }
  }

  .search-panel {
    height: auto;
    height: calc(100vh - 524px);
    max-height: 458px;
    min-height: 288px;
    .person-panel {
      height: calc(100vh - 524px);
      max-height: 458px;
      min-height: 288px;
    }
  }

  .modal-search-input {
    .el-input__inner {
      padding-left: 30px !important;
      border: 0;
    }
    .el-input__prefix {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .x-svg-icon .svg-icon {
      width: 18px !important;
      height: 18px !important;
    }
  }

  .role-list {
    height: calc(100vh - 580px);
    max-height: 402px;
    min-height: 232px;
    overflow-y: auto;
  }
  .person-sklenton {
    display: flex;
    width: 100%;
    flex-direction: column;
    .person-option-sklenton {
      .person-option-icon {
        .x-product-skeleton {
          width: 18px;
          height: 18px;
        }
      }
      .person-info {
        .person-name {
          width: 36px;
          height: 18px;
        }
        .person-number {
          width: 20px;
          height: 18px;
        }
        .person-org-name {
          width: 54px;
          height: 18px;
        }
      }
    }
  }

  .person-panel {
    height: calc(100vh - 580px);
    max-height: 402px;
    min-height: 232px;
    overflow-y: auto;
    .loading-text, .no-more {
      padding: 12px 0;
      font-size: $--selectPerson-base-font-size;
      color: $--selectPerson-notice-font-color;
      text-align: center;
    }
  }

  .person-option {
    display: flex;
    height: 44px;
    cursor: pointer;
    border-radius: $--selectPerson-box-border-radius;
    align-items: center;
    &:hover {
      background-color: $--selectPerson-box-hover-bgColor;
    }
    .person-option-avatar {
      @include circleShape(36px);
    }
    .person-option-icon {
      margin: 0 10px;
      .radio, .checkbox {
        color: $--selectPerson-notice-font-color;
      }
      .radio-active, .checkbox-active {
        color: $--selectPerson-primary-font-color;
      }
    }
    .person-info {
      display: flex;
      height: 100%;
      margin-left: 12px;
      flex: 1;
      align-items: center;
      span {
        font-size: $--selectPerson-base-font-size;
        text-align: left;
      }
      .person-name {
        flex: 0 0 60px;
      }
      .person-number {
        margin: 0 12px;
        color: $--selectPerson-notice-font-color;
        flex: 0 0 40px;
      }
      .person-org-name {
        flex: 1;
      }
    }
  }

  .role-option {
    display: flex;
    padding: 10px 12px;
    cursor: pointer;
    align-items: center;
    > div {
      display: flex;
      height: 24px;
      font-size: $--selectPerson-base-font-size;
      line-height: 24px;
      align-items: center;
    }
    &:hover, &.active {
      .role-name {
        color: $--selectPerson-primary-font-color;
      }
    }
    &:hover {
      background-color: $--selectPerson-box-hover-bgColor;
    }
    &.active {
      background-color: $--selectPerson-box-active-bgColor;
    }
    .role-sign {
      color: #fff;
      text-align: center;
      border-radius: $--selectPerson-box-border-radius;
      justify-content: center;
      flex: 0 0 42px;
      &.role-sign-tenant {
        background-color: $--selectPerson-sign-primary-bgColor;
      }
      &.role-sign-app {
        background-color: $--selectPerson-sign-orange-bgColor;
      }
    }
    .role-name {
      margin-left: 12px;
      flex: 1;
    }
  }

  .role-tab-pane {
    display: flex;
    .role-split-line {
      flex: 0 0 1px;
      background-color: $--selectPerson-box-border-color;
    }
    .role-list-wrap, .role-person-wrap {
      flex: 1;
      height: 100%;
      min-width: 50%;
    }
  }

  .department-tab-pane {
    display: flex;
    .department-split-line {
      flex: 0 0 1px;
      background-color: $--selectPerson-box-border-color;
    }
    .department-tree, .department-person {
      flex: 1;
      min-width: 50%;
    }
  }

  .department-tree {
    height: calc(100vh - 524px);
    max-height: 458px;
    min-height: 288px;
    overflow: auto;
    .el-tree-node__expand-icon {
      padding: 0 6px;
      font-size: $--selectPerson-title-font-size;
      color: $--selectPerson-expend-icon-color;
      &.is-leaf {
        color: transparent !important;
      }
    }
    .el-tree-node__loading-icon {
      display: none;
    }
    .el-tree__empty-block {
      min-height: inherit;
      padding: 12px 0;
      font-size: 0;
      .el-tree__empty-text {
        position: static;
        font-size: $--selectPerson-base-font-size;
        color: $--selectPerson-notice-font-color;
      }
    }
  }
}
.remove-tab-header {
  .el-tabs__header {
    display: none;
  }
  .el-tabs__content, .person-panel {
    height: calc(100vh - 524px) !important;
    max-height: 458px !important;
    min-height: 288px !important;
  }
}