import React, { useState, useEffect } from 'react';
import { Card, message, Form } from 'antd';
import { connect } from 'dva';
import { createForm, FieldTypes } from '../../../components/XForm';
import router from 'umi/router';
import apis from '../../../services/apis';
import request from '../../../utils/request';

let helpTips = '';


// const handleFormValueChange = (props, changedValues, allValues) => {
//   setExtraData(allValues);
// };

const XForm = createForm();

const header = props => {
  const {
    currentUser = {
      avatar: '',
      userName: '',
    },
    menu,
  } = props;

  const imgId = props.location.query.imgId;
  const imgType = props.location.query.imgType;

  const [data, setData] = useState({}
    // imgType === 'index'
    //   ? {
    //       imgUrl:
    //         'https://estateagents.oss-cn-shanghai.aliyuncs.com/miniapp/upload/images/1574145199853-97feda7895c65be33aa234a7b81b37f.jpg',
    //       imgType: 'index',
    //       imgDesc: '小程序首页分享配图',
    //       imgDocument: currentUser.orgName + ' 精准获客平台',
    //     }
    //   : {
    //       imgUrl: 'http://njcj.oss-cn-shanghai.aliyuncs.com/icon.png',
    //       imgType: 'indexNews',
    //     },
  );

  if (imgId) {
    useEffect(() => {
      getData(imgId);
    }, []);

    // 查询列表
    const getData = imgId => {
      request({ ...apis.carsuseFigure.getCustomImg, urlData: { id: imgId } }).then(data => {

        setData(data);
      });
    };
  }

  const fields = [
    {
      label: '图片',
      name: 'imgUrl',
      type: FieldTypes.ImageUploader,
      value: data.imgUrl,
      help: '建议图片尺寸：750*600px，比例5:4,格式：jpg，用于：首页分享',
      rules: [{ required: true, message: '请选择图片' }],
    },
    {
      label: '类型',
      name: 'imgType',
      type: FieldTypes.Select,
      value: data.imgType,
      dict: [
        {
          label: '首页分享',
          value: 'index',
        },
        // {
        //   label: '首页资讯',
        //   value: 'indexNews',
        // },
      ],
      rules: [{ required: true, message: '请选择类型' }],
    },
    data.imgType === 'index' && {
      label: '分享文案',
      name: 'imgDocument',
      type: FieldTypes.Text,
      value: data.imgDocument,
      rules: [{ required: true, message: '请输入分享文案' }],
    },
  ];

  const handleSubmit = values => {
    if (imgId) {
      values.imgId = imgId;
      request({ ...apis.carsuseFigure.updateCustomImg, data: values })
        .then(data => {
          cancelPage();
        })
        .catch(err => {
          message.info(err.msg || err.message);
        });
    } else {
      request({ ...apis.carsuseFigure.addCustomImg, data: values })
        .then(data => {
          cancelPage();
        })
        .catch(err => {
          message.info(err.msg || err.message);
        });
    }
  };

  const cancelPage = () => {
    router.go('-1')
  };

  return (
    <Card>
      <XForm onSubmit={handleSubmit} onCancel={cancelPage} fields={fields}></XForm>
    </Card>
  );
};

const WrappedNormalLoginForm = Form.create({ name: 'header' })(header);

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(WrappedNormalLoginForm);
