

import React, { useEffect, useState, useCallback } from 'react';
import { Button, Form, Select, Input, InputNumber, Radio, message, Card, DatePicker, } from 'antd';
// import ImageUpload from '@/components/XForm/ImageUpload';
// import { ProFormDatePicker } from "@ant-design/pro-form";

import { values } from 'lodash';
const FormItem = Form.Item;
const { RangePicker } = DatePicker
const { Option } = Select;
const TreedataFrom = React.forwardRef((props, ref) => {
  // const [treeData, onChangethis] = useState();
  const [treeData, settreeData] = useState(0)
  const OnchangeThis = (value) => { }
  const [data, setData] = useState(treeData);
  const { form, treeTitle, onChangethis } = props;
  const { getFieldDecorator, setFieldsValue, validateFields } = form;

  const formItemLayout = {
    //布局
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },

  };
  const formRef = React.createRef();

  const onChange = (date, dateString) => {
    // onChangethis(value)
    console.log(date, dateString);
  }

  const handleSubmit = (value) => {
    props.onChangethis(value)
    console.log(value);

    setFieldsValue(treeData)

  }





  const handleChange = (e, props) => {

    // e.preventDefault();
    let arr = []
    arr = props.form.getFieldsValue()
    // console.log(arr)
    onChangethis(arr)

  }
  // const handleSubmit = (e) => {s
  //   e.preventDefault();
  //   validateFields((err, values) => {
  //     if (err) {
  //       return;
  //       //字符验证未填写---返回
  //     }
  //   });
  // }
  //挂载 
  const componentDidMount = () => {
    console.log(this.props.FromValue)

    this.props.triggerRef(this)
  }


  return (

    <Form   {...formItemLayout} ref={formRef}
      // onChange={onChange}  
      onSubmit={e => handleChange(e, props)}


    >
      <FormItem hidden >
        {getFieldDecorator('key')(<Input />)}
      </FormItem>
      <FormItem label="姓名">
        {getFieldDecorator('title', {
          rules: [{ required: true, message: '请输入姓名!' }],
        })(<Input />)}
      </FormItem>
      <FormItem label="身份证号" >
        {
          getFieldDecorator('cardId', {
            rules: [{ required: true, message: '请输入身份证号' }]
          })(
            <Input maxLength={19} />
          )
        }
      </FormItem>
      <FormItem label="性别">
        {
          getFieldDecorator('sex', {
            rules: [
              { required: true, message: '请选择性别' }
            ]
          })(
            <Radio.Group style={{ width: '500px' }} initialValue={1}>
              <Radio value={1}>男</Radio>
              <Radio value={2}>女</Radio>
            </Radio.Group>
          )
        }
      </FormItem>
      <FormItem label="联系方式" >
        {
          getFieldDecorator('phone', {
            rules: [{ required: true, message: '请输入联系方式' }]
          })(
            <Input maxLength={11} />
          )
        }
      </FormItem>
      <FormItem label="员工卡号" >
        {
          getFieldDecorator('id', {
            rules: [{ required: true, message: '请输入员工卡号' }]
          })(
            <Input />
          )
        }
      </FormItem>
      <FormItem label="归属部门" >
        {
          getFieldDecorator('belon', {
            rules: [{ required: true, message: '请选择归属部门' }]
          })(
            <Select initialValue={1} onChange={handleChange}>
              <Option value={1}>财务部</Option>
              <Option value={2}>宣传部</Option>
              <Option value={3}>研发部</Option>
              <Option value={4}>仓储物流部</Option>
            </Select>
          )
        }
      </FormItem>
      <FormItem label="居住所在地" >
        {
          getFieldDecorator('homeaddres', {
            rules: [{ required: true, message: '请选择所在地' }]
          })(
            <Select initialValue={1} onChange={handleChange}>
              <Option value={1}>南京</Option>
              <Option value={2}>北京</Option>
              <Option value={3}>湖北</Option>
              <Option value={4}>湖南</Option>
              <Option value={5}>上海</Option>
              <Option value={6}>四川</Option>
            </Select>
          )
        }
      </FormItem>
      <FormItem label="备注" >
        {
          getFieldDecorator('remark', {
            rules: [{ required: false, message: '请输入备注' }]
          })(
            <Input />
          )
        }
      </FormItem>
      <FormItem label="出生日期" style={{ marginBottom: 0 }} >
        {
          getFieldDecorator('day', {
            rules: [
              { required: true, message: '请选择出生日期' }
            ]
          })(
            // <RangePicker style={{width: '255px'}}  />
            <DatePicker onChange={onChange} />
          )
        }
      </FormItem>
      <FormItem wrapperCol={{ span: 12, offset: 5 }}>
        <Button type="primary" htmlType="submit" style={{ marginLeft: '80px', marginTop: '30px' }}>
          修改
        </Button>
        {/* <Button type="danger">
          删除
        </Button> */}
      </FormItem>
    </Form>
  )
})

export default Form.create({})(TreedataFrom);


