import React from 'react';
import { Button, Col, Form, Input, Modal, Row, Select } from 'antd';
import { UdcSelect } from '../../../components';
import { OrgPicker } from '../../components';

const Option = Select.Option;

const FormItem = Form.Item;

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

const ColProps = {
  xs: 24,
  sm: 24,
  md: 8,
  xl: 8,
  style: {},
};

const modal =
  ({
     mode,
     domain,
     readOnly,
     record,
     onOk,
     onCancel,
     dispatch,
     loading,
     form: {
       getFieldDecorator,
       validateFields,
       getFieldsValue,
       setFieldsValue,
     },
     ...modalProps
   }) => {
    record.org = {
      id: record.orgId,
      code: record.orgCode,
      name: record.orgName,
      ouId: record.ouId,
      ouName: record.ouName,
    };
    const items = [{
      title: '编号',
      dataIndex: 'empCode',
      tag: <Input disabled={true}/>,
    }, {
      title: '姓名',
      dataIndex: 'empName',
      tag: <Input disabled={true}/>,
    }, {
      title: '类型',
      dataIndex: 'empType',
      tag: <UdcSelect domain="EDP" code="EMP_TYPE" disabled={true}/>,
    }, {
      title: '状态',
      dataIndex: 'empStatus',
      tag: <UdcSelect domain="EDP" code="ON_OFF_FLAG" disabled={true}/>,
    }, {
      title: '性别',
      dataIndex: 'empGender',
      tag: <Select style={{ width: '100%' }} disabled={true}>
        <Option value="男">男</Option>
        <Option value="女">女</Option>
      </Select>,
    }, {
      title: '地址号',
      dataIndex: 'addrNo',
      tag: <Input disabled={true}/>,
    }, {
      title: '生日',
      dataIndex: 'birthDate',
      tag: <Input disabled={true}/>,
    }, {
      title: '电子邮件',
      dataIndex: 'email',
      tag: <Input disabled={true}/>,
    }, {
      title: '手机',
      dataIndex: 'mobile',
      tag: <Input disabled={true}/>,
    }, {
      title: '证件类型',
      dataIndex: 'idType',
      tag: <Input disabled={true}/>,
    }, {
      title: '证件号码',
      dataIndex: 'idNo',
      tag: <Input disabled={true}/>,
    }, {
      title: '职级',
      dataIndex: 'empLevel',
      tag: <Input disabled={true}/>,
    }, {
      title: '职称',
      dataIndex: 'title',
      tag: <Input disabled={true}/>,
    }, {
      title: '是否删除',
      dataIndex: 'deleteFlag',
      tag: <UdcSelect domain="EDP" code="YES_NO_FLAG" disabled={true}/>,
    }, {
      title: '部门',
      dataIndex: 'org',
      options: {
        rules: [{
          validator: (rule, value, callback) => {
            if (value.id === null) {
              callback('必填');
            }
            callback();
          },
        }],
      },
      tag: <OrgPicker disabled={readOnly} filter={{ ouCodeName: record.ouName }}/>,
    }, {
      title: '备注',
      dataIndex: 'remark',
      tag: <Input disabled={true} type="textarea"/>,
      colProps: {
        xs: 24,
        sm: 24,
        md: 24,
        xl: 24,
      },
      formItemLayout: {
        labelCol: { span: 2 },
        wrapperCol: { span: 21 },
      },
    },
    ];

    const handleOk = () => {
      validateFields((errors) => {
        if (errors) {
          return;
        }
        const data = {
          ...getFieldsValue(),
        };
        // console.log(data.org.id);
        data.orgId = data.org.id;
        data.org = undefined;
        onOk(data);
      });
    };

    const handleCancel = () => {
      onCancel();
    };

    const modalOpts = {
      ...modalProps,
      onCancel: handleCancel,
      footer: [
        <Button key="back" onClick={handleCancel}>取消</Button>,
        mode !== 'view' &&
        <Button
          key="submit"
          type="primary"
          loading={mode === 'create' ? loading.effects[`${domain}/create`] : loading.effects[`${domain}/update`]}
          onClick={handleOk}
        >保存</Button>,
      ],
    };

    const renderItem = (item) => {
      return (
        <Col key={item.dataIndex} {...ColProps} {...item.colProps}>
          <FormItem
            label={item.title}
            hasFeedback={!readOnly && !item.tag.props.disabled && !!(item.options) && !!(item.options.rules)}
            {...formItemLayout}
            {...item.formItemLayout}
          >
            {getFieldDecorator(item.dataIndex, {
              ...item.options,
              initialValue: record[`${item.dataIndex}`] || (item.options && item.options.initialValue),
            })(item.tag)}
          </FormItem>
        </Col>
      );
    };

    return (
      <Modal {...modalOpts}>
        <Row type="flex" justify="start">
          {items.map(item => renderItem(item))}
        </Row>
      </Modal>
    );
  };

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