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 imgId = 1;

  const [data, setData] = useState({});

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

    // 查询列表
    const getData = imgId => {
      request({ ...apis.carsuseFigure.customImg, params: { imgType: 'index' } }).then(data => {
        if (data?.records?.length > 0) {
          setData(data.records[0]);
        }
        // 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: '请选择类型' }],
    // },
    {
      label: '分享文案',
      name: 'imgDocument',
      type: FieldTypes.Text,
      value: data.imgDocument,
      rules: [{ required: true, message: '请输入分享文案' }],
    },
    // {
    //   label: '是否启用',
    //   name: 'status',
    //   type: FieldTypes.Switch,
    //   value: data.status===1?true:false,
    //   // rules: [{ required: true, message: '请输入分享文案' }],
    // },
  ];

  const handleSubmit = values => {
    if (data.imgId) {
      values.imgId = data.imgId;
      values.imgType = 'index';
      request({ ...apis.carsuseFigure.updateCustomImg, data: values })
        .then(data => {
          message.info('操作成功');
          setData(data);
          // cancelPage();
        })
        .catch(err => {
          message.info(err.msg || err.message);
        });
    }
    else {
      values.imgType = 'index';
      request({ ...apis.carsuseFigure.addCustomImg, data: values })
        .then(data => {
          setData(data);
        })
        .catch(err => {
          message.info(err.msg || err.message);
        });
    }
  };

  const cancelPage = () => {
    if(data.imgId)
    request({ ...apis.carsuseFigure.deleteCustomImg, urlData:{id:data.imgId} })
        .then(data => {
          setData({});
        })
        .catch(err => {
          message.info(err.msg || err.message);
        });
  };

  return (
    <Card>
      <XForm onSubmit={handleSubmit} onCancel={cancelPage} cancelText='删除' cancelBtn={data.imgId?true:false} fields={fields}></XForm>
    </Card>
  );
};

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

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