import React, { useState } from 'react';
import { Modal, Form, Input, Button, Select, InputNumber, TreeSelect } from 'antd';
import indexStyles from "../index.less";
import BaiDuMapPostion from '../BaiDuMapPostion';
const CreateForm = (props) => {
  const { TextArea } = Input;
  const [form] = Form.useForm();
  const { Option, OptGroup } = Select;
  const [isShowBaiduMap, setIsShowBaiduMap] = useState(false);
  const handleBaiduMapOk = (pos) => {
    console.log('地图', pos);
    const formValues = form.getFieldsValue(true);
    formValues.store_Loc = `${pos.point.lng.toFixed(10)},${pos.point.lat.toFixed(10)}`;
    formValues.store_Addr = pos.address;
    form.setFieldsValue(formValues);
    setIsShowBaiduMap(false);
  }
  return (
    <>
      {
        isShowBaiduMap && <BaiDuMapPostion isShowBaiduMap={isShowBaiduMap} handleOk={handleBaiduMapOk} handleCancel={() => setIsShowBaiduMap(false)}></BaiDuMapPostion>
      }
      <Modal
        title={props.values.id ? '编辑机构' : '新建机构'}
        width={640}
        visible={props.modalVisible}
        bodyStyle={{ padding: '32px 40px 48px' }}
        footer={null}
        onCancel={() => {
          props.onCancel();
        }}
        destroyOnClose
      >
        <Form
          form={form}
          layout="horizontal"
          preserve={false}
          labelCol={{
            span: 4,
          }}
          initialValues={props.values}
          onFinish={props.onFinish}
        >
          <Form.Item name="id" hidden={true}>
            <Input />
          </Form.Item>
          <Form.Item name="code" label="组织编码" rules={[{ required: true, max: 64 }]}>
            <Input placeholder="请输入组织编码" />
          </Form.Item>
          <Form.Item name="name" label="组织名称" rules={[{ required: true, max: 64 }]}>
            <Input placeholder="请输入名称" />
          </Form.Item>
          <Form.Item name="pid" label="上级名称" rules={[{ required: true }]}>
            <TreeSelect
              style={{ width: '100%' }}
              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
              treeData={props.treeDatas}
              placeholder="请选择上级名称"
              treeDefaultExpandAll
            />
          </Form.Item>

          <Form.Item
            name="type"
            label="组织类型"
            defaultValue={props.values.type}
            rules={[{ required: true, message: '请选择组织类型' }]}
          >
            <Select placeholder="请选择机构类型">
              <OptGroup>
                <Select.Option value={0}>机构</Select.Option>
                <Select.Option value={1}>配送中心</Select.Option>
                <Select.Option value={2}>直营店</Select.Option>
                <Select.Option value={3}>加盟店</Select.Option>
              </OptGroup>
            </Select>
          </Form.Item>
          <div className={indexStyles.add_row_content}>
            <Form.Item label={'店铺坐标'} name="store_Loc" rules={[{
              required: true, max: 100, pattern: /^[-\+]?\d+(\.\d+)\,[-\+]?\d+(\.\d+)$/,
              message: '经纬度格式不对'
            }]}>
              <Input style={{ width: '75%' }} placeholder="104.070734,30.575041" />
            </Form.Item>
            <Button type="primary" className={indexStyles.add_row_btn} onClick={() => { setIsShowBaiduMap(true); }}>打开地图</Button>
          </div>
          <Form.Item label={'店铺地址'} name="store_Addr" rules={[{ required: true, max: 100 }]}>
            <Input placeholder="成都市武侯区桂溪街道环球中心N5-9111C" />
          </Form.Item>


          <Form.Item name="tel" label="电话" rules={[{ max: 20 }]}>
            <Input placeholder="请输入联系电话" />
          </Form.Item>
          <Form.Item name="sort" label="排序">
            <InputNumber min={1} step={1} />
          </Form.Item>，
          <Form.Item name="remark" label="备注">
            <TextArea rows={4} rules={[{ max: 500 }]} />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              保存
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </>

  );
};

export default CreateForm;
