import React from 'react';
import { connect } from 'dva';
import { Card } from 'antd';
import { FormEL, DataTable } from '@components';
import { Toolbar } from '@bizComponents';

const PayOrderDetail = ({ user, payOrderDetail, dispatch, loading }) => {
  const { mode, formData } = payOrderDetail;
  const { payItems } = formData;

  const domain = 'payOrderDetail';
  const domainCN = '付款单明细';
  const formatter = (value) => {
    return (
      value ? `${parseFloat(value).toFixed(2)}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : ''
    );
  };

  // 基本信息form
  const basic = [
    {
      title: '付款编号',
      dataIndex: 'docNo',
    }, {
      title: '付款单状态',
      dataIndex: 'docStatusName',
    }, {
      title: '制单日期',
      dataIndex: 'docDate',
    }, {
      title: '付款方',
      dataIndex: 'ouName',
    }, {
      title: '供应商名称',
      dataIndex: 'suppName',
    }, {
      title: '付款日期',
      dataIndex: 'payDate',
    }, {
      title: '总金额(含税)',
      dataIndex: 'payAmt',
    }, {
      title: '总金额(不含税)',
      dataIndex: 'netAmt',
    }, {
      title: '币种',
      dataIndex: 'currName',
    }, {
      title: '备注',
      dataIndex: 'remark',
    }, {
      title: '供应商账号',
      dataIndex: 'bankAccount',
    }, {
      title: '开户银行',
      dataIndex: 'suppBank',
    }, {
      title: '姓名',
      dataIndex: 'recePerson',
    }, {
      title: '付款方式',
      dataIndex: 'payModeName',
    }, {
      title: '部门名称',
      dataIndex: 'orgName',
    }];

  const tableProps = {
    rowKey: 'id',
    scroll: { x: '100%' },
    domain,
    dispatch,
    loading,
    showAdd: false,
    showDelete: false,
    showEdit: false,
    enablePagination: false,
    enableSelection: false,
    dataSource: payItems,
    filter: [],
    columns: [{
      title: '发票编号',
      dataIndex: 'invNo',
      width: '20%',
    }, {
      title: '款项性质',
      dataIndex: 'payTypeName',
      width: '20%',
    }, {
      title: '金额',
      dataIndex: 'amt',
      className: 'alignRight',
      width: '20%',
      render: formatter,
    }, {
      title: '税率',
      dataIndex: 'taxAmt',
      width: '20%',
    }, {
      title: '备注',
      dataIndex: 'remark',
      width: '20%',
    }],
  };

  const handleCancel = () => {
    dispatch({ type: `${domain}/cancel` });
  };

  return (
    <div>
      <Toolbar
        domain={domain}
        loading={loading}
        formData={formData}
        readOnly={true}
        mode={mode}
        buttons={[]}
        handleCancel={handleCancel}
      />

      <Card title="基本信息" loading={loading.effects[`${domain}/querySingle`]} id="basic">
        <FormEL items={basic} record={formData} readOnly={true} />
      </Card>
      <Card title="发票信息" loading={loading.effects[`${domain}/querySingle`]} id="basic">
        <DataTable {...tableProps} />
      </Card>
    </div>);
};

export default connect(({ payOrderDetail, loading }) => ({
  payOrderDetail,
  loading,
}))(PayOrderDetail);
