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


const Detail = ({ suppInvoiceDetails, dispatch, loading }) => {
  const { mode, formData } = suppInvoiceDetails;

  const domain = 'suppInvoiceDetails';
  let readOnly = false;
  if (mode === 'view') {
    readOnly = true;
  }

  // 基本信息form
  const basic = [
    {
      title: '发票代码',
      dataIndex: 'invNo',
    }, {
      title: '发票号码',
      dataIndex: 'invIdCode',
    }, {
      title: '发票种类',
      dataIndex: 'invClassDesc',
    }, {
      title: '发票类型',
      dataIndex: 'invTypeName',
    }, {
      title: '形式发票编号',
      dataIndex: 'invNoInv',
    }, {
      title: '发票金额',
      dataIndex: 'invAmt',
    }, {
      title: '发票验证状态',
      dataIndex: 'invStatusName',
    }, {
      title: '对账单编号',
      dataIndex: 'checkNo',
    }, {
      title: '未税金额',
      dataIndex: 'netAmt',
    }, {
      title: '发票校验码',
      dataIndex: 'invSymbol',
    }, {
      title: '供应商名称',
      dataIndex: 'suppName',
    }, {
      title: '税额',
      dataIndex: 'taxAmt',
    }, {
      title: '开票日期',
      dataIndex: 'invDate',
    }, {
      title: '企业名称',
      dataIndex: 'ouName',
    },];

  const handleUpdateForm = () => {
    // 因为FormEL的 debounce必须传 一个为func 的 onFieldsChange
  };

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

  const button = [];

  return (
    <div style={{ height: '100%' }}>

      <Toolbar
        domain={domain}
        loading={loading}
        formData={formData}
        readOnly={readOnly}
        mode={mode}
        buttons={!readOnly ? button : []}
        handleCancel={handleCancel}
      />

      <Card title="基本信息" id="basic">
        <FormEL items={basic} record={formData} readOnly={readOnly} onFieldsChange={handleUpdateForm} />
      </Card>

    </div>);
};

export default connect(({ suppInvoiceDetails, loading }) => ({
  suppInvoiceDetails,
  loading,
}))(Detail);
