@use 'mixins/mixins' as *;
@use 'mixins/config' as *;

@include b(search) {
  --yc-plus-search-field-width: 320px;
  --yc-plus-search-field-max-width: 400px;
  --yc-plus-search-label-width: 98px;
  --yc-plus-search-label-padding-right: 6px;
  --yc-plus-search-button-padding-left: 64px;

  // 防止搜索表单内容被裁剪（覆盖 el-form 的 overflow: hidden）
  overflow: visible !important;
  
  // 使用组合选择器确保覆盖 el-form 样式
  &.#{$el-namespace + -form} {
    overflow: visible !important;
  }

  .#{$plus-namespace + -form__row} {
    row-gap: 18px;
    width: 100%;
  }

  // ========== Flex 布局模式 ==========
  // 传统 flexbox 布局，表单项固定宽度
  .#{$plus-namespace + -form__row--flex} {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    width: 100%;
  }

  .#{$plus-namespace + -form__item-wrapper--flex} {
    flex: 0 0 auto;
    width: auto;
  }

  .#{$plus-namespace + -form__row--flex} .#{$plus-namespace + -search__button__wrapper} {
    flex: 1;
    justify-content: flex-start;
    padding-left: 36px;
  }

  // ========== Grid 布局模式 ==========
  // CSS Grid 自适应布局，使用 auto-fill + minmax 自动计算列数
  // 列最小宽度 320px：1920px 下为 4 列（输入框约 300px），1280px 下为 3 列
  --yc-plus-search-column-min-width: 320px;
  
  .#{$plus-namespace + -form__row--grid} {
    display: grid;
    gap: 16px 24px;
    width: 100%;
    
    // 使用 auto-fill 自动计算列数
    // min(320px, 100%) 确保最小列宽不超过容器宽度，防止溢出
    grid-template-columns: repeat(
      auto-fill, 
      minmax(min(var(--yc-plus-search-column-min-width, 320px), 100%), 1fr)
    );
  }

  .#{$plus-namespace + -form__item-wrapper--grid} {
    width: 100%;
  }

  .#{$plus-namespace + -form__row--grid} .#{$plus-namespace + -search__button__wrapper} {
    // 按钮区域自动扩展到行尾，按钮右对齐
    grid-column: span 1 / -1;
    justify-content: flex-end;
    padding-left: 0;
  }

  // ========== 通用表单项样式 ==========
  .#{$plus-namespace + -form-item-field} {
    // 输入框最小 320px，可伸缩填满父容器
    min-width: var(--yc-plus-search-field-width, 320px);
    width: 100%;
    flex: 1;

    // 确保 Element Plus 日期选择器继承宽度
    .#{$el-namespace + -date-editor} {
      width: 100% !important;
    }

    // 当日期选择器本身就有 plus-form-item-field 类时
    &.#{$el-namespace + -date-editor} {
      width: 100% !important;
    }
  }

  // Grid 布局下的表单项样式
  .#{$plus-namespace + -form__row--grid} {
    .#{$plus-namespace + -form-item} {
      width: 100%; // 填满整个 Grid 列
    }

    .#{$el-namespace + -form-item__label} {
      width: var(--yc-plus-search-label-width, 98px) !important;
      padding-right: var(--yc-plus-search-label-padding-right, 6px);
      flex-shrink: 0;
    }
    
    .#{$el-namespace + -form-item__content} {
      flex: 1; // 拉伸填满剩余空间
    }

    // Grid 布局下移除字段固定最小宽度，让字段完全由 Grid 列宽控制
    .#{$plus-namespace + -form-item-field} {
      min-width: 0; // 移除通用样式中的 min-width: 320px
      width: 100%;
    }
  }

  // Flex 布局下的表单项样式
  .#{$plus-namespace + -form__row--flex} {
    .#{$plus-namespace + -form-item} {
      width: auto;
    }

    .#{$el-namespace + -form-item__label} {
      width: var(--yc-plus-search-label-width, 98px) !important;
      padding-right: var(--yc-plus-search-label-padding-right, 6px);
      flex-shrink: 0;
    }
    
    .#{$el-namespace + -form-item__content} {
      flex: 0 0 auto;
    }

    // Flex 布局下输入框字段固定 320px 宽度
    .#{$plus-namespace + -form-item-field} {
      width: var(--yc-plus-search-field-width, 320px);
      min-width: var(--yc-plus-search-field-width, 320px);
      flex: 0 0 auto;
    }

    // 日期选择器固定 320px 宽度
    .#{$el-namespace + -date-editor} {
      width: var(--yc-plus-search-field-width, 320px) !important;
    }
  }

  &.#{$el-namespace + -form--inline} {
    .#{$el-namespace + -form-item} {
      margin-right: 0;
      margin-bottom: 0;
    }
  }
  &.#{$el-namespace + -form--label-top} {
    .#{$plus-namespace + -search__button__wrapper} {
      .#{$el-namespace + -form-item__label} {
        visibility: hidden;
        opacity: 0;
      }
      .#{$el-namespace + -form-item__content} {
        justify-content: flex-end;
      }
    }
  }

  @include e(unfold) {
    margin-left: 12px;
  }

  @include e(button__wrapper) {
    flex: auto;
    max-width: 100%;
    margin-bottom: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;

    &.#{$el-namespace + -form-item} {
      margin-right: 10px;
    }

    @include elb(form-item__content) {
      flex-wrap: nowrap;
      flex: none;
    }
  }
}