import React, { useEffect, useState } from 'react';
import {
  ProForm,
  ProFormDigit,
  ProFormText,
  ProFormRadio,
  ProFormSelect,
  ProFormCascader,
  ProFormTextArea,
  EditableProTable
} from '@ant-design/pro-components';
import { Form, Modal, Input, Select } from 'antd';
import { useIntl, FormattedMessage } from '@umijs/max';
import { getMerchantSelect, getCardSelect } from '@/services/merchant/index'
import { usersPage } from '@/services/user/index';





const UserForm: React.FC = (props: any) => {

  const [form] = Form.useForm();

  const [shopOption, setShopOption] = useState([]);
  const searchShop = async (value) => {
    const { success, data } = await usersPage({
      phone: value
    });
    data.records.map((i) => {
      i.nickName = i.nickName + ' ' + i.phone
    })
    setShopOption(data.records)
  }


  useEffect(() => {
    form.resetFields();
  }, [form, props]);

  const intl = useIntl();
  const handleOk = () => {
    form.submit();
  };
  const handleCancel = () => {
    props.onCancel();
  };
  const handleFinish = async (values: any) => {
    props.onSubmit(values);
  };

  return (
    <Modal
      width={800}
      title={'退款'}
      open={props.open}
      forceRender
      destroyOnClose
      onOk={handleOk}
      onCancel={handleCancel}
    >
      <ProForm
        form={form}
        grid={true}
        submitter={false}
        layout="horizontal"
        onFinish={handleFinish}>
        <ProForm.Item
          label={'选择用户'}
          name="userId"
        >
          <Select
            allowClear
            showSearch
            placeholder="请输入手机号"
            style={{ width: 300 }}
            filterOption={false}
            onSearch={
              (e) => {
                if (!e) {
                  return;
                }
                searchShop(e);
              }
            }
            fieldNames={{
              label: "nickName",
              value: "id"
            }}
            options={shopOption}
          />
        </ProForm.Item>
        <ProForm.Group>
          <ProFormText
            name="refundAmount"
            label={'退款金额'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入退款金额"
          />
        </ProForm.Group>
      </ProForm>
    </Modal>
  );
};

export default UserForm;
