import React, { useRef, useState } from 'react';
import { createForm, onFieldChange } from '@formily/core';
import { createSchemaField } from '@formily/react';
import Modal, { ModalProps } from '@/components/Modal';
// import { fetchTableData } from '@/utils/table';
import { Form, FormItem, Input, Select, Radio, Switch } from '@formily/antd';

interface PaySelectModalPropsType extends ModalProps {
  onOk: (val: any) => void;
  onCancel: () => void;
  // modalData: any;
}

const SchemaField = createSchemaField({
  components: {
    FormItem,
    Input,
    Select,
    Radio,
    Switch,
  },
});

const form = createForm({});

const PaySelectModal = ({ onOk, onCancel, ...rest }: PaySelectModalPropsType) => {
  const [send, useSend] = useState(true);

  const handleOk = () => {
    const formState = form.getFormState();
    onOk(formState.values);
  };
  const handleCancel = () => {
    onCancel();
  };

  return (
    <Modal title="选择方式" onOk={handleOk} onCancel={handleCancel} width={800} {...rest}>
      <Form form={form} labelCol={4} wrapperCol={18}>
        <SchemaField>
          <SchemaField.Number
            name="type"
            title="支付方式"
            required
            x-decorator="FormItem"
            x-component="Radio.Group"
            enum={[
              { label: '秘钥支付', value: 1 },
              { label: '小狐狸钱包支付', value: 2 },
            ]}
          />
          <SchemaField.String
            name="key"
            title="秘钥"
            x-decorator="FormItem"
            x-component="Input"
            x-component-props={{
              placeholder: '请输入秘钥，若使用小狐狸支付则不需要输入',
            }}
          />
        </SchemaField>
      </Form>
    </Modal>
  );
};

export default PaySelectModal;
