@import '../../../../../style/variables.less';
@import '../component/AddonWrapper/index.less';

.pro-group {
  display: flex;
  width: unset !important;

  &.pro-group-view {
    .pro-group-form-item {
      flex: 0 0 auto !important;
    }
    .@{ant-prefix}-space-compact .pro-group-separator-compact {
      color: #333 !important;
    }
  }

  &.pro-group-view {
    .@{ant-prefix}-space {
      gap: 0 !important;
      .@{ant-prefix}-space-item {
        width: auto;
      }
    }
  }

  &.pro-group-diy-width,
  &.pro-group-width-auto {
    .@{ant-prefix}-space .@{ant-prefix}-space-item {
      width: auto;

      .@{ant-prefix}-space-item {
        width: auto;
      }
    }
  }

  .@{ant-prefix}-space {
    width: 100%;

    .@{ant-prefix}-space-item {
      width: 100%;
    }

    .@{ant-prefix}-form-item {
      margin-bottom: 0 !important;
    }
  }

  .@{ant-prefix}-form-item-label {
    display: none;
  }

  .@{ant-prefix}-space-compact {
    flex: auto;
    align-items: flex-start; // 改为顶部对齐，避免错误信息影响对齐
    width: 100%;

    .@{ant-prefix}-form-item {
      margin-bottom: 0 !important;
    }

    .group-separator {
      height: 32px; // 明确设置高度与输入框一致
      padding: 0 12px;
      color: #999;
      font-size: 14px;
      line-height: 30px; // 调整行高匹配32px输入框高度
      background-color: #fff;
      border: 1px solid #d9d9d9; // 使用标准的1px边框
      outline: none;

      // 移除默认button样式
      box-shadow: none;
      cursor: default;
      margin-inline-start: -2px;
      border-radius: 0;
    }

    .pro-modal-select {
      margin-left: -1px;
    }

    // 定制内敛合并样式
    .@{ant-prefix}-input-affix-wrapper,
    .@{ant-prefix}-select {
      &:nth-child(n + 2) {
        margin-inline-start: -1px;
      }
    }

    // 报错样式定制
    .@{ant-prefix}-input-affix-wrapper-status-error ~ .group-separator {
      color: #ff4d4f;
      border-color: #ff4d4f;
    }
  }

  // 针对灵活模式的样式优化
  &.pro-group-flexible {
    // Space.Compact的样式优化
    .@{ant-prefix}-space-compact {
      display: flex;
      align-items: flex-start;
      width: 100%;

      // Form.Item在compact模式下的样式
      .@{ant-prefix}-form-item {
        flex: 1;
        margin-right: 0;
        margin-bottom: 0;
        position: relative;

        &:hover,
        &:focus-within {
          z-index: 2;
        }

        // 第一个元素后面的所有元素都左移1px以实现紧密连接
        &:not(:first-child) {
          margin-left: -1px;
        }

        // 确保输入框完全贴合
        .@{ant-prefix}-input,
        .@{ant-prefix}-select .@{ant-prefix}-select-content,
        .@{ant-prefix}-input-number,
        .@{ant-prefix}-input-number-input {
          // 重置z-index确保正确的层级关系
          position: relative;
          // 重置圆角
          border-radius: 0;
        }

        // 第一个表单项：左边保持圆角
        &:first-child {
          .@{ant-prefix}-input,
          .@{ant-prefix}-select .@{ant-prefix}-select-content,
          .@{ant-prefix}-input-number,
          .@{ant-prefix}-input-number-input {
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;
          }
        }

        // 最后一个表单项：右边保持圆角
        &:last-child {
          .@{ant-prefix}-input,
          .@{ant-prefix}-select .@{ant-prefix}-select-content,
          .@{ant-prefix}-input-number,
          .@{ant-prefix}-input-number-input {
            border-top-right-radius: 6px;
            border-bottom-right-radius: 6px;
          }
        }

        // 中间元素和最后元素：去掉左边框避免重复
        &:not(:first-child) {
          .@{ant-prefix}-input-number-input {
            border-left: 0;
          }

          // 聚焦时恢复左边框
          .@{ant-prefix}-input:focus,
          .@{ant-prefix}-select:focus .@{ant-prefix}-select-content,
          .@{ant-prefix}-input-number:focus,
          .@{ant-prefix}-input-number:focus .@{ant-prefix}-input-number-input {
            margin-left: -1px;
            border-left-width: 1px;
          }
        }

        // 错误状态：确保边框变红（优先级要高于上面的 border-left-width: 0）
        &.@{ant-prefix}-form-item-has-error {
          .@{ant-prefix}-input,
          .@{ant-prefix}-select .@{ant-prefix}-select-content,
          .@{ant-prefix}-input-number,
          .@{ant-prefix}-input-number-input {
            border-color: #ff4d4f !important;
          }

          // 错误状态下，中间元素也需要恢复左边框并设置为红色
          &:not(:first-child) {
            .@{ant-prefix}-input,
            .@{ant-prefix}-select .@{ant-prefix}-select-content,
            .@{ant-prefix}-input-number {
              border-left-color: #ff4d4f !important;
              border-left-width: 1px !important;
            }

            .@{ant-prefix}-input-number-input {
              border-left: 0 !important;
            }
          }

          // 聚焦时保持红色边框
          .@{ant-prefix}-input:focus,
          .@{ant-prefix}-select:focus .@{ant-prefix}-select-content,
          .@{ant-prefix}-input-number:focus,
          .@{ant-prefix}-input-number:focus .@{ant-prefix}-input-number-input {
            border-color: #ff4d4f !important;
          }

          // Select 组件的错误状态处理
          .@{ant-prefix}-select.@{ant-prefix}-select-status-error .@{ant-prefix}-select-content {
            border-color: #ff4d4f !important;
          }
        }
      }

      // 分隔符样式 - 确保与输入框完美对齐
      .pro-group-separator {
        position: relative;
        display: inline-flex;
        flex: none;
        align-items: center;
        height: 32px;
        margin-right: -1px;
        margin-left: -1px;
        padding: 0 8px;
        color: #666;
        font-size: 14px;
        line-height: 32px;
        background-color: #fafafa;
        border-top: 1px solid #d9d9d9;
        border-right: 0;
        border-bottom: 1px solid #d9d9d9;
        border-left: 0;
        user-select: none;
      }

      .@{ant-prefix}-form-item-has-error + .pro-group-separator-compact {
        border-color: red;
      }

      // compact模式分隔符样式
      .pro-group-separator-compact {
        display: inline-flex;
        flex: none;
        align-items: center;
        justify-items: center;
        height: 32px;
        padding: 0 12px;
        color: #666;
        line-height: 32px;
        border: 1px solid #d9d9d9;
        user-select: none;
        margin-inline-start: -2px;
      }
    }

    // Space模式分隔符样式
    .pro-group-separator-space {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      padding: 0 8px;
      color: #999;
      font-size: 14px;
      user-select: none;
    }

    // 错误提示样式
    .pro-group-error-tip {
      padding: 8px;
      color: #ff4d4f;
      border: 1px dashed #ff4d4f;
    }

    // compact模式容器
    .pro-group-compact-container {
      width: 100%;
    }

    // Form.Item无边距样式
    .pro-group-form-item {
      flex: 1;
      margin-left: 0 !important;
      &.@{ant-prefix}-form-item-has-error {
        margin-left: -1px !important;
      }
    }

    // 当有自定义宽度时，只有设置了宽度的 Form.Item 不使用 flex:1
    // 没有设置宽度的 Form.Item 保持 flex: 1，自动占据剩余空间
    &.pro-group-diy-width {
      // 覆盖 Space.Compact 内设置了宽度的 Form.Item
      .@{ant-prefix}-space-compact {
        .@{ant-prefix}-form-item.pro-group-form-item-has-width {
          flex: none;
        }
      }

      // 覆盖 compact 容器内设置了宽度的 Form.Item
      .pro-group-compact-container {
        .@{ant-prefix}-form-item.pro-group-form-item-has-width {
          flex: none;
        }
      }

      // 覆盖直接使用 pro-group-form-item 类且设置了宽度的 Form.Item
      .pro-group-form-item.pro-group-form-item-has-width {
        flex: none;
      }
    }
  }

  // 传统模式也需要相同的样式规则（不在 pro-group-flexible 下）
  &:not(.pro-group-flexible) {
    // compact模式容器
    .pro-group-compact-container {
      display: flex;
      align-items: flex-start;
      width: 100%;

      // Form.Item在compact模式下的样式
      .@{ant-prefix}-form-item {
        flex: 1;
        margin-right: 0;
        margin-bottom: 0;
        position: relative;

        &:hover,
        &:focus-within {
          z-index: 2;
        }

        // 第一个元素后面的所有元素都左移1px以实现紧密连接
        &:not(:first-child) {
          margin-left: -1px;
        }

        // 确保输入框完全贴合
        .@{ant-prefix}-input-affix-wrapper,
        .@{ant-prefix}-input,
        .@{ant-prefix}-select .@{ant-prefix}-select-content,
        .@{ant-prefix}-input-number,
        .@{ant-prefix}-input-number-input,
        .@{ant-prefix}-picker {
          // 重置z-index确保正确的层级关系
          position: relative;
          // 重置圆角（!important 确保覆盖 antd v6 CSS-in-JS 懒注入的 disabled 等状态样式）
          border-radius: 0 !important;
        }

        // 第一个表单项：左边保持圆角
        &:first-child {
          .@{ant-prefix}-input-affix-wrapper,
          .@{ant-prefix}-input,
          .@{ant-prefix}-select .@{ant-prefix}-select-content,
          .@{ant-prefix}-input-number,
          .@{ant-prefix}-input-number-input,
          .@{ant-prefix}-picker {
            border-top-left-radius: 6px !important;
            border-bottom-left-radius: 6px !important;
          }
        }

        // 最后一个表单项：右边保持圆角
        &:last-child {
          .@{ant-prefix}-input-affix-wrapper,
          .@{ant-prefix}-input,
          .@{ant-prefix}-select .@{ant-prefix}-select-content,
          .@{ant-prefix}-input-number,
          .@{ant-prefix}-input-number-input,
          .@{ant-prefix}-picker {
            border-top-right-radius: 6px !important;
            border-bottom-right-radius: 6px !important;
          }
        }

        // 中间元素和最后元素：去掉左边框避免重复
        &:not(:first-child) {
          // 聚焦时恢复左边框
          .@{ant-prefix}-input:focus,
          .@{ant-prefix}-select:focus .@{ant-prefix}-select-content,
          .@{ant-prefix}-input-number:focus,
          .@{ant-prefix}-input-number:focus .@{ant-prefix}-input-number-input {
            margin-left: -1px;
            border-left-width: 1px;
          }
        }
      }

      // compact模式分隔符样式
      .pro-group-separator-compact {
        display: inline-flex;
        flex: none;
        align-items: center;
        justify-items: center;
        height: 32px;
        padding: 0 12px;
        color: #666;
        line-height: 32px;
        border: 1px solid #d9d9d9;
        user-select: none;
        margin-inline-start: -1px;
      }

      // 错误状态的分隔符
      .@{ant-prefix}-form-item-has-error + .pro-group-separator-compact {
        border-color: #ff4d4f;
      }
    }

    // Form.Item无边距样式（传统模式）
    .pro-group-form-item {
      flex: 1;
      // margin: 0 !important;
    }

    // 查看模式下，Form.Item不平分空间，而是根据内容自适应
    &.pro-group-view {
      .pro-group-form-item {
        flex: 0 0 auto;
      }
    }

    // 当有自定义宽度时，只有设置了宽度的 Form.Item 不使用 flex:1
    &.pro-group-diy-width {
      // 覆盖 Space.Compact 内设置了宽度的 Form.Item
      .@{ant-prefix}-space-compact {
        .@{ant-prefix}-form-item.pro-group-form-item-has-width {
          flex: none;
        }
      }

      // 覆盖 compact 容器内设置了宽度的 Form.Item
      .pro-group-compact-container {
        .@{ant-prefix}-form-item.pro-group-form-item-has-width {
          flex: none;
        }
      }

      // 覆盖直接使用 pro-group-form-item 类且设置了宽度的 Form.Item
      .pro-group-form-item.pro-group-form-item-has-width {
        flex: none;
      }
    }
  }
}

