import React from 'react';
import { Button, DatePicker, Col, Form, Input, Modal, Row } from 'antd';
import { UdcSelect, UploadEL } from '@components';
import moment from 'moment';

const FormItem = Form.Item;
const { TextArea } = Input;

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

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

const udcItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 18,
  },
};

const udcProps = {
  xs: 16,
  sm: 16,
  md: 16,
  xl: 16,
};

const dataKey = (data = '') => {
  return data;
};

const modal =
  ({
    mode,
    domain,
    readOnly,
    record,
    onOk,
    onCancel,
    dispatch,
    loading,
    form: {
      getFieldDecorator,
      validateFields,
      getFieldsValue,
    },
    ...modalProps
  }) => {
    const items = [{
      title: '公告标题：',
      dataIndex: 'anncSubject',
      options: {
        rules: [{
          required: true,
          message: '必填',
        }, {
          min: 0,
          max: 100,
          message: '至多输入100个字符',
        }],
      },
      tag: <Input disabled={readOnly} />,
    }, {
      title: '公告性质：',
      dataIndex: 'anncClass',
      options: {
        rules: [{
          required: true,
          message: '必填',
        }],
      },
      tag: <UdcSelect domain="EDP" code="ANNC_CLASS" disabled={readOnly} onChange={(text) => handleChange(text)} />,
      formItemLayout: udcItemLayout,
      colProps: udcProps,
    }, {
      title: '公告类型：',
      dataIndex: 'outerAnncType', // 外部公告
      options: {
        rules: [{
          required: true,
          message: '必填',
        }],
      },
      hidden: !record || !record.anncClass || record.anncClass === '2',
      tag: <UdcSelect domain="EDP" disabled={readOnly} code="OUTER_ANNC_TYPE" />,
      formItemLayout: udcItemLayout,
      colProps: udcProps,
    }, {
      title: '公告类型：',
      dataIndex: 'innerAnncType', // 内部公告
      options: {
        rules: [{
          required: true,
          message: '必填',
        }],
      },
      hidden: !record || !record.anncClass || record.anncClass === '1',
      tag: <UdcSelect domain="EDP" disabled={readOnly} code="INNER_ANNC_TYPE" />,
      formItemLayout: udcItemLayout,
      colProps: udcProps,
    }, {
      title: '发布人：',
      dataIndex: 'publishOrg',
      options: {
        rules: [{
          required: true,
          message: '必填',
        }, {
          min: 0,
          max: 100,
          message: '至多输入100个字符',
        }],
      },
      tag: <Input disabled={readOnly} />,
    }, {
      title: '生效时间：',
      dataIndex: 'publishTime',
      options: {
        rules: [{
          required: true,
          message: '必填',
        }],
      },
      tag: <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" style={{ width: '100%' }} disabled={readOnly} />,
    }, {
      title: '公告内容：',
      dataIndex: 'anncContent',
      options: {
        rules: [{
          required: true,
          message: '必填',
        }, {
          min: 0,
          max: 2000,
          message: '至多输入2000个字符',
        }],
      },
      tag: <TextArea rows={8} disabled={readOnly} />,
    }, {
      title: '附件上传：',
      dataIndex: 'attachRepo',
      options: {},
      tag: <UploadEL disabled={readOnly}
        api={`/api/messages/sfs/token?clsPath=${record.attachRepo}&dataKey=${dataKey(record.id)}`}
        dataKey={record.id}
        listTypes={'text'} />,
    }];

    const handleChange = (text) => {
      dispatch({
        type: `${domain}/updateState`,
        payload: {
          record: Object.assign(record, { anncClass: text })
        },
      });
    };

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

        onOk(data);
      });
    };

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

    const modalOpts = {
      ...modalProps,
      // onOk: handleOk,
      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 (
        !item.hidden && <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.dataIndex === 'publishTime' ?
                  moment(record[`${item.dataIndex}`]) :
                  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);
