import React from 'react';
import { connect } from 'dva';
import { Card, DatePicker, message, Input } from 'antd';
import { FormEL, UdcSelect } from '@components';
import { Toolbar, ContractPicker } from '@bizComponents';
import { formUtils, enums } from '@utils';
const { customMsg } = enums;
const { TextArea } = Input;

const PrepayOrderDetail = ({ user, prepayOrderDetail, dispatch, loading }) => {
  const { mode, formData } = prepayOrderDetail;

  const domain = 'prepayOrderDetail';
  const domainCN = '预付款单明细';

  const handleFormChange = (field) => {
    const key = Object.keys(field)[0];
    dispatch({
      type: `${domain}/updateForm`,
      payload: {
        key,
        value: field[key],
      },
    });
  };

  // 基本信息form
  const basic = [
    {
      title: '预付款编号',
      dataIndex: 'docNo',
    }, {
      title: '合同编号',
      dataIndex: 'contract',
      tag: <ContractPicker disabled={mode !== 'update'}
        filter={{ suppCodeName: formData.suppCode, checkStatus: customMsg.CONTRACT_STATUS_VALID }} />,
      options: {
        rules: [{
          required: true,
          message: '必填',
        }],
      },
    }, {
      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: 'esPayDate',
      tag: <DatePicker style={{ width: '100%' }} disabled={mode !== 'update'} />,
      options: {
        rules: [{
          required: true,
          message: '必填',
        }],
      },
    }, {
      title: '预计冲账日期',
      dataIndex: 'esOffsetDate',
      tag: <DatePicker style={{ width: '100%' }} disabled={mode !== 'update'} />,
      options: {
        rules: [{
          required: true,
          message: '必填',
        }],
      },
    }, {
      title: '姓名',
      dataIndex: 'recePerson',
    }, {
      title: '付款方式',
      dataIndex: 'payModeName',
    }, {
      title: '部门名称',
      dataIndex: 'orgName',
    }, {
      title: '附属合同编号',
      dataIndex: 'attContractNo',
      tag: <Input disabled={mode !== 'update'} />,
      options: {
        rules: [{
          min: 0,
          max: 40,
          message: '至多输入40个字符',
        }],
      },
    }, {
      title: '采购备注',
      dataIndex: 'poRemark',
      tag: <TextArea rows={4} disabled={mode !== 'update'} />,
      options: {
        rules: [{
          min: 0,
          max: 1000,
          message: '至多输入1000个字符',
        }],
      },
    }, {
      title: '原料属性',
      dataIndex: 'materialProp',
      tag: <UdcSelect domain="SRM" code="MATERIAL_PROP" disabled={mode !== 'update'} />,
    }, {
      title: '生产厂家厂号',
      dataIndex: 'manufacturerNo',
      tag: <Input disabled={mode !== 'update'} />,
      options: {
        rules: [{
          min: 0,
          max: 40,
          message: '至多输入40个字符',
        }],
      },
    }, {
      title: '货柜号',
      dataIndex: 'containerNo',
      tag: <Input disabled={mode !== 'update'} />,
      options: {
        rules: [{
          min: 0,
          max: 40,
          message: '至多输入40个字符',
        }],
      },
    }];

  const handleSave = () => {
    const { contract } = formData;
    if (!contract.id) {
      message.error(`合同编号 必填`);
    } else {
      formUtils.validateForm(basic, formData, () => {
        dispatch({ type: `${domain}/update` });
      });
    }
  };

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

  return (
    <div>
      <Toolbar
        domain={domain}
        loading={loading}
        formData={formData}
        mode={mode}
        buttons={[{
          id: 'save',
          text: '保存',
          type: 'primary',
          hidden: mode !== 'update',
          onClick: () => {
            handleSave();
          },
        }]}
        handleSave={handleSave}
        handleCancel={handleCancel}
      />

      <Card title="基本信息" loading={loading.effects[`${domain}/querySingle`]} id="basic">
        <FormEL items={basic} record={formData} onFieldsChange={handleFormChange} />
      </Card>
    </div>);
};

export default connect(({ prepayOrderDetail, loading }) => ({
  prepayOrderDetail,
  loading,
}))(PrepayOrderDetail);
