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


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

  const [form] = Form.useForm();

  const { values } = props;

  const [options, setOptions] = useState([]);
  const [address, setAddress] = useState([]);







  useEffect(() => {
    form.resetFields();
    form.setFieldsValue(values);

    addressTreeSelect({ placeCode: 0 }).then(({ data }) => {
      data.map((item, index) => {
        item.isLeaf = false
      })
      setOptions(data)
    })

  }, [form, props]);

  const intl = useIntl();
  const handleOk = () => {
    form.submit();
  };
  const handleCancel = () => {
    props.onCancel();
  };
  const handleFinish = async (values: any) => {
    if (address.length == 3) {
      values.provinceCode = address[0].code
      values.cityCode = address[1].code
      values.areaCode = address[2].code
      values.provinceName = address[0].label
      values.cityName = address[1].label
      values.areaName = address[2].label
    }
    console.log(values);
    values = {
      ...values,
      ...values.location
    }
    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}>
        <ProFormDigit
          name="id"
          label={'ID'}
          disabled
          hidden={true}
        />

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

          <ProFormText
            name="stationName"
            label={'站点名称'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入站点名称"
          />
          <ProFormText
            name="stationTel"
            label={'站点电话'}
            colProps={{ md: 8, xl: 8 }}
            placeholder="请输入站点电话"
          />
          <ProFormText
            name="stationAddress"
            label={'站点地址'}
            colProps={{ md: 24, xl: 24 }}
            placeholder="请输入站点地址"
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormCascader
            colProps={{ md: 8, xl: 8 }}
            fieldProps={
              {
                fieldNames: {
                  label: 'label',
                  value: 'code'
                },
                onChange: (e, _) => {
                  setAddress(_)
                },
                options: options,
                loadData: (selectedOptions) => {
                  const targetOption = selectedOptions[selectedOptions.length - 1];
                  addressTreeSelect({ placeCode: targetOption.code }).then(({ data }) => {
                    if (selectedOptions.length < 2) {
                      data.map((item, index) => {
                        item.isLeaf = false
                      })
                    }
                    targetOption.children = data
                    setOptions([...options]);
                  })

                }
              }
            }
            name="areaList"
            label="区域"
            initialValue={[values?.provinceName, values?.cityName, values?.areaName]}
          />

        </ProForm.Group>
        <ProForm.Group>
          <ProFormSelect
            name="ptId"
            label={'选择价格模板'}
            colProps={{ md: 8, xl: 8 }}
            placeholder="请选择价格模板"
            fieldProps={
              {
                fieldNames: {
                  label: 'label',
                  value: 'id'
                },
              }
            }
            request={async () => {
              let { data } = await getPriceTemplateSelect()
              return data
            }}
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProForm.Item
            label="站点照片"
            name={'pictures'}
          >
            <FilesManager
              fileType="image"
              defaultValue={values?.pictures}
              count={3}
              mode=""
            />
          </ProForm.Item>
        </ProForm.Group>

        <ProForm.Group>

          {/* <ProFormText
            name="stationLon"
            label={'经度'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入经度"
          /> */}
          <ProForm.Item
            style={{ width: "100%" }}
            rules={[{ required: true, message: '请输入' }]}
            name="location"
            label="经纬度"
          >
            <QQMap />
          </ProForm.Item>
          {/* <ProFormText
            name="stationLat"
            label={'纬度'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入纬度"
          /> */}
          <ProFormSelect
            name="siteType"
            label={'场地类型'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请选择场地类型"
            fieldProps={
              {
                fieldNames: {
                  label: 'label',
                  value: 'id'
                },
              }
            }
            request={async () => {
              let { data } = await getSiteTypeSelect()
              return data
            }}
          />
          <ProFormSelect
            name="parkType"
            label={'车位类型'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请选择车位类型"
            fieldProps={
              {
                fieldNames: {
                  label: 'name',
                  value: 'id'
                },
              }
            }
            options={[
              {
                name: '地上电站',
                id: 1
              },
              {
                name: '地下车库',
                id: 2
              }
            ]}
          />

        </ProForm.Group>
        <ProForm.Group>
          <ProFormText
            name="busineHours"
            label={'营业时间描述'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入站点地址"
          />
          <ProFormText
            name="serviceInfo"
            label={'服务描述'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入站点地址"
          />
        </ProForm.Group>
        <ProFormRadio.Group
          name="status"
          options={[
            {
              label: '预备中',
              value: 0,
            },
            {
              label: '启用',
              value: 1,
            },
            {
              label: '暂停营业',
              value: 2,
            },
            {
              label: '下线',
              value: 3,
            },
          ]}
          label={'状态'}
          colProps={{ md: 12, xl: 12 }}
        />
        <ProForm.Group>
          <ProFormTextArea
            name="remarks"
            label={'备注'}
            colProps={{ md: 12, xl: 12 }}
            placeholder="请输入备注"
          />
        </ProForm.Group>

      </ProForm>
    </Modal>
  );
};

export default UserForm;
