safety-eval-service-frontend/src/pages/Container/QualApplication/FilingForm/components/CommitmentStep.jsx

import { DatePicker, Form, Input, Row, Col, Select } from "antd";
import { COMMITMENT_PARAGRAPHS } from "../../filingCommitment";
import FilingUpload, { resolveFilingUploadUrl } from "./FilingUpload";

const BLANK_STYLE = {
  display: "inline-block",
  minWidth: 120,
  padding: "0 4px 2px",
  borderBottom: "1px solid #333",
  textAlign: "center",
  lineHeight: 1.6,
};

function renderBlank(value) {
  const text = value?.trim() || "";
  return (
    <span style={BLANK_STYLE}>{text || "\u00A0".repeat(8)}</span>
  );
}

function CommitmentBody({ legalRepName, filingUnitName }) {
  const values = { legalRepName, filingUnitName };
  return (
    <div style={{ fontSize: 14, lineHeight: 2, color: "rgba(0,0,0,0.85)" }}>
      {COMMITMENT_PARAGRAPHS.map((paragraph) => (
        <p key={paragraph.key} style={{ margin: paragraph.key === "intro" ? "0 0 12px" : "0 0 10px", textIndent: paragraph.key === "intro" ? 0 : "2em" }}>
          {paragraph.parts.map((part, index) => {
            if (part.type === "blank") {
              return <span key={`${paragraph.key}-${index}`}>{renderBlank(values[part.field])}</span>;
            }
            return <span key={`${paragraph.key}-${index}`}>{part.value}</span>;
          })}
        </p>
      ))}
    </div>
  );
}

export default function CommitmentStep({
  form,
  disabled,
  personnelOptions = [],
  onSignatureChange,
}) {
  const legalRepName = Form.useWatch("legalRepName", form);
  const filingUnitName = Form.useWatch("filingUnitName", form);

  const handleLegalRepChange = (personnelId) => {
    if (!personnelId) {
      form.setFieldsValue({ legalRepPersonnelId: undefined, legalRepName: "" });
      return;
    }
    const selected = personnelOptions.find((item) => item.value === personnelId);
    form.setFieldsValue({
      legalRepPersonnelId: personnelId,
      legalRepName: selected?.staffName || selected?.label || "",
    });
  };

  return (
    <div style={{ maxWidth: 920 }}>
      <Form form={form} layout="vertical" disabled={disabled}>
        <Form.Item name="legalRepName" hidden>
          <Input />
        </Form.Item>
        <Form.Item name="filingUnitName" hidden>
          <Input />
        </Form.Item>
        <Form.Item name="commitmentContent" hidden>
          <Input />
        </Form.Item>

        <div style={{
          border: "1px solid #e8e8e8",
          borderRadius: 4,
          padding: "20px 24px",
          background: "#fafafa",
          marginBottom: 24,
        }}
        >
          <CommitmentBody legalRepName={legalRepName} filingUnitName={filingUnitName} />
        </div>

        <Row gutter={24}>
          <Col xs={24} sm={12} md={8}>
            <Form.Item name="signDate" label="签署日期">
              <DatePicker style={{ width: "100%" }} placeholder="请选择日期" />
            </Form.Item>
          </Col>
          <Col xs={24} sm={12} md={8}>
            <Form.Item
              name="legalRepPersonnelId"
              label="法定代表人"
              rules={[{ required: !disabled, message: "请选择法定代表人" }]}
            >
              <Select
                allowClear
                placeholder="请选择"
                options={personnelOptions}
                showSearch
                optionFilterProp="label"
                onChange={handleLegalRepChange}
              />
            </Form.Item>
          </Col>
        </Row>

        <Form.Item name="signatureFiles" label="电子签名">
          <FilingUpload
            disabled={disabled}
            accept="image/*"
            onChange={(files) => {
              if (disabled) {
                return;
              }
              const url = resolveFilingUploadUrl(files);
              onSignatureChange?.(url, files);
            }}
          />
        </Form.Item>
      </Form>
    </div>
  );
}