// 添加护理表单
import React, { Component } from 'react';
import { Modal, Form, Input, DatePicker, message } from 'antd';
import Moment from 'moment';
import { $http } from 'containers/config/https';
import { Util } from 'tools';

let FormItem = Form.Item;

class AddCareForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      userInfo: {},
    }
  }

  componentDidMount() {
    this.props.onRef(this);
  }

  // 显示弹出层
  showModal = (userInfo) => {
    this.resetFields();
    this.setState({
      visible: true,
      userInfo: userInfo && userInfo.templateID ? userInfo : {}
    });
  }

  // 取消
  handleCancel = () => {
    this.setState({ visible: false })
  }

  // 添加
  handleAdd = () => {
    let {userInfo} = this.state;
    const { form: { validateFields } } = this.props;
    validateFields((errors, values) => {
      // 验证成功
      if (errors === null) {
        let data = {
          params: []
        }

        let obj = values;
        obj.templateID = userInfo && userInfo.templateID ? userInfo.templateID : "";
        obj.templateStartDate = obj && obj.templateStartDate ? Moment(obj.templateStartDate).format('YYYY-MM-DD') : "";
        obj.templateEndDate = obj && obj.templateEndDate ? Moment(obj.templateEndDate).format('YYYY-MM-DD') : "";
        // 处理需要传递的obj
        data.params.push(Util.disposeData(obj));
        $http.post('urlADS', this, {
          code: "04220007",
          data: data,
          success: function (res) {
            if (+res.errorCode === 0) {
              // 提示
              message.success(res.errorMessage);
              // 关闭弹框
              this.handleCancel();
              // 刷新列表数据
              this.props.handleQuery();
            } else {
              if (userInfo && userInfo.id) {
                // 编辑可能失败，但还是需要重置表单
                this.resetFields();
              }
            }
          },
          error: function () {
            if (userInfo && userInfo.id) {
              // 编辑可能失败，但还是需要重置表单
              this.resetFields();
            }
          }
        })
      }
    });
  }

  // 重置表单
  resetFields() {
    this.props.form.resetFields(); //清空所有
  }

  render() {
    let { visible, userInfo } = this.state;
    const { getFieldDecorator } = this.props.form;
    return (
      <div>
        <Modal
          visible={visible}
          title="添加护理表单"
          okText="确定"
          onCancel={this.handleCancel}
          onOk={this.handleAdd}
        >
          <Form layout="vertical">
            <FormItem label="显示序号：">
              {getFieldDecorator('templateSeqNo', {
                initialValue: userInfo && userInfo.templateSeqNo ? userInfo.templateSeqNo : undefined
              })(
                <Input placeholder="请输入" />
              )}
            </FormItem>
            <FormItem label="代码：">
              {getFieldDecorator('templateCode', {
                initialValue: userInfo && userInfo.templateCode ? userInfo.templateCode : undefined,
                rules: [{ required: true, message: '代码不能为空' }]
              })(
                <Input placeholder="请输入" />
              )}
            </FormItem>
            <FormItem label="名称">
              {getFieldDecorator('templateDesc', {
                initialValue: userInfo && userInfo.templateDesc ? userInfo.templateDesc : undefined,
                rules: [{ required: true, message: '请选择生效名称' }],
              })(
                <Input placeholder="请输入" />
              )}
            </FormItem>
            <Form.Item label="生效日期：">
              {getFieldDecorator('templateStartDate', {
                initialValue: userInfo && userInfo.templateStartDate ? Moment(userInfo.templateStartDate, 'YYYY-MM-DD') : Moment(),
                rules: [{ required: true, message: '请选择生效日期' }],
              })(
                <DatePicker style={{ width: '100%' }} format="YYYY-MM-DD" allowClear />
              )}
            </Form.Item>
            <Form.Item label="失效日期：">
              {getFieldDecorator('templateEndDate', {
                initialValue: userInfo && userInfo.templateEndDate ? Moment(userInfo.templateEndDate, 'YYYY-MM-DD') : undefined,
              })(
                <DatePicker style={{ width: '100%' }} format="YYYY-MM-DD" allowClear />
              )}
            </Form.Item>
          </Form>
        </Modal>
      </div>
    );
  }
}

const AddCareForms = Form.create()(AddCareForm);
export default AddCareForms;