import React from 'react';
import { Button, Col, Form, Input, Modal, Row } from 'antd';
import { SuggestSelect } from '../../../components';
import { TreeTableView } from '../../components';

const FormItem = Form.Item;

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

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

const modal =
  ({
     mode,
     domain,
     readOnly,
     record,
     onOk,
     onCancel,
     dispatch,
     loading,
     form: {
       getFieldDecorator,
       validateFields,
       getFieldsValue,
     },
     ...modalProps
   }) => {

    const items = [{
      title: '企业',
      dataIndex: 'entId',
      options: {
        rules: [{
          required: true,
          message: '必填',
        }],
      },
      tag: <SuggestSelect disabled={mode !== 'create'} apiName="ous"/>,
      // }, {
      // title: '供应商',
      // dataIndex: 'suppId',
      // options: {
      //   rules: [{
      //     required: true,
      //     message: '必填',
      //   }],
      // },
      // tag: <SuggestSelect disabled={mode !== 'create'} apiName="supps" onChange={handleSuppChange}/>,
    }, {
      title: '员工',
      dataIndex: 'empId',
      options: {
        rules: [{
          required: true,
          message: '必填',
        }],
      },
      tag: <TreeTableView disabled={!record.entId || mode === 'view'} title={`选择员工 ${record.entName || ''}`} ouId={record.entId}
                          orgId={record.orgId} empId={record.empId}/>,
    }, {
      title: '邮箱',
      dataIndex: 'email',
      options: {
        rules: [{
          required: true,
          message: '必填',
        }],
      },
      tag: <Input disabled={readOnly}/>,
    }, {
      title: '手机',
      dataIndex: 'phone',
      options: {
        rules: [{
          required: true,
          message: '必填',
        }],
      },
      tag: <Input disabled={readOnly}/>,
    }, {
      title: '系统角色',
      dataIndex: 'iamRoles',
      colProps: {
        xs: 24,
        sm: 24,
        md: 24,
        xl: 24,
      },
      formItemLayout: {
        labelCol: {
          span: 3,
        },
        wrapperCol: {
          span: 20,
        },
      },
      options: {
        rules: [{
          required: true,
          message: '必填',
        }],
      },
      tag: <SuggestSelect disabled={readOnly} apiName="authRoles" mode="multiple"/>,
    }, {
      title: '流程角色',
      dataIndex: 'bpmRoles',
      colProps: {
        xs: 24,
        sm: 24,
        md: 24,
        xl: 24,
      },
      formItemLayout: {
        labelCol: {
          span: 3,
        },
        wrapperCol: {
          span: 20,
        },
      },
      tag: <SuggestSelect disabled={readOnly} apiName="bpmRoles" mode="multiple"/>,
    }
    ];

    const handleOk = () => {
      validateFields((errors) => {
        if (errors) {
          return;
        }
        const data = {
          ...getFieldsValue(),
        };
        onOk(data);
      });
    };

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

    const modalOpts = {
      ...modalProps,
      onCancel: handleCancel,
      footer: [
        <Button
          key="back" onClick={handleCancel}
          disabled={mode === 'create' ? loading.effects[`${domain}/create`] : loading.effects[`${domain}/update`]
          }>
          取消
        </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({
  mapPropsToFields(props) {
    return {
      iamRoles: Form.createFormField({
        value: props.record.iamRoles,
      }),
      bpmRoles: Form.createFormField({
        value: props.record.bpmRoles,
      }),
    };
  },
  onValuesChange: (props, changed, all) => {
    const dataIndex = Object.keys(changed)[0];
    if (dataIndex === 'iamRoles') {
      props.dispatch({
        type: `${props.domain}/matchRoles`,
        payload: { roleEvent: 'iamRolesChanged', iamRoleIds: all.iamRoles, bpmRoleIds: all.bpmRoles },
      });
    } else if (dataIndex === 'bpmRoles') {
      props.dispatch({
        type: `${props.domain}/matchRoles`,
        payload: { roleEvent: 'bpmRolesChanged', iamRoleIds: all.iamRoles, bpmRoleIds: all.bpmRoles },
      });
    } else {
      props.dispatch({
        type: `${props.domain}/updateItem`,
        payload: { ...changed },
      });
    }

  },
})(modal);