.@{ant-prefix}-form-item-has-error {
  &:not(.pro-group-flexible) {
    // 错误状态：确保边框变红（优先级要高于上面的 border-left-width: 0）
    .@{ant-prefix}-input,
    .@{ant-prefix}-select .@{ant-prefix}-select-content,
    .@{ant-prefix}-input-number,
    .@{ant-prefix}-input-number-input {
      border-color: #ff4d4f !important;
    }

    // 错误状态下，中间元素也需要恢复左边框并设置为红色
    &:not(:first-child) {
      .@{ant-prefix}-input,
      .@{ant-prefix}-select .@{ant-prefix}-select-content,
      .@{ant-prefix}-input-number {
        border-left-color: #ff4d4f !important;
        border-left-width: 1px !important;
      }

      .@{ant-prefix}-input-number-input {
        border-left: 0 !important;
      }
    }

    // 聚焦时保持红色边框
    .@{ant-prefix}-input:focus,
    .@{ant-prefix}-select:focus .@{ant-prefix}-select-content,
    .@{ant-prefix}-input-number:focus,
    .@{ant-prefix}-input-number:focus .@{ant-prefix}-input-number-input {
      border-color: #ff4d4f !important;
    }

    // Select 组件的错误状态处理
    .@{ant-prefix}-select.@{ant-prefix}-select-status-error .@{ant-prefix}-select-content {
      border-color: #ff4d4f !important;
    }
  }
}

