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


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

  const [form] = Form.useForm();
  const { values } = props;





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

  const intl = useIntl();
  const handleOk = () => {
    form.submit();
  };
  const handleCancel = () => {
    props.onCancel();
  };
  const handleFinish = async (values: any) => {
    let data = JSON.parse(JSON.stringify(values))
    if (!values.id) {
      delete data.merchantInfoUpdateParams
      data.merchantInfoAddParams = values.merchantInfoUpdateParams
    }
    props.onSubmit(data);
  };

  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}>
        <ProFormDigit
          name="id"
          label={'ID'}
          disabled
          hidden={true}
        />
        <ProForm.Group>

          {/* <ProFormText
            name="userName"
            label={'用户名'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入用户名"
          />
          <ProFormText
            name="phone"
            label={'手机'}
            colProps={{ md: 8, xl: 8 }}
            placeholder="请输入手机"
          />
          <ProFormText
            name="password"
            label={'密码'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入密码"
          /> */}
          {/* <ProFormText
            name="electricityRate"
            label={'电费分成比例'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入电费分成比例"
          />
          <ProFormText
            name="serviceRate"
            label={'服务费分成比例'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入服务费分成比例"
          /> */}
        </ProForm.Group>
        <ProForm.Group>
          <ProFormText
            name={["merchantInfoUpdateParams", "id"]}
            label={'商户名称'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入商户名称"
            hidden={true}
          />
          <ProFormText
            name={["merchantInfoUpdateParams", "merchantName"]}
            label={'商户名称'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入商户名称"
          />
          <ProForm.Item
            label="营业执照"
            name={["merchantInfoUpdateParams", "licenseImage"]}
          >
            <FilesManager
              fileType="image"
              defaultValue={values?.merchantInfoUpdateParams?.licenseImage}
              count={1}
              mode=""
            />
          </ProForm.Item>
          <ProFormText
            name={["merchantInfoUpdateParams", "orgCode"]}
            label={'社会信用代码'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入社会信用代码"
          />
          <ProFormText
            name={["merchantInfoUpdateParams", "licenseNo"]}
            label={'营业执照编码'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入营业执照编码"
          />
          <ProFormText
            name={["merchantInfoUpdateParams", "invoice"]}
            label={'开票公司'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入开票公司"
          />
          <ProFormText
            name={["merchantInfoUpdateParams", "headName"]}
            label={'负责人名称'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入负责人名称"
          />
          <ProFormText
            name={["merchantInfoUpdateParams", "contactPhone"]}
            label={'联系电话'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入联系电话"
          />
        </ProForm.Group>
        {/* <ProFormRadio.Group
          name="status"
          options={[
            {
              label: '启用',
              value: 1,
            },
            {
              label: '禁用',
              value: 2,
            },
          ]}
          label={'状态'}
          colProps={{ md: 12, xl: 12 }}
        /> */}
      </ProForm>
    </Modal>
  );
};

export default UserForm;
