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

const { api } = config;
const { order } = api;
const { compsRecps } = order;
const { compsMode } = enums;

class RecpModal extends React.PureComponent {
  componentWillReceiveProps = (nextProps) => {
    if (nextProps.visible) {
      this.fetchData();
    }
  };

  constructor(props) {
    super(props);

    this.state = {
      dataSource: [],
      fetching: false,
    };
  }

  fetchData = () => {
    const record = this.props.record;
    this.setState({ fetching: true });

    networkUtils.request({
      method: 'get',
      url: compsRecps,
      data: {
        docNo: record.docNo,
        docType: 'A6'
      }
    }).then((data) => {
      if (data.success) {
        this.setState({
          dataSource: data.data,
          fetching: false,
        });
      } else {
        throw data;
      }
    });
  };

  render() {
    const { dataSource, fetching } = this.state;
    const { visible, onCancel, modalProps, record } = this.props;

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

    const modalOpts = {
      ...modalProps,
      visible,
      maskClosable: false,
      title: '入库明细',
      onCancel: handleClose,
      footer: [
        <Button key="back" onClick={handleClose}>关闭</Button>,
      ],
    };

    const itemProps = {
      rowKey: 'id',
      scroll: { x: '100%' },
      dataSource,
      loading: fetching,
      pagination: false,
      size: 'small',
      columns: [{
        title: '采购单编号',
        dataIndex: 'poNo',
        width: '18%',
      }, {
        title: '入库单编号',
        dataIndex: 'recpNo',
        width: '18%',
      }, {
        title: '物料编号',
        dataIndex: 'itemCode',
        width: '14%',
      }, {
        title: '物料名称',
        dataIndex: 'itemName',
        width: '10%',
      }, {
        title: '入库数量',
        dataIndex: 'recpQty',
        width: '10%',
      }, {
        title: '入库日期',
        dataIndex: 'recpDate',
        width: '25%',
      }],
    };

    const moneyProps = {
      rowKey: 'id',
      scroll: { x: '100%' },
      dataSource,
      loading: fetching,
      pagination: false,
      size: 'small',
      columns: [{
        title: '采购单编号',
        dataIndex: 'poNo',
        width: '25%',
      }, {
        title: '入库单编号',
        dataIndex: 'recpNo',
        width: '25%',
      }, {
        title: '索赔金额',
        dataIndex: 'recpAmt',
        width: '25%',
        render: (value, row, index) => {
          return (
            numberUtils.round_half_up_format(value,2)
          );
        }
      }, {
        title: '入库日期',
        dataIndex: 'recpDate',
        width: '25%',
      }],
    };

    return (
      <Modal wrapClassName="vertical-center-modal" width="50%" {...modalOpts} >
        {
          record.compsMode === compsMode.COMPS_MODE_ITEM ?
            <Table {...itemProps} /> : <Table {...moneyProps} />
        }
      </Modal>
    );
  }
}

export default RecpModal;
