import React, { useEffect, useState } from 'react';
import {
  ProForm,
  ProFormDigit,
  ProFormText,
  ProFormRadio,
  ProFormSelect,
  ProFormCascader,
  ProFormTextArea,
  EditableProTable
} from '@ant-design/pro-components';
import { Form, Modal, Input, InputNumber } from 'antd';
import { useIntl, FormattedMessage } from '@umijs/max';
import { getMerchantSelect, getSiteTypeSelect, getStationSelect } from '@/services/merchant/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.deviceExtendUpdateParams
      data.deviceExtendAddParams = values.deviceExtendUpdateParams
    }
    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"
        initialValues={{
          maxPower: "7",
          maxVoltage: 220,
          gunCount: 2
        }}
        onFinish={handleFinish}>
        <ProFormDigit
          name="id"
          label={'ID'}
          disabled

          hidden={true}
        />

        <ProForm.Group>
          <ProFormSelect
            name="merchantId"
            label={'选择商户'}
            colProps={{ md: 8, xl: 8 }}
            placeholder="请选择商户"
            rules={[{ required: true, message: '请选择' }]}
            fieldProps={
              {
                fieldNames: {
                  label: 'label',
                  value: 'id'
                },
              }
            }
            request={async () => {
              let { data } = await getMerchantSelect()
              return data
            }}
          />
          <ProFormSelect
            name="stationId"
            label={'选择电站'}
            colProps={{ md: 8, xl: 8 }}
            placeholder="请选择电站"
            rules={[{ required: true, message: '请选择' }]}
            fieldProps={
              {
                fieldNames: {
                  label: 'label',
                  value: 'id'
                },
              }
            }
            request={async () => {
              let { data } = await getStationSelect()
              return data
            }}
          />
        </ProForm.Group>
        <ProForm.Group>

          {/* <ProFormText
            name="deviceName"
            label={'设备名称(QUDIAO)'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入设备名称"
          /> */}

          {/* <ProFormText
            name="deviceNo"
            label={'设备编号'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入设备编号"
            rules={[{ required: true, message: '请输入' }]}
          /> */}
          <ProFormSelect
            name="maxPower"
            label={'充电最大功率'}
            colProps={{ md: 8, xl: 8 }}
            placeholder="请选择充电最大功率"
            rules={[{ required: true, message: '请选择' }]}
            fieldProps={
              {
                fieldNames: {
                  label: 'name',
                  value: 'id'
                },
              }
            }
            options={[
              {
                name: '7KW',
                id: '7'
              },
              {
                name: '20KW',
                id: '20'
              },
              {
                name: '30KW',
                id: '30'
              }
            ]}
          />
          {/* <ProFormText
            name="maxPower"
            label={'充电最大功率'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入充电最大功率"
          /> */}

          <ProForm.Item
            rules={[{ required: true, message: '请输入充电桩最大电压' }]}
            label="充电桩最大电压"
            name={'maxVoltage'}
          // placeholder="请输入充电桩最大电压"
          >
            <InputNumber />
          </ProForm.Item>

          {/* <ProFormText
            name="maxVoltage"
            label={'充电桩最大电压'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入充电桩最大电压"
            rules={[{ required: true, message: '请输入' }]}
          /> */}

          <ProForm.Item
            rules={[{ required: true, message: '请输入枪数' }]}
            label="枪数"
            name={'gunCount'}
          >
            <InputNumber />
          </ProForm.Item>

          {/* <ProFormText
            name="gunCount"
            label={'枪数'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入枪数"
            rules={[{ required: true, message: '请输入' }]}
          /> */}
        </ProForm.Group>

        <ProForm.Group>
          <ProFormText
            name="deviceNo"
            label={'设备编号'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入设备编号"
            rules={[{ required: true, message: '请输入' }]}
          />
        </ProForm.Group>




        {/* <ProForm.Group>
          <ProFormText
            name={["deviceExtendUpdateParams", "deviceId"]}
            label={'设备ID'}
            colProps={{ md: 12, xl: 12 }}
            hidden={true}
          />
          <ProFormText
            name={["deviceExtendUpdateParams", "deviceNo"]}
            label={'设备编号'}
            colProps={{ md: 12, xl: 12 }}
          />
          <ProFormText
            name={["deviceExtendUpdateParams", "manufacturerId"]}
            label={'厂商执照编码'}
            colProps={{ md: 12, xl: 12 }}
          />
          <ProFormText
            name={["deviceExtendUpdateParams", "manufacturerName"]}
            label={'厂商名称'}
            colProps={{ md: 12, xl: 12 }}
          />
          <ProFormText
            name={["deviceExtendUpdateParams", "equipmentModel"]}
            label={'厂商设备型号'}
            colProps={{ md: 12, xl: 12 }}
          />

          <ProFormText
            name={["deviceExtendUpdateParams", "imei"]}
            label={'IMEI'}
            colProps={{ md: 12, xl: 12 }}
          />

          <ProFormText
            name={["deviceExtendUpdateParams", "programVersion"]}
            label={'程序版本'}
            colProps={{ md: 12, xl: 12 }}
          />
          <ProFormText
            name={["deviceExtendUpdateParams", "networkType"]}
            label={'网络类型'}
            colProps={{ md: 12, xl: 12 }}
          />
          <ProFormText
            name={["deviceExtendUpdateParams", "simOperator"]}
            label={'运营商'}
            colProps={{ md: 12, xl: 12 }}
          />
        </ProForm.Group> */}
        {/* <ProFormRadio.Group
          name="status"
          options={[
            {
              label: '启用',
              value: 1,
            },
            {
              label: '禁用',
              value: 2,
            },
          ]}
          label={'状态'}
          colProps={{ md: 12, xl: 12 }}
        /> */}
      </ProForm>
    </Modal>
  );
};

export default UserForm;