// compact模式容器, 修复antd6定制模式下，Group组件内嵌套Form.Item时，表单样式问题
.pro-group-compact-container {
  .@{ant-prefix}-select {
    border-radius: 0 !important;
  }
  .@{ant-prefix}-input-affix-wrapper {
    border-radius: 0 !important;
  }

  > .pro-group-form-item {
    position: relative;

    &:hover,
    &:focus-within {
      z-index: 2;
    }
  }

  > .pro-group-form-item:not(:first-child) {
    .@{ant-prefix}-input,
    .@{ant-prefix}-select,
    .@{ant-prefix}-input-number {
      margin-left: -1px;
    }
  }
  .pro-group-separator-compact {
    margin-left: -1px;
  }

  // 查看模式下的分隔符样式 - 移除边框，使用简洁样式
  .pro-group-separator-view {
    border: none !important;
    background: transparent !important;
    padding: 0 2px !important;
    margin-inline-start: 0 !important;
    color: #999 !important;
  }

  /* 1. 处理第一个子元素：左上、左下圆角 */
  > .pro-group-form-item:first-child {
    .pro-select .@{ant-prefix}-select,
    .@{ant-prefix}-select,
    .@{ant-prefix}-input-affix-wrapper,
    .@{ant-prefix}-input-number,
    .@{ant-prefix}-picker {
      border-top-left-radius: 6px !important;
      border-bottom-left-radius: 6px !important;
    }
  }

  /* 2. 处理最后一个子元素：右上、右下圆角 */
  > .pro-group-form-item:last-child {
    .pro-select .@{ant-prefix}-select,
    .@{ant-prefix}-select,
    .@{ant-prefix}-input-affix-wrapper,
    .@{ant-prefix}-input-number,
    .@{ant-prefix}-picker {
      border-top-right-radius: 6px !important;
      border-bottom-right-radius: 6px !important;
    }
  }
}
.@{ant-prefix}-form-item-has-error {
  .pro-group-compact-container {
    .@{ant-prefix}-select {
      border-color: var(--zaui-danger);
    }
  }
}
// compact模式容器 结束