import React from 'react';
import { Button, Form, Modal, Table, } from 'antd';
import { numberUtils } from '@utils';

const modal =
  ({
    mode,
    domain,
    readOnly,
    record,
    onOk,
    onCancel,
    dispatch,
    loading,
    ...modalProps
  }) => {

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

    const modalOpts = {
      ...modalProps,
      onCancel: handleCancel,
      footer: [
        <Button key="back" onClick={handleCancel}>取消</Button>,
      ],
    };

    const tableProps = {
      scroll: { x: '100%', y: 400 },
      indentSize: 30,
      rowKey: 'ouName',
      dataSource: record,
      bordered: true,
      defaultExpandAllRows: true,
      columns: [{
        title: '采购单编号',
        dataIndex: 'poNo',
        className: 'alignCenter',
        width: '15%',
      }, {
        title: '入库单编号',
        dataIndex: 'recpNo',
        className: 'alignCenter',
        width: '15%',
      }, {
        title: '来源单据类型',
        dataIndex: 'srcDocType',
        className: 'alignCenter',
        width: '15%',
      },{
        title: '物料编号',
        dataIndex: 'itemCode',
        className: 'alignCenter',
        width: '10%',
      }, {
        title: '物料名称',
        dataIndex: 'itemName',
        className: 'alignCenter',
        width: '10%',
      },{
        title: '入库日期',
        dataIndex: 'recpDate',
        className: 'alignCenter',
        width: '15%',
      },  {
        title: '入库数量',
        dataIndex: 'recpQty',
        className: 'alignRight',
        width: '10%',
      }, {
        title: '金额',
        dataIndex: 'recpAmt',
        className: 'alignRight',
        width: '10%',
        render: (value, row, index) => {
          return (
            numberUtils.round_half_up_format(value,2)
          );
        }
      }],
    };

    return (
      <Modal {...modalOpts}>
        <Table loading={loading.effects[`${domain}/query`]} pagination={false} size="small" {...tableProps} />
      </Modal>
    );
  };

export default Form.create()(modal);
