/*
 * @Author: 焦质晔
 * @Date: 2023-02-18 19:51:19
 * @Last Modified by: 焦质晔
 * @Last Modified time: 2024-11-05 19:38:56
 */
@use '../../style/src/themes' as *;
@use '../../style/src/mixins/reset' as *;
@use './fields-filter';

$prefix: '#{$qm-prefix}-form';

.#{$prefix} {
  @include reset-component();
  .el-form-item {
    margin-bottom: 12px;
    &__label {
      align-items: center;
      padding-right: 8px;
      overflow: hidden;
      white-space: nowrap;
      .tip {
        flex-shrink: 0;
        margin-left: 2px;
        color: $text-color-placeholder;
        outline: none;
        cursor: help;
      }
      & > span {
        max-width: 100%;
        line-height: 1.143;
      }
    }
    .form-item-row {
      flex-wrap: nowrap;
      width: 100%;
      & > .el-col {
        line-height: 1;
      }
    }
    input.el-input__inner {
      line-height: 1;
    }
    // placeholder
    input::placeholder {
      text-align: left;
    }
    .el-input-number {
      .el-input__wrapper {
        padding-left: 11px;
      }
      &.left {
        .el-input__inner {
          text-align: left;
        }
      }
      &.right {
        .el-input__inner {
          text-align: right;
        }
      }
    }
    .el-date-editor {
      width: 100%;
      box-sizing: border-box;
      .el-range-input {
        text-align: left;
        &:nth-of-type(1) {
          padding-left: 5px;
        }
      }
    }
    .range-date-split {
      .el-input__prefix-inner > :last-child {
        margin-right: 5px;
      }
    }
    // search-helper
    .search-helper {
      .el-input__wrapper {
        position: relative;
        .el-input__suffix {
          position: absolute;
          right: 2px;
          top: 2px;
          bottom: 2px;
          height: auto;
          background-color: #fff;
          .el-input__clear {
            padding: 2px;
            margin: 0;
            box-sizing: content-box;
          }
        }
      }
      .el-input-group__append {
        padding: 0 16px;
        .el-button {
          padding-left: 8px;
          padding-right: 8px;
        }
      }
    }
    .region-select,
    .city-select,
    .multiple-select {
      display: flex;
      width: 100%;
      .select-option {
        display: none !important;
      }
    }
    .multiple-select {
      position: relative;
      .el-select__suffix .el-icon {
        transition: none;
        transform: none;
      }
      .search-btn {
        padding: 4px 8px;
        line-height: 0;
      }
    }
    .extra {
      width: 0;
      &-text {
        height: 100%;
        display: flex;
        align-items: center;
      }
      &-overflow-cut {
        @include text-overflow-cut();
      }
    }
    .el-form-item__error {
      padding-top: 0;
    }
  }
  .collapse-trigger {
    color: $primary-color;
    cursor: pointer;
    & > svg {
      vertical-align: -0.125em;
    }
  }
  &__label-wrap {
    .el-form-item__label {
      white-space: normal;
      & > .text {
        @include text-ellipsis-2();
      }
    }
  }
}

.#{$prefix}-immediate__popper {
  box-sizing: border-box;
  .el-autocomplete-suggestion {
    .el-autocomplete-suggestion__wrap {
      padding: 0;
      & > ul {
        width: 100%;
        display: table;
        & > li {
          display: table-row;
          th,
          td {
            line-height: 28px;
            border-bottom: 1px solid $border-color-secondary;
            span {
              padding: 0 $padding-base;
            }
          }
          th {
            background-color: $background-color-light;
          }
        }
      }
    }
  }
}

.#{$prefix}-city-select__popper {
  box-sizing: border-box;
  max-width: 420px;
  .container {
    .city-drop {
      &-toper {
        margin-bottom: 10px;
        display: flex;
        &__type {
          .el-radio-group {
            display: flex;
            flex-wrap: nowrap;
          }
        }
        &__search {
          margin-left: 10px;
        }
      }
      &-letter {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 4px;
        .tag {
          list-style: none;
          line-height: 1.75;
          font-size: $font-size-sm;
          padding: 0 8px;
          margin: 0 4px 4px 0;
          border: 1px solid $border-color-secondary;
          border-radius: 2px;
          cursor: pointer;
          &.actived {
            color: $white;
            background-color: $primary-color;
            border-color: $primary-color;
          }
        }
      }
      &-list {
        margin-right: -2px;
        max-height: 350px;
        overflow-y: auto;
        & > dl {
          & > dt {
            float: left;
            font-size: 13px;
            font-weight: 700;
            line-height: 20px;
          }
          & > dd {
            white-space: normal;
            margin-inline-start: 50px;
            margin-bottom: 8px;
            line-height: 20px;
            li {
              display: inline-block;
              margin-right: 8px;
              font-size: 13px;
              cursor: pointer;
              &:hover {
                color: $primary-color;
              }
              &.actived {
                color: $primary-color;
              }
            }
          }
        }
      }
    }
  }
}

.#{$prefix}-region-select__popper {
  box-sizing: border-box;
  max-width: 580px;
  .container {
    margin-top: -5px;
    .region-box {
      display: flex;
      flex-wrap: wrap;
      width: 440px;
      line-height: $line-height-base;
      &__item {
        margin: 0 5px;
        width: 100px;
        cursor: pointer;
        @include text-overflow-cut();
        &:hover {
          color: $primary-color;
        }
        &.actived {
          color: $primary-color;
        }
      }
    }
  }
}