/**
 * 全局表单样式 — Dialog / Drawer / 页面内 block & inline 表单统一排版
 */
@import './variables.scss';

$form-label-width: 90px;
$form-control-width: 200px;
$form-date-width: 240px;
$form-item-gap: 18px;

// ---- 通用表单项 ----
@mixin form-item-typography {
  .el-form-item__label {
    font-weight: 400 !important;
    color: #606266;
    padding-right: 12px;
  }

  .el-form-item__error {
    padding-top: 2px;
    font-size: 12px;
  }
}

// ---- 弹窗 / 抽屉内 inline 筛选 ----
@mixin overlay-inline-filter {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 16px;
  row-gap: 12px;
  margin-bottom: 16px !important;
  padding: 12px 16px 4px !important;
  background: #f8fafc !important;
  border: 1px solid #ebeef5 !important;
  border-radius: 8px !important;

  .el-form-item {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    width: auto;
    min-width: 280px;
    min-height: 32px;

    .el-form-item__label {
      width: $form-label-width !important;
      flex-shrink: 0;
      line-height: 32px;
    }

    .el-form-item__content {
      flex: 1;
      min-width: 0;
      line-height: 32px;

      > .el-input,
      > .el-select,
      > .el-cascader,
      > .vue-treeselect,
      > .el-input-number {
        width: $form-control-width !important;
      }

      > .el-date-editor--daterange,
      > .el-date-editor--datetimerange,
      > .el-date-editor--monthrange {
        width: $form-date-width !important;
      }

      > .el-date-editor.el-input {
        width: $form-control-width !important;
      }
    }

    &:last-child:not([label]) {
      min-width: auto;

      .el-form-item__content {
        display: flex;
        align-items: center;
        gap: 10px;
      }
    }
  }
}

// ===================== Block 表单（垂直布局）=====================
.el-form:not(.el-form--inline) {
  @include form-item-typography;

  .el-form-item {
    margin-bottom: $form-item-gap;

    .el-form-item__label {
      line-height: 32px;
    }

    .el-form-item__content {
      line-height: 32px;

      > .el-input,
      > .el-select,
      > .el-textarea,
      > .el-cascader,
      > .el-date-editor,
      > .vue-treeselect,
      > .el-input-number {
        width: 100%;
        max-width: 100%;
      }

      .el-radio-group,
      .el-checkbox-group {
        line-height: 32px;
        vertical-align: middle;
      }

      .el-switch {
        vertical-align: middle;
      }
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}

// 表单分区标题
.form-header {
  font-size: 14px;
  font-weight: 600;
  color: $primary;
  border-bottom: 1px solid #ebeef5;
  margin: 0 0 20px;
  padding: 0 0 10px;
}

// ===================== Dialog ======================
.el-dialog {
  .el-dialog__header {
    padding: 16px 24px;
    border-bottom: 1px solid #ebeef5;

    .el-dialog__title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      line-height: 24px;
    }

    .el-dialog__headerbtn {
      top: 16px;
      right: 20px;
    }
  }

  .el-dialog__body {
    padding: 20px 24px 12px !important;

    .el-form:not(.el-form--inline) .el-form-item {
      margin-bottom: 16px;
    }
  }

  .el-dialog__footer {
    padding: 12px 24px 20px;
    border-top: 1px solid #ebeef5;

    .el-button + .el-button {
      margin-left: 12px;
    }
  }

  // 弹窗内 inline 筛选
  .el-form.el-form--inline {
    @include overlay-inline-filter;
  }
}

// 列表页内 Dialog 覆盖 list-page 查询卡片（避免双层卡片冲突）
.app-container .el-dialog .el-form.el-form--inline,
.app-container .el-drawer .el-form.el-form--inline {
  @include overlay-inline-filter;
}

// ===================== Drawer ======================
.el-drawer {
  .el-drawer__header {
    margin-bottom: 0;
    padding: 16px 20px;
    border-bottom: 1px solid #ebeef5;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
  }

  .el-drawer__body {
    padding: 20px;

    .el-form:not(.el-form--inline) .el-form-item {
      margin-bottom: 16px;
    }
  }

  .el-form.el-form--inline {
    @include overlay-inline-filter;
  }
}

// ===================== 页面内独立 block 表单 ======================
.app-container {
  > .el-form:not(.el-form--inline),
  .form-panel > .el-form:not(.el-form--inline),
  .form-panel.el-form:not(.el-form--inline) {
    padding: 20px 24px;
    background: #f8fafc;
    border: 1px solid #ebeef5;
    border-radius: 8px;
    margin-bottom: 16px;
  }
}

// append-to-body 弹窗（不在 app-container 内）
.el-dialog__wrapper,
.el-drawer__wrapper {
  .el-form:not(.el-form--inline) {
    @include form-item-typography;
  }
}

// 根级 Dialog inline（如 selectUser.vue）
.el-dialog__wrapper .el-dialog .el-form.el-form--inline {
  @include overlay-inline-filter;
}

// 表单内按钮间距
.el-form-item .el-button + .el-button {
  margin-left: 10px;
}

// 必填星号颜色
.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before {
  color: #ef4444;
}

// 禁用态
.el-form-item .el-input.is-disabled .el-input__inner,
.el-form-item .el-textarea.is-disabled .el-textarea__inner {
  background-color: #f5f7fa;
  color: #909399;
}
