fe_service_ebtp_frontend/src/pages/SitePerson/components/SitePersonModal.tsx

import React, { useEffect, useState } from 'react';
import { Form, Input, Modal, Spin, Button, Tooltip, Radio, RadioChangeEvent } from 'antd';
import { getSessionUserData } from '@/utils/session';


interface SitePersonModalProps {
  title: any;
  modalVisible: boolean;
  values: any;
  onSubmit: any;
  type: string;
  onCancel: () => void;
}
const layout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 12 },
};
const SitePersonModal: React.FC<SitePersonModalProps> = (props) => {
  const [form] = Form.useForm();
  const { title, modalVisible, type, values, onSubmit: handleUpdate, onCancel } = props;
  //loading
  const [loading, setLoading] = useState<boolean>(false);
  const organizationId = getSessionUserData().organizationId;
  const organizationName = getSessionUserData().organizationName;
  const [value, setValue] = useState<string>("0");

  const onChange = (e: RadioChangeEvent) => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };



  useEffect(() => {
    if (JSON.stringify(values) !== "{}") {
      setValue(values.bankFlag);
      form.setFieldsValue({
        "id": values.id,
        "accountName": values.accountName,
        "cardNumber": values.cardNumber,
        "bank": values.bank,
        "bankOutlets": values.bankOutlets,
        "bankUnionNumber": values.bankUnionNumber,
        "bankFlag": values.bankFlag,
        "companyId": values.companyId,
        "companyName": values.companyName,
        "type": values.type,
        "contactName": values.contactName,
        "contactPhone": values.contactPhone,
        "contactMail": values.contactMail,
      });
    } else {
      form.setFieldsValue({
        "accountName": organizationName,
        "companyId": organizationId,
        "companyName": organizationName,
        "type": "0",
      });
    }
  }, [values])



  const onOk = async () => {
    const fieldsValue = await form.validateFields();
    setLoading(true)
    let tzsState = {
      state: "1"
    }
    if (form.getFieldValue('bankFlag') == "0") {
      fieldsValue["bank"] = "中信银行"
    }
    await handleUpdate({ ...fieldsValue, ...tzsState }).finally(() => {
      setLoading(false)
    });
  };


  const renderFooter = () => {
    if (type == "read") {
      return (
        <>
          <Button onClick={onCancel}>关闭</Button>
        </>
      );
    } else {
      return (
        <>
          <Button type="primary" loading={loading} onClick={onOk}>确认</Button>
          <Button onClick={onCancel}>取消</Button>
        </>
      );
    }
  }

  return (
    <Modal
      destroyOnClose={true}
      title={title}
      visible={modalVisible}
      onCancel={() => onCancel()}
      width={"60%"}
      centered
      footer={renderFooter()}
    >
      <Spin spinning={loading}>
        <Form
          {...layout}
          name="nest-messages"
          form={form}
          preserve={false}
        >
          <Form.Item name="id" label="id" hidden>
            <Input hidden />
          </Form.Item>
          <Form.Item name="companyId" label="公司id" hidden>
            <Input hidden />
          </Form.Item>
          <Form.Item name="companyName" label="公司名称" hidden>
            <Input hidden />
          </Form.Item>
          <Form.Item name="type" label="账户类型：0-基本账户" hidden>
            <Input hidden />
          </Form.Item>

          <Form.Item
            label="账号名称"
            name="accountName"
            rules={[{ required: true, message: '当前项不可为空', },]}
          >
            <Input disabled />
          </Form.Item>
          <Form.Item
            label="银行账号"
            name="cardNumber"
            rules={[{ required: true, message: '当前项不可为空', }, { pattern: /^\d{12,20}$/, message: '请输入正确的银行账号' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="是否中信银行账号"
            name="bankFlag"
            rules={[{ required: true, message: '当前项不可为空', }]}
          >
            <Radio.Group onChange={onChange} value={value}>
              <Radio value="0">中信银行</Radio>
              <Radio value="1">其他银行</Radio>
            </Radio.Group>
          </Form.Item>
          {value == "1" ?
            <Form.Item
              label="开户银行"
              name="bank"
              rules={[{ required: true, message: '当前项不可为空', },]}
            >
              <Input />
            </Form.Item>
            : null}
          <Form.Item
            label="开户网点"
            name="bankOutlets"
            rules={[{ required: true, message: '当前项不可为空', },]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="开户行银联号"
            name="bankUnionNumber"
            rules={[{ required: true, message: '当前项不可为空', }]}// , { pattern: /^\d{12}$/, message: '请输入正确的开户行银联号' }
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="联系人名称"
            name="contactName"
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="联系电话"
            name="contactPhone"
            rules={[{ required: true },
            { pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/, message: '请输入正确的电话号码' }
            ]}
            extra="仅支持联通号段，其他运营商号段暂不支持"
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="邮箱"
            name="contactMail"
            rules={[{ type: 'email', message: '请输入正确的邮箱格式' }]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Spin>
    </Modal>
  );
};

export default SitePersonModal;