import React from 'react';
import { connect } from 'dva';
import { Button, Form, Input, message, Row, Card, Col, Select } from 'antd';
import { UdcSelect, SuggestSelect, FormEL } from '../../../components';

const FormItem = Form.Item;
const Option = Select.Option;

const formItemLayout = {
  // colon: false,
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};

const colProps = {
  xs: 24,
  sm: 24,
  md: 12,
  lg: 12,
  xl: 12,
  style: {},
};

const ChangeInfo = ({
  userInfo,
  dispatch,
  form: {
    setFieldsValue,
    getFieldDecorator,
    validateFieldsAndScroll,
  },
}) => {
  const { formData } = userInfo;

  function handleOk() {
    dispatch({ type: 'userInfo/save' });
  }

  const readOnly = true;

  const items = [
    {
      title: '员工编号',
      dataIndex: 'empCode',
      options: {},
    }, {
      title: '姓名',
      dataIndex: 'empName',
      options: {
        rules: [{
          required: true,
          message: '必填',
        }],
      },
      tag: <Input disabled={readOnly} />,
    }, {
      title: '手机',
      dataIndex: 'mobile',
      options: {
        rules: [{
          required: true,
          message: '必填',
        }],
      },
      tag: <Input />,
    }, {
      title: '邮箱',
      dataIndex: 'email',
      tag: <Input />,
    }, {
      title: '公司',
      dataIndex: 'ouId',
      options: {},
      tag: <SuggestSelect disabled={readOnly} apiName="ous"
                          params={{ isDept: true }} />,
    }, {
      title: '部门',
      dataIndex: 'orgId',
      tag: <SuggestSelect disabled={readOnly} apiName="orgs"
                          params={{ isDept: true }} />,
    },/* {
      title: '性别',
      dataIndex: 'empGender',
      options: {},
      tag: <Select disabled={readOnly} style={{ width: '100%' }} allowClear>
        <Option value="男">男</Option>
        <Option value="女">女</Option>
      </Select>,
    },*/
  ];

  const handleFormChange = (field) => {
    const key = Object.keys(field)[0];
    dispatch({
      type: `userInfo/updateForm`,
      payload: {
        key,
        value: field[key],
      },
    });
  };

  return (
    <div className="content-inner">
      {Object.keys(formData).length > 0 && <Card
        title="修改个人信息"
        actions={[<Button type="primary" onClick={handleOk} loading={null}>保存修改</Button>,]}
        style={{ width: '100%', marginTop: 8 }}>
        <FormEL style={{ width: '100%' }} items={items} ColProps={colProps} record={formData} onFieldsChange={handleFormChange} />
      </Card>}
    </div>
  );
};

export default connect(({ userInfo }) => ({ userInfo }))(Form.create()(ChangeInfo));
