/* eslint-disable react/destructuring-assignment */
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import { formItemLayout, tailFormItemLayout } from '@/utils/form';
import rules from '@/utils/rules';
import { getRecordValue } from '@/utils/utils';
import { Button, Card, Col, DatePicker, Divider, Form, Input, Radio, Row, Select, Spin, Typography } from 'antd';
import _ from 'lodash';
import React from 'react';

const { Text } = Typography;


interface TroCapHangThang_Props {
  model: { edit, record },
  cond: object,
  loading: boolean,
  dispatch: Function,
  form: { validateFieldsAndScroll, getFieldDecorator },
}

class TroCapHangThang extends React.Component<TroCapHangThang_Props> {
  public componentDidMount() {
  }

  public handleSubmit = e => {
    const { form, model: { edit, record }, cond } = this.props;
    e.preventDefault();
    form.validateFieldsAndScroll((err, values) => {
      if (err) { return; }
      if (edit) {
        this.props.dispatch({
          type: `trocaphangthang/upd`,
          payload: {
            ...values,
            _id: record._id,
          },
        });
      } else {
        this.props.dispatch({
          type: `trocaphangthang/add`,
          payload: {
            ...cond,
            ...values,
          },
        });
      }
    });
  };

  public render() {
    const { model, form: { getFieldDecorator }, cond, loading } = this.props;
    return (
      <div className="box">
        <Card
          bordered={true}
          title={
            <div className="cardTitle">{!model.edit ? `Thêm mới` : `Chỉnh sửa`}</div>
          }
        >

          <Row>

            <Form layout='inline' onSubmit={this.handleSubmit}>
              <Col span={24}>

                <Form.Item label="Giá Sản Phẩm">
                  {getFieldDecorator('gia', {
                    initialValue: getRecordValue(model, cond, 'gia', 0),

                    rules: [...rules.number(1000000000), ...rules.required],
                  })(<Input />)}
                </Form.Item>
                <Form.Item label="Họ tên" style={{ marginRight: 50 }}>
                  {getFieldDecorator('hoTen', {
                    // initialValue: getRecordValue(model, cond, 'hoTen', ''),
                    rules: [...rules.required],
                  })(<Input style={{ width: 300 }}
                  />)}
                </Form.Item>

                {/* <Form.Item label="Năm sinh" style={{ marginRight: 50 }}>
                  {getFieldDecorator('namSinh', {
                    // initialValue: getRecordValue(model, cond, 'namSinh', ''),
                    rules: [...rules.required],
                  })(
                    <DatePicker format={'DD/MM/YYYY'} />
                  )}
                </Form.Item> */}

                {/* <Form.Item label="Giới tính" style={{ marginRight: 50 }}>
                  {getFieldDecorator('gioiTinh', {
                    initialValue: getRecordValue(model, cond, 'gioiTinh', ''),
                    rules: [...rules.required],
                  })(
                    <Radio.Group>
                      <Radio value="0">Nam</Radio>
                      <Radio value="1">Nữ</Radio>
                    </Radio.Group>,
                  )}
                </Form.Item> */}
              </Col>

              {/* <Col span={24}>
                <Form.Item label="Số CMND" style={{ marginRight: 50 }}>
                  {getFieldDecorator('cmnd', {
                    initialValue: getRecordValue(model, cond, 'cmnd', ''),
                    rules: [...rules.required],
                  })(<Input style={{ width: 200 }} />)}
                </Form.Item>
                <Form.Item label="Ngày cấp" style={{ marginRight: 50 }}>
                  {getFieldDecorator('ngapCap', {
                    initialValue: getRecordValue(model, cond, 'ngapCap', ''),
                    rules: [...rules.required],
                  })(
                    <DatePicker format={'DD/MM/YYYY'} />
                  )}
                </Form.Item>

                <Form.Item label="Nơi cấp" style={{ marginRight: 50 }}>
                  {getFieldDecorator('noiCap', {
                    // initialValue: getRecordValue(model, cond, 'noiCap', ''),
                    rules: [...rules.required],
                  })(<Input style={{ width: 300 }} />)}
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item label="Nguyên quán" >
                  {getFieldDecorator('nguyenQuan', {
                    initialValue: getRecordValue(model, cond, 'nguyenQuan', ''),
                    rules: [...rules.required],
                  })(<Input style={{ width: '800px' }} />)}
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item label="Hiện đăng ký hộ khẩu thường trú tại">
                  {getFieldDecorator('hoKhauThuongTru', {
                    initialValue: getRecordValue(model, cond, 'hoKhauThuongTru', ''),
                    rules: [...rules.required],
                  })(<Input style={{ width: '800px' }} />)}
                </Form.Item>
              </Col>
               */}
              {/* <Divider type='horizontal' /> */}

              {/* <Col span={24}>
                <b>I. Phần khai của người có công đang hưởng một hoặc nhiều chế độ hàng tháng</b>
              </Col>
              <Text>1. Hiện đang hưởng chế độ đối với</Text> */}
              {/* <Col span={24}>
                <Form.Item label="Hiện đăng ký hộ khẩu thường trú tại">
                  {getFieldDecorator('dataIndex', {
                    initialValue: getRecordValue(model, cond, 'dataIndex', ''),
                    rules: [...rules.required],
                  })(<Input style={{ width: '800px' }} />)}
                </Form.Item>
              </Col> */}
              {/* <Col span={24}>
                <Form.Item label="1.1" >
                  {getFieldDecorator('1', {
                    initialValue: getRecordValue(model, cond, '1', ''),
                    rules: [...rules.required],
                  })(<Input />)}
                </Form.Item>

                <Form.Item label="Số sổ lĩnh trợ cấp" >
                  {getFieldDecorator('soSo', {
                    initialValue: getRecordValue(model, cond, 'soSo', ''),
                    rules: [...rules.required],
                  })(<Input style={{ width: '200px' }} />)}
                </Form.Item>

                <Form.Item label="Số tiền/tháng" >
                  {getFieldDecorator('soTien', {
                    initialValue: getRecordValue(model, cond, 'soTien', ''),
                    rules: [...rules.required],
                  })(<Input style={{ width: '200px' }} />)}
                </Form.Item>
              </Col> */}


              <Spin spinning={loading}>
                <Form.Item >
                  <Button.Group>
                    <Button type="primary" icon="plus" htmlType="submit">
                      {model.edit ? 'Cập nhật' : 'Thêm mới'}
                    </Button>
                  </Button.Group>
                </Form.Item>
              </Spin>
            </Form>

          </Row>

        </Card >
      </div >
    );
  }
}

const WrappedForm = Form.create({ name: 'TroCapHangThang' })(TroCapHangThang);

export default WrappedForm;