import React from 'react';
import { Button, Form, Modal, InputNumber, Icon, Card } from 'antd';
import { DataTable, FormEL } from '@components';
import { numberUtils } from '@utils';

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

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

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

        const handleUpdateValue = (dataIndex, index, newValue) => {
            dispatch({
                type: `${domain}/updateCell`,
                payload: { index, dataIndex, newValue }
            });
        };

        const formatAmtInput = (value, row, num, dataIndex) => {
            return (
                <InputNumber value={value} max={99999999} min={0} step={0.01} precision={2} style={{ width: '100%' }}
                    disabled={!row.editable}
                    onChange={(e) => handleUpdateValue(dataIndex, num, e)}
                />
            );
        };

        // 基本信息form
        const basic = [
            {
              title: '开票总金额(含税)',
              dataIndex: 'invAmtStr',
            }, {
              title: '开票总金额(未税)',
              dataIndex: 'netAmtStr',
            }, {
              title: '开票总税额',
              dataIndex: 'taxAmtStr',
            }, {
              title: '发票总金额(含税)',
              dataIndex: 'actInvAmtStr',
            }, {
              title: '发票总金额(未税)',
              dataIndex: 'actNetAmtStr',
            }, {
              title: '发票总税额',
              dataIndex: 'actTaxAmtStr',
            }, {
              title: '总金额差异(含税)',
              dataIndex: 'gapAmtStr',
            }, {
              title: '总金额差异(未税)',
              dataIndex: 'gapNetAmtStr',
            }, {
              title: '税额差异',
              dataIndex: 'gapTaxAmtStr',
            }
        ];

        const tableProps = {
            rowKey: 'id',
            scroll: {
                x: '125%',
                y: 400,
            },
            domain,
            dispatch,
            loading,
            showAdd: false,
            showEdit: false,
            showView: false,
            showDelete: false,
            showColumn: false,
            enableDoubleClick: false,
            enableSelection: false,
            total,
            dataSource: record,
            columns: [{
                title: '物料编号',
                dataIndex: 'itemCode',
                width: '8%',
            }, {
                title: '物料名称',
                dataIndex: 'itemName',
                width: '12%',
            }, {
                title: '数量',
                dataIndex: 'qty',
                width: '6%',
                className: 'alignRight',
                render: (value, row, index) => {
                    return (
                      numberUtils.round_half_up_format(value, 2)
                    );
                }
            }, {
                title: '含税总额',
                dataIndex: 'amt',
                width: '6%',
                className: 'alignRight',
                render: (value, row, index) => {
                    return (
                      numberUtils.round_half_up_format(value, 2)
                    );
                }
            }, {
                title: '未税总额',
                dataIndex: 'netAmt',
                width: '6%',
                className: 'alignRight',
                render: (value, row, index) => {
                    return (
                      numberUtils.round_half_up_format(value, 2)
                    );
                }
            }, {
                title: '实际开票(未税)',
                dataIndex: 'invNetAmt',
                width: '6%',
                className: 'alignRight',
                render: (value, row, num) => {
                    return (formatAmtInput(value, row, num, 'invNetAmt'));
                },
            }, {
                title: '实际开票(税额)',
                dataIndex: 'invTaxAmt',
                width: '6%',
                className: 'alignRight',
                render: (value, row, num) => {
                    return (formatAmtInput(value, row, num, 'invTaxAmt'));
                },
            }, {
                title: '实际开票(含税)',
                dataIndex: 'invAmt',
                className: 'alignRight',
                width: '6%',
                render: (value, row, index) => {
                    return (
                      numberUtils.round_half_up_format(value, 2)
                    );
                }
            }, {
                title: '税率(%)',
                dataIndex: 'taxRate',
                width: '6%',
            }, {
                title: '总税额',
                dataIndex: 'taxAmt',
                width: '6%',
                className: 'alignRight',
                render: (value, row, index) => {
                    return (
                      numberUtils.round_half_up_format(value, 2)
                    );
                }
            }, {
                title: '实际数量',
                dataIndex: 'deliQty',
                width: '8%',
                render: (value, row, index) => {
                    return (
                      numberUtils.round_half_up_format(value, 2)
                    );
                }
            }, {
                title: '实际总价',
                dataIndex: 'deliAmt',
                width: '6%',
                render: (value, row, index) => {
                    return (
                      numberUtils.round_half_up_format(value, 2)
                    );
                },
            }, {
                title: '编辑',
                dataIndex: 'edit',
                className: 'alignCenter',
                width: '6%',
                render: (value, row, index) => {
                    if (row.editable) {
                        return (
                            <div>
                                <Icon key="save" type={'check'} style={{ color: 'green', fontSize: '22px' }} onClick={() => {
                                    dispatch({ type: `${domain}/updateRows`, payload: { index } }); // 保存价格
                                }}
                                />&emsp;
                                <Icon key="cancel" type={'cross'} style={{ color: 'red', fontSize: '22px' }}
                                    onClick={() => {
                                        dispatch({ type: `${domain}/cancelRows`, payload: { index, row } });
                                    }}
                                />
                            </div>);
                    } else {
                        return (
                            <Icon type={'edit'} style={{ color: '#3C91C2', fontSize: '22px' }}
                                onClick={() => {
                                    dispatch({ type: `${domain}/toggleEditable`, payload: { index } });
                                }}
                            />);
                    }
                },
            }],
        };

        return (
            <Modal {...modalOpts}>
                <Card title="总金额统计">
                    <FormEL items={basic} record={formInfo} readOnly={true} />
                </Card>
                <Card title="对账明细列表">
                    <DataTable {...tableProps} />
                </Card>
            </Modal>
        );
    };

export default Form.create()(modal);
