import React, { useState, useEffect } from 'react';
import { Button, Form, Input, Select,message } from 'antd';
import ImageListUpload from '@/components/XForm/ImageListUpload';
import request, { fetch, apis } from '@/utils/request';
import ModalForm from '../components/ModalForm';

const AMForm = props => {
    const { visible, onCancel, form, formData, onSuccess,buildingId } = props;
  const { getFieldDecorator, setFieldsValue, resetFields, validateFields } = form;

  // const { visible, onCancel, form, formData, onSuccess,buildingId } = props;
  // const { getFieldDecorator, setFieldsValue, resetFields, validateFields } = form;

  const [loading, setLoading] = useState(false);

  const handleSubmit = e => {
    e.preventDefault();
    validateFields((err, values) => {
      console.log(values,'handleSubmit')
      if (err) {
        console.error(err);
        return;
      }
      // function submitData(data) {
      //   if (buildingId === '' || buildingId === undefined) {
      //     return
      //   }
      //   if (data.img) {
      //       // 如果是 名称 和 图片一起编辑，就穿最新的图片
      //     data.img = data.img.map((item, index) => ({ imgType: 'aparment', url: item, orderNo: index }))
      //   } else {
      //       // 如果是 名称 和 图片一起编辑，就穿最新的图片
      //     data.img = visibleData.apartment.buildingImgList
      //   }
      //   data.buildingId = buildingId;
      //   data.apartmentType = 'photo'
      //   const api = (data.apartmentId !== undefined && data.apartmentId !== '') ? apis.building.buildingApartmentUpdate : apis.building.buildingApartmentAdd;
    
      //   // 网路请求
      //   request({ ...api, data: { ...data } }).then(() => {
      //     // eslint-disable-next-line no-unused-expressions
      //     openNotificationWithIcon('success', '操作成功')
      //     handleCancel()
      //     props.onSuccess()
      //     // this.setState({ visibleData: { visible: false, apartmentId: '', buildingId: '' } }, () => console.log('回调：', this.state.visibleData))
      //   }).catch(err => {
      //     // eslint-disable-next-line no-unused-expressions
      //     openNotificationWithIcon('error', err)
      //   })
      // }

      setLoading(true);
      values.buildingId=buildingId
      values.apartmentType = 'photo'
      values.img = values.img.map((item, index) => ({ imgType: 'aparment', url: item, orderNo: index }))

      console.log(values,'values')
      request({ ...apis.building.buildingApartmentAdd,data: { ...values }, })
        .then(res => {
          setLoading(false);
          message.success('操作成功');
          onSuccess(res);
        })
        .catch(err => {
          setLoading(false);
          console.error(err);
        });
    });
  };

  useEffect(() => {
    resetFields();
    // if (formData?.buildingImgList) {
    //   formData.img = formData.buildingImgList[0].url;
    // }
    setFieldsValue(formData || {});
  }, [formData]);

  return (
    <ModalForm title="相册设置" visible={visible} onCancel={onCancel} modalProps={{ destroyOnClose: true }}  onSubmit={handleSubmit}>
      <Form.Item label="相册名称">
        {getFieldDecorator('apartmentName', {
          rules: [
            { required: true, message: '请填写相册名称' },
            { max: 10, message: '相册名称不超过10个字符' },
          ],
        })(<Input placeholder="相册名称不超过10个字符" />)}
      </Form.Item>
      <Form.Item label="相册图片" help="建议图片尺寸750*600，比例5:4,格式：jpg">
        {getFieldDecorator('img', {
          rules: [{ required: true, message: '请上传相册图片' }],
        })(<ImageListUpload />)}
      </Form.Item>
      <Form.Item label=" " colon={false} style={{ marginTop: '2em' }}>
        <Button  loading={loading} style={{ marginLeft: '4em' }} type="primary" htmlType="submit">
          保存
        </Button>
        <Button style={{ marginLeft: '2em' }} onClick={props.onCancel}>
          取消
        </Button>
      </Form.Item>
    </ModalForm>
  );
};

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