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

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

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

  // 基本信息form
  const basic = [{
    title: '企业编号',
    dataIndex: 'ouCode',
  }, {
    title: '来源单据类型',
    dataIndex: 'docTypeDesc',
  }, {
    title: '供应商编号',
    dataIndex: 'suppCode',
  }, {
    title: '企业名称',
    dataIndex: 'ouName',
    className: 'alignLeft',
  }, {
    title: '来源单据编号',
    dataIndex: 'docNo',
  }, {
    title: '供应商名称',
    dataIndex: 'suppName',
  }, {
    title: '应付金额',
    dataIndex: 'amt',
  }, {
    title: '形式发票编号',
    dataIndex: 'invNo',
  }, {
    title: '应付到期日期',
    dataIndex: 'dueDate',
  }, {
    title: '已付金额',
    dataIndex: 'payedAmt',
  }, {
    title: '物料编号',
    dataIndex: 'itemCode',
  }, {
    title: '应付开始日期',
    dataIndex: 'apDate',
  }, {
    title: '未结金额',
    dataIndex: 'openAmt',
  }, {
    title: '物料名称',
    dataIndex: 'itemName',
  }, {
    title: '付款日期',
    dataIndex: 'payedDate',
  }, {
    title: '付款状态',
    dataIndex: 'openFlagDesc',
  },];

  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(({ payableD, loading }) => ({
  payableD,
  loading,
}))(Detail);
