import React from 'react';
import { connect } from 'dva';
import { Button, Card, Input, Steps } from 'antd';
import { FormEL } from '@components';
import { formUtils } from '@utils';
import styles from './index.less';

const Register = ({ dispatch, register, loading }) => {
  const { edpPbSupp,saveDisabled } = register;

  const domain = 'register';
  const { TextArea } = Input;

  const introduction = [{
    title: '自我介绍（请输入不超过500个字符）',
    dataIndex: 'remark',
    options: {
      rules: [
        {
          max: 500,
          message: '。',
        },
      ],
    },
    colProps: {
      xs: 24,
      sm: 24,
      md: 24,
      xl: 24,
      lg: 24,
      style: {},
    },
    formItemLayout: {
      labelCol: {
        span: 0,
      },
      wrapperCol: {
        span: 24,
      },
    },
    tag: <TextArea autosize={{ minRows: 8, maxRows: 20 }} />,
  }];

  const handleFormChange = (field) => {
    const key = Object.keys(field)[0];
    // if (key === 'productCode') {
    //   if (field[key] !== null) {
    //     dispatch({
    //       type: `${domain}/updateSpecNo`,
    //       payload: {
    //         productCode: field[key],
    //       },
    //     });
    //   } else {
    //     dispatch({
    //       type: `${domain}/updateForm`,
    //       payload: {
    //         key: 'specNo',
    //         value: null,
    //       },
    //     });
    //   }
    //   const old = formData.productCode;
    //   if (old !== field[key]) {
    //     dispatch({ type: `${domain}/updateFaultModeCode`, payload: { value: old } });
    //   }
    // } else if (key === 'dutyType') {
    //   dispatch({ type: `${domain}/updateOuId`, payload: { value: field[key] } });
    // }

    dispatch({
      type: `${domain}/updateForm`,
      payload: {
        key,
        value: field[key],
      },
    });
  };

  const handleSave = () => {
    formUtils.validateForm([...introduction,], Object.assign(edpPbSupp), () => {
      dispatch({
        type: `${domain}/save`,
      });
    });

  };

  const prev = () => {
    dispatch({
      type: `${domain}/minusCurrent`,
    });
  };

  const renderregister = () => {
    return (
      <div>
        <Card id="feedback">
          <FormEL items={introduction} record={edpPbSupp} onFieldsChange={handleFormChange} />
        </Card>
        <div className={styles.registerButton}>
          <Button onClick={prev}> 返回 </Button>
          <Button style={{ marginLeft: 8 }}  type="primary" disabled={saveDisabled} onClick={handleSave}>注册</Button>
        </div>
      </div>
    );
  };

  return renderregister();
};

//export default register;

export default connect(({ register, loading }) => ({ register, loading }))(Register);
