/**
 * 规则构建器样式 - 生产环境紧凑版
 * 适用于需要在一屏显示大量规则的企业生产环境
 */

// ===== 紧凑配置 =====
@compactPadding: 8px;
@compactMargin: 4px;
@compactGap: 6px;
@compactFontSize: 12px;
@compactHeight: 24px;

// ===== 颜色配置 =====
@groupLevel1: #fafafa;
@groupLevel2: #f5f5f5;
@groupLevel3: #f0f0f0;
@groupLevel4: #ebebeb;
@groupLevel5: #e6e6e6;
@andLogic: #1890ff;
@orLogic: #fa8c16;
@ruleCardBg: #ffffff;
@borderColor: #d9d9d9;
@borderColorLight: #e8e8e8;
@shadowColor: rgba(0, 0, 0, 0.04);
@hoverShadowColor: rgba(0, 0, 0, 0.08);
@text-color: rgba(0, 0, 0, 0.85);
@text-color-secondary: rgba(0, 0, 0, 0.45);

// ===== 规则构建器容器 =====
.ruleBuilderContainer {
  padding: 0;
  background: transparent;
  border: none;
  font-size: @compactFontSize;
}

// ===== 规则组编辑器 =====
.ruleGroupEditor {
  padding: @compactPadding;
  margin-bottom: @compactGap;
  border-radius: 4px;
  border: 1px solid @borderColorLight;
  box-shadow: 0 1px 2px @shadowColor;
  transition: box-shadow 0.2s;

  &:hover {
    box-shadow: 0 2px 4px @hoverShadowColor;
  }

  // 根据层级设置不同背景色
  &.level0 {
    background: @groupLevel1;
    border-left: 2px solid @andLogic;
  }

  &.level1 {
    background: @groupLevel2;
    border-left: 2px solid @andLogic;
  }

  &.level2 {
    background: @groupLevel3;
    border-left: 2px solid @andLogic;
  }

  &.level3 {
    background: @groupLevel4;
    border-left: 2px solid @andLogic;
  }

  &.level4 {
    background: @groupLevel5;
    border-left: 2px solid @andLogic;
  }

  // OR 逻辑使用橙色边框
  &.orLogicGroup {
    border-left-color: @orLogic;
  }

  // 规则组头部
  .groupHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: @compactGap;
    padding-bottom: 4px;
    border-bottom: 1px solid @borderColorLight;

    .groupTitle {
      display: flex;
      align-items: center;
      gap: 4px;
      font-weight: 500;
      color: @text-color;
      font-size: @compactFontSize;
      line-height: @compactHeight;
    }

    .groupActions {
      display: flex;
      gap: 4px;
    }
  }

  // 规则组内容
  .groupContent {
    display: flex;
    flex-direction: column;
    gap: @compactMargin;
  }

  // 嵌套规则组
  .nestedGroups {
    margin-top: @compactGap;
    margin-left: @compactPadding;
    padding-left: @compactPadding;
    border-left: 1px dashed @borderColorLight;
  }
}

// ===== 规则卡片 =====
.ruleCard {
  background: @ruleCardBg;
  padding: 6px @compactPadding;
  border-radius: 4px;
  border: 1px solid @borderColorLight;
  box-shadow: 0 1px 2px @shadowColor;
  transition: all 0.2s;

  &:hover {
    border-color: @andLogic;
    box-shadow: 0 2px 4px @hoverShadowColor;
  }

  .ruleContent {
    display: flex;
    align-items: center;
    gap: @compactGap;
    flex-wrap: nowrap;

    .ruleField {
      min-width: 120px;
      flex: 1;
    }

    .ruleOperator {
      min-width: 80px;
      flex: 0.6;
    }

    .ruleValue {
      min-width: 120px;
      flex: 1.2;
    }

    .ruleValue2 {
      min-width: 100px;
      flex: 0.8;
    }

    .ruleActions {
      display: flex;
      gap: 2px;
      margin-left: auto;
      flex-shrink: 0;
    }
  }
}

// ===== 逻辑选择器 =====
.logicSelector {
  display: inline-block;
  margin-bottom: @compactGap;

  :global(.ant-radio-group) {
    display: flex;
    gap: @compactGap;
  }

  :global(.ant-radio-button-wrapper) {
    padding: 2px 12px;
    min-width: 70px;
    height: @compactHeight;
    line-height: 20px;
    border-radius: 4px;
    font-size: @compactFontSize;
    transition: all 0.2s;

    &:hover {
      box-shadow: 0 1px 3px @shadowColor;
    }
  }

  .logicLabel {
    font-weight: 500;
    font-size: @compactFontSize;
  }

  .logicDescription {
    display: none; // 紧凑模式隐藏描述
  }

  // AND 逻辑样式
  .andLogic {
    color: @andLogic;
  }

  .andLogicActive {
    background: @andLogic;
    border-color: @andLogic;
    color: #ffffff;
  }

  // OR 逻辑样式
  .orLogic {
    color: @orLogic;
  }

  .orLogicActive {
    background: @orLogic;
    border-color: @orLogic;
    color: #ffffff;
  }
}

// ===== 添加按钮组 =====
.addButtonGroup {
  display: flex;
  gap: @compactGap;
  margin-top: @compactGap;
  padding-top: @compactGap;
  border-top: 1px dashed @borderColorLight;

  :global(.ant-btn) {
    height: @compactHeight;
    padding: 0 8px;
    font-size: @compactFontSize;
    line-height: 22px;
  }

  :global(.ant-btn-primary) {
    box-shadow: 0 1px 2px rgba(24, 144, 255, 0.2);

    &:hover {
      box-shadow: 0 2px 4px rgba(24, 144, 255, 0.3);
    }
  }

  :global(.ant-btn-default) {
    &:hover {
      border-color: @andLogic;
      color: @andLogic;
    }
  }
}

// ===== 空状态 =====
.emptyState {
  text-align: center;
  padding: 20px 16px;
  color: @text-color-secondary;
  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
  border-radius: 4px;
  border: 1px dashed @borderColorLight;

  .emptyIcon {
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.6;
  }

  .emptyText {
    font-size: @compactFontSize;
    margin-bottom: 0;
    line-height: 1.5;
  }
}

// ===== JSON 预览 =====
.jsonPreview {
  margin-top: 16px;
  padding: @compactPadding;
  background: #fafafa;
  border-radius: 4px;
  border: 1px solid @borderColorLight;

  .previewTitle {
    font-weight: 500;
    margin-bottom: @compactGap;
    color: @text-color;
    font-size: @compactFontSize;
  }

  .previewContent {
    max-height: 300px;
    overflow-y: auto;
    background: #ffffff;
    padding: @compactPadding;
    border-radius: 4px;
    border: 1px solid @borderColorLight;

    pre {
      margin: 0;
      white-space: pre-wrap;
      word-break: break-word;
      font-size: 11px;
      line-height: 1.5;
    }
  }
}

// ===== 验证错误提示 =====
.validationErrors {
  margin-top: @compactPadding;
  padding: @compactPadding;
  background: #fff2e8;
  border-radius: 4px;
  border: 1px solid #ffbb96;

  .errorTitle {
    font-weight: 500;
    color: #d4380d;
    margin-bottom: 4px;
    font-size: @compactFontSize;
  }

  .errorList {
    list-style: none;
    margin: 0;
    padding: 0;

    .errorItem {
      padding: 2px 0;
      color: #d4380d;
      font-size: 11px;

      &:before {
        content: '• ';
        margin-right: 4px;
      }
    }
  }
}

// ===== 响应式设计 =====
@media (max-width: 768px) {
  .ruleCard {
    .ruleContent {
      flex-wrap: wrap;

      .ruleField,
      .ruleOperator,
      .ruleValue,
      .ruleValue2 {
        min-width: calc(50% - 3px);
      }

      .ruleActions {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
      }
    }
  }
}

// ===== 全局紧凑样式覆盖 =====
:global {
  .ruleBuilderContainer {
    // 确保所有表单组件使用小尺寸
    .ant-select,
    .ant-input,
    .ant-input-number {
      font-size: @compactFontSize;

      &-sm {
        height: @compactHeight;
        line-height: @compactHeight;
      }
    }

    .ant-select-sm {
      .ant-select-selector {
        height: @compactHeight;
        padding: 0 7px;
        font-size: @compactFontSize;
      }

      .ant-select-selection-item {
        line-height: 22px;
      }
    }

    .ant-input-sm {
      height: @compactHeight;
      padding: 0 7px;
      font-size: @compactFontSize;
    }

    .ant-input-number-sm {
      height: @compactHeight;
      font-size: @compactFontSize;

      .ant-input-number-input {
        height: 22px;
        padding: 0 7px;
      }
    }

    .ant-btn-sm {
      height: @compactHeight;
      padding: 0 7px;
      font-size: @compactFontSize;
      line-height: 22px;

      &.ant-btn-icon-only {
        width: @compactHeight;
        padding: 0;
      }
    }
  }
}

// ===== 打印样式 =====
@media print {
  .ruleBuilderContainer {
    border: none;
    box-shadow: none;
  }

  .ruleGroupEditor,
  .ruleCard {
    break-inside: avoid;
    box-shadow: none;
  }

  .groupActions,
  .ruleActions,
  .addButtonGroup {
    display: none;
  }
}