import React from 'react';
import { connect } from 'dva';
import Modal from './Modal';
import QualifyModal from './QualifyModal';
import { Card, Checkbox, DatePicker, Input, InputNumber, message, Button, Tooltip, Icon } from 'antd';
import { EditableDataTable, FormEL, UdcSelect, SuggestSelect, SuggestSelectAll, CollapseEL } from '@components';
import { dataUtils, formUtils } from '../../../utils';
import { Toolbar, ItemPicker } from '@bizComponents';
import styles from './index.less';
import './index.less';
import moment from 'moment';
import UploadEL from './UploadEL';

const supplierAdjust = ({ dispatch, supplierAdjust, loading }) => {
  const { items, mode, addrContacts, addrQualifys, edpPbSupp, srmSuppAdd, formData, modalVisible, modalItem, qualifyVisible, qualifyItem } = supplierAdjust;
  const { TextArea } = Input;
  const domain = 'supplierAdjust';
  const CheckboxGroup = Checkbox.Group;
  let readOnly = true;
  let updateQualify = false;
  let viewFlag = false;



  const disabledDate = (current) => current && current > moment().endOf('day');
  const disabledQualifyDate = (current) => current && current < moment().endOf('day');

  const modalProps = {
    dispatch,
    loading,
    mode,
    domain,
    record: modalItem,
    visible: modalVisible,
    maskClosable: false,
    width: '80%',
    confirmLoading: mode === 'create' ? loading.effects[`${domain}/create`] : loading.effects[`${domain}/update`],
    readOnly: readOnly,
    title: '采购对接人',
    wrapClassName: 'vertical-center-modal',
    onOk(data) {
      dispatch({
        type: `${domain}/${mode}`,
        payload: data,
      });
    },
    onCancel() {
      dispatch({
        type: `${domain}/hideModal`,
      });
    },
  };

  const qualifyProps = {
    dispatch,
    loading,
    mode,
    domain,
    record: qualifyItem,
    visible: qualifyVisible,
    maskClosable: false,
    width: '80%',
    confirmLoading: mode === 'create' ? loading.effects[`${domain}/create`] : loading.effects[`${domain}/update`],
    readOnly: readOnly,
    title: '资质列表',
    wrapClassName: 'vertical-center-modal',
    onOk(data) {
      dispatch({
        type: `${domain}/${mode}`,
        payload: data,
      });
    },
    onCancel() {
      dispatch({
        type: `${domain}/hideQualifyModal`,
      });
    },
  };

  const supp = [{
    title: '供应商编号',
    dataIndex: 'suppCode',
  }, {
    title: '供货区域',
    dataIndex: 'region',
    options: {

      rules: [
        {
          required: true,
          message: '必填',
        }
      ]
    },
    tag: <SuggestSelectAll apiName="regions" mode="multiple" disabled={ mode !== 'adjust'} params={{ mode }} />,
  }, {
    title: '注册地(城市)',
    dataIndex: 'registerCity',
    tag: <SuggestSelect apiName="city" disabled={readOnly} />,
    options: {
      rules: [
        {
          required: true,
          message: '必填',
        },
      ],
    },
  }, {
    title: '供应商名称',
    dataIndex: 'suppName',
    options: {
      rules: [
        {
          required: true,
          whitespace: true,
          message: '必填',
        },
        {
          max: 200,
          message: '请输入不超过40个字符',
        },
      ],
    },
  }, {
    title: '供应商类型',
    dataIndex: 'suppType',
    options: {
      rules: [
        {
          required: true,
          message: '必填',
        },
      ],
    },
    tag: <UdcSelect domain="SUPP" code="SUPP_TYPE" disabled={readOnly} />,
  }, {
    title: '注册地址',
    dataIndex: 'registerAddress',
    options: {
      rules: [
        {
          max: 100,
          message: '请输入不超过100个字符',
        },
        {
          required: true,
          whitespace: true,
          message: '必填',
        },
      ],
    },
    tag: ( !updateQualify && readOnly ?
      <Tooltip
        placement="topLeft"
        title={
          <p style={{ wordBreak:'break-all', margin: 0 }}>{edpPbSupp.registerAddress}</p>
        }
      >
        <Input disabled={readOnly} value={edpPbSupp.registerAddress}/>
      </Tooltip> :
      <Input disabled={readOnly} />
    ),
  }, {
    title: '供应商简称',
    dataIndex: 'suppAbbr',
    options: {
      rules: [
        {
          max: 100,
          message: '请输入不超过100个字符',
        },
      ],
    },
    tag: <Input disabled={readOnly} />,
  }, {
    title: '供应商性质',
    dataIndex: 'gysxz',
    options: {
      rules: [
        {
          required: true,
          message: '必填',
        },
      ],
    },
    tag: <UdcSelect domain="SUPP" code="GYSXZ" disabled={readOnly} mode="multiple" />,
  }, {
    title: '注册资金',
    dataIndex: 'registerFund',
    options: {
      rules: [
        {
          required: true,
          message: '必填',
        },
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ],
    },
    tag: <Input disabled={readOnly} addonAfter="万元" />,
  }, {
    title: '供应商状态',
    dataIndex: 'suppStatus',
    tag: <UdcSelect domain="SUPP" code="SUPP_STATUS" disabled={true} />,
  }, {
    title: '企业性质',
    dataIndex: 'gysxz1',
    options: {
      rules: [
        {
          required: true,
          message: '必填',
        },
      ],
    },
    tag: <UdcSelect domain="SUPP" code="GYSXZ1" disabled={readOnly} mode="multiple" />,
  }, {
    title: '公司总人数',
    dataIndex: 'compScale',
    options: {
      rules: [
        {
          required: true,
          message: '必填',
        },
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ],
    },
    tag: <Input disabled={readOnly} />,
  }, {
    title: '审批状态',
    dataIndex: 'approveStatus',
    options: {
    },
    tag: <UdcSelect domain="SUPP" code="SUPP_APPR_STATUS" disabled={true} mode="multiple" />,
  }, {
    title: '纳税性质',
    dataIndex: 'gysxz2',
    options: {
      rules: [
        {
          required: true,
          message: '必填',
        },
      ],
    },
    tag: <UdcSelect domain="SUPP" code="GYSXZ2" disabled={readOnly} mode="multiple" />,
  }, {
    title: '官方网站',
    dataIndex: 'webaddress',
    options: {
      rules: [
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ],
    },
    tag: <Input disabled={readOnly} />,
  }, {
    title: '营业执照号',
    dataIndex: 'icRegisterNo',
    options: {
      rules: [
        {
          required: true,
          whitespace: true,
          message: '必填',
        },
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ],
    },
    tag: <Input disabled={readOnly} />,
  }, {
    title: '供应渠道',
    dataIndex: 'gyqd',
    options: {},
    tag: <UdcSelect domain="SUPP" disabled={readOnly} code="GYQD" mode="multiple" />,
  }, {
    title: '创立日期',
    dataIndex: 'registerDate',
    options: {
      rules: [
        {
          required: true,
          message: '必填',
        }
      ],
    },
    tag: <DatePicker disabled={readOnly}
      disabledDate={disabledDate}
      style={{ width: '100%' }} />,
  // }, {
  //   title: '税务登记号',
  //   dataIndex: 'invTaxno',
  //   options: {
  //     rules: [
  //       {
  //         required: true,
  //         whitespace: true,
  //         message: '必填',
  //       },
  //       {
  //         max: 40,
  //         message: '请输入不超过40个字符',
  //       },
  //     ],
  //   },
  //   tag: <Input disabled={readOnly} />,
  // }, {
  //   title: '引入原因',
  //   dataIndex: 'enroleDesc',
  //   options: {
  //     rules: [
  //       {
  //         max: 200,
  //         message: '请输入不超过200个字符',
  //       },
  //     ],
  //   },
  //   tag: <TextArea disabled={readOnly} autosize={{ minRows: 2, maxRows: 6 }} style={{ width: '100%' }} />,
  }, {
    title: '转正日期',
    dataIndex: 'approveTime',
  }, {
    title: '配送方式',
    dataIndex: 'shippingMethod',
    tag: <UdcSelect domain="SRM" code="SHIPPING_METHOD" disabled={ mode !== 'adjust' }/>
  }, {
    title: '服务品牌',
    dataIndex: 'serviceBrand',
    tag: <Input disabled={ mode !== 'adjust'} />,
  }, {
    title: '蜀海供应商',
    dataIndex: 'shuhai',
    tag: <Checkbox checked={edpPbSupp.shuhai == '1'} disabled={readOnly} />,
  }];

  const account = [{
    title: '开户银行',
    dataIndex: 'suppBank',
    options: {
      rules: [
        {
          required: true,
          message: '必填',
        },
      ],
    },
    tag: <SuggestSelect apiName="bank" disabled={readOnly} />,
  }, {
    title: '默认发票类型',
    dataIndex: 'invType',
    options: {
      rules: [
        {
          required: true,
          message: '必填',
        },
      ],
    },
    tag: <UdcSelect domain="SRM" code="INV_TYPE" disabled={readOnly} />,
  }, {
    title: '是否自产自销资质',
    dataIndex: 'agriSupp',
    options: {
      rules: [
        {
          required: true,
          message: '必填',
        },
      ],
    },
    tag: <UdcSelect domain="SRM" code="ARGI_SUPP" disabled={readOnly} />,
  }, {
    title: '银行支行',
    dataIndex: 'bankBranch',
    options: {
      rules: [
        {
          // required: edpPbSupp.suppBank === '9999',
          required: true,
          whitespace: true,
          message: '必填',
        }, {
          max: 200,
          message: '请输入不超过200个字符',
        }
      ]
    },
    tag: ( !updateQualify && readOnly ?
      <Tooltip
        placement="topLeft"
        title={
          <p style={{ wordBreak:'break-all', margin: 0 }}>{edpPbSupp.bankBranch}</p>
        }
      >
        <Input disabled={readOnly} value={edpPbSupp.bankBranch}/>
      </Tooltip> :
      <Input disabled={readOnly} />
    ),
  }, {
    title: '发票类型2',
    dataIndex: 'invType2',
    tag: <UdcSelect domain="SRM" code="INV_TYPE" disabled={readOnly} />,
  }, {
    title: '默认税率',
    dataIndex: 'taxRate',
    options: {
      rules: [
        {
          required: true,
          message: '必填',
        },
      ],
    },
    tag: <SuggestSelect apiName="tax" disabled={readOnly} />,
  }, {
    title: '银行账户',
    dataIndex: 'bankAccount',
    options: {
      rules: [
        {
          required: true,
          whitespace: true,
          message: '必填',
        },
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ],
    },
    tag: <Input disabled={readOnly} />,
  }, {
    title: '发票类型3',
    dataIndex: 'invType3',
    tag: <UdcSelect domain="SRM" code="INV_TYPE" disabled={readOnly} />,
  }, {
    title: '税率2',
    dataIndex: 'taxRate2',
    tag: <SuggestSelect apiName="tax" disabled={readOnly} />,
  }, {
    title: '币种',
    dataIndex: 'currId',
    options: {
      rules: [
        {
          required: true,
          message: '必填',
        },
      ],
    },
    tag: <SuggestSelect apiName="currs" />,
  }, {
    title: '发票类型4',
    dataIndex: 'invType4',
    tag: <UdcSelect domain="SRM" code="INV_TYPE" disabled={readOnly} />,
  }, {
    title: '税率3',
    dataIndex: 'taxRate3',
    tag: <SuggestSelect apiName="tax" disabled={readOnly} />,
  }, {
    title: '付款方式',
    dataIndex: 'payMethod',
    options: {
      rules: [
        {
          required: true,
          message: '必填',
        },
      ],
    },
    tag: <UdcSelect domain="SRM" code="PAYMENT_METHOD" disabled={readOnly} />,
  }, {
    title: '付款条款',
    dataIndex: 'paymentTerm',
    options: {
      rules: [
        {
          required: true,
          message: '必填',
        },
      ],
    },
    tag: <UdcSelect domain="SRM" code="PAYMENT_TERM" disabled={readOnly} />,
  }, {
    title: '税率4',
    dataIndex: 'taxRate4',
    tag: <SuggestSelect apiName="tax" disabled={readOnly} />,
  },];

  const addr = [{
    title: '公司电话',
    dataIndex: 'suppTel',
    options: {
      rules: [
        {
          required: true,
          whitespace: true,
          message: '必填',
        },
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ]
    },
    tag: <Input disabled={readOnly} />,
  }, {
    title: '业务负责人',
    dataIndex: 'bussPic',
    options: {
      rules: [
        {
          required: true,
          whitespace: true,
          message: '必填',
        },
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ],
    },
    tag: <Input disabled={readOnly} />,
  }, {
    title: '法人代表',
    dataIndex: 'repr',
    options: {
      rules: [
        {
          required: true,
          whitespace: true,
          message: '必填',
        },
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ],

    },
    tag: <Input disabled={readOnly} />,
  }, {
    title: '传真号码',
    dataIndex: 'suppFax',
    tag: <Input disabled={readOnly} />,
    options: {
      rules: [
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ],
    },
  }, {
    title: '负责人电话',
    dataIndex: 'bussPicTel',
    options: {
      rules: [
        {
          required: true,
          whitespace: true,
          message: '必填',
        },
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ],
    },
    tag: <Input disabled={readOnly} />,
  }, {
    title: '法人电话',
    dataIndex: 'reprTel',
    options: {
      rules: [
        {
          required: true,
          whitespace: true,
          message: '必填',
        },
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ],
    },
    tag: <Input disabled={readOnly} />,
  }, {
    title: '电子邮箱',
    dataIndex: 'email',
    options: {
      rules: [
        {
          required: true,
          whitespace: true,
          message: '必填',
        },
        {
          type: 'email',
          message: '请输入邮箱',
        },
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ],
    },
    tag: ( !updateQualify && readOnly ?
      <Tooltip
        placement="topLeft"
        title={
          <p style={{ wordBreak:'break-all', margin: 0 }}>{edpPbSupp.email}</p>
        }
      >
        <Input disabled={readOnly} value={edpPbSupp.email}/>
      </Tooltip> :
      <Input disabled={readOnly} />
    ),
  }, {
    title: '负责人邮箱',
    dataIndex: 'bussPicMail',
    options: {
      rules: [
        {
          required: true,
          whitespace: true,
          message: '必填',
        },
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
        {
          type: 'email',
          message: '请输入邮箱',
        },
      ],
    },
    tag: ( !updateQualify && readOnly ?
      <Tooltip
        placement="topLeft"
        title={
          <p style={{ wordBreak:'break-all', margin: 0 }}>{edpPbSupp.bussPicMail}</p>
        }
      >
        <Input disabled={readOnly} value={edpPbSupp.bussPicMail}/>
      </Tooltip> :
      <Input disabled={readOnly} />
    ),
  }, {
    title: '法人邮箱',
    dataIndex: 'reprMail',
    options: {
      rules: [
        {
          type: 'email',
          message: '请输入邮箱',
        },
        {
          required: true,
          whitespace: true,
          message: '必填',
        },
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ],
    },
    tag: ( !updateQualify && readOnly ?
      <Tooltip
        placement="topLeft"
        title={
          <p style={{ wordBreak:'break-all', margin: 0 }}>{edpPbSupp.reprMail}</p>
        }
      >
        <Input disabled={readOnly} value={edpPbSupp.reprMail}/>
      </Tooltip> :
      <Input disabled={readOnly} />
    ),
  }, {
    title: '联系地址',
    dataIndex: 'contactAddr',
    options: {
      rules: [
        {
          required: true,
          whitespace: true,
          message: '必填',
        },
        {
          max: 100,
          message: '请输入不超过40个字符',
        },
      ],
    },
    tag: ( !updateQualify && readOnly ?
      <Tooltip
        placement="topLeft"
        title={
          <p style={{ wordBreak:'break-all', margin: 0 }}>{edpPbSupp.contactAddr}</p>
        }
      >
        <Input disabled={readOnly} value={edpPbSupp.contactAddr}/>
      </Tooltip> :
      <Input disabled={readOnly} />
    ),
  }, {
    title: '负责人职位',
    dataIndex: 'bussPicPosition',
    options: {
      rules: [
        {
          required: true,
          message: '必填',
        },
      ],
    },
    tag: <UdcSelect domain="SRM" code="POSITION" disabled={readOnly} />,
  },];

  const introduction = [{
    title: '自我介绍（请输入不超过500个字符）',
    dataIndex: 'remark',
    options: {
      rules: [
        {
          required: true,
          message: '必填',
        },
        {
          max: 500,
          message: '。',
        },
      ],
    },
    colProps: {
      xs: 24,
      sm: 24,
      md: 24,
      xl: 24,
      lg: 24,
      style: {},
    },
    formItemLayout: {
      labelCol: {
        span: 0,
      },
      wrapperCol: {
        span: 24,
      },
    },
    tag: <TextArea disabled={readOnly} autosize={{ minRows: 8, maxRows: 20 }} />,
  }];

  // const contact = [ {
  //   title: '主要联系人',
  //   dataIndex: 'bussContact',
  //   options: {
  //     rules: [
  //       {
  //         required: true,
  //         whitespace: true,
  //         message: '必填',
  //       },
  //       {
  //         max: 40,
  //         message: '请输入不超过40个字符',
  //       },
  //     ],
  //   },
  //   tag: <Input disabled={readOnly}/>,
  // }, {
  //   title: '用户手机',
  //   dataIndex: 'bussContactTel',
  //   options: {
  //     rules: [
  //       {
  //         required: true,
  //         whitespace: true,
  //         message: '必填',
  //       },
  //       {
  //         max: 40,
  //         message: '请输入不超过40个字符',
  //       },
  //     ],
  //   },
  //   tag: <Input disabled={readOnly}/>,
  // }, {
  //   title: '用户邮箱',
  //   dataIndex: 'bussContactMail',
  //   options: {
  //     rules: [
  //       {
  //         required: true,
  //         whitespace: true,
  //         message: '必填',
  //       },
  //       {
  //         type: 'email',
  //         message: '请输入邮箱',
  //       },
  //       {
  //         max: 40,
  //         message: '请输入不超过40个字符',
  //       },
  //     ],
  //   },
  //   tag: <Input disabled={readOnly}/>,
  // },];

  const addrTableProps = {
    rowKey: 'id',
    scroll: {
      x: '100%',
      y: 400,
    },
    domain: domain,
    dispatch,
    loading,
    dataSource: addrContacts,
    showAdd: false,
    showDelete: false,
    showCopy: false,
    size: 'small',
    enableSelection: viewFlag,
    columns: [{
      title: '联系人',
      dataIndex: 'contPerson',
      width: '15%',
      required: true,
      render: (value, row, index) => {
        return (<Input
          value={value}
          size="small"
          disabled={readOnly}
          style={{ textAlign: 'left' }}
          onChange={(e) => {
            handleAddrChange('contPerson', index, e.target.value);
          }}
        />);

      },
    }, {
      title: '联系人类型',
      dataIndex: 'addressType',
      width: '15%',
      required: true,
      render: (value, row, index) => {
        return (<SuggestSelect apiName="addr"
          value={value}
          size="small"
          disabled={readOnly}
          onChange={(e) => {
            handleAddrChange('addressType', index, e);
          }} />);
      },
    }, {
      title: '联系人职位',
      required: true,
      dataIndex: 'position',
      width: '14%',
      render: (value, row, index) => {
        return (<UdcSelect domain="SRM"
          code="POSITION"
          size="small"
          value={value}
          disabled={readOnly}
          onChange={(e) => {
            handleAddrChange('position', index, e);
          }}
        />);
      },

    }, {
      title: '联系电话',
      dataIndex: 'tel',
      width: '15%',
      required: true,
      render: (value, row, index) => {
        return (<Input
          value={value}
          size="small"
          disabled={readOnly}
          style={{ textAlign: 'left' }}
          onChange={(e) => {
            handleAddrChange('tel', index, e.target.value);
          }}
        />);
      },
    }, {
      title: '电子邮箱',
      dataIndex: 'email',
      width: '15%',
      render: (value, row, index) => {
        return (<Input
          value={value}
          disabled={readOnly}
          size="small"
          style={{ textAlign: 'left' }}
          onChange={(e) => {
            handleAddrChange('email', index, e.target.value);
          }}
        />);
      },
    }, {
      title: '详细地址',
      dataIndex: 'detailaddr',
      width: '40%',
      render: (value, row, index) => {
        return ( !updateQualify && readOnly ?
          <Tooltip
            placement="topLeft"
            title={
              <p style={{ wordBreak:'break-all', margin: 0 }}>{value}</p>
            }
          >
            <Input value={value} size="small" disabled style={{ textAlign: 'left' }} />
          </Tooltip> :
          <Input
            value={value}
            size="small"
            style={{ textAlign: 'left' }}
            onChange={(e) => {
              handleAddrChange('detailaddr', index, e.target.value);
            }}
          />);
      },
    },],
    buttons: [{
      key: 'addAddrRow',
      type: 'primary',
      name: '新增',
      hidden: !viewFlag,
      requiredSelected: 0,
      cb: (selectedRowKeys) => {
        let newData = {
          id: dataUtils.getRandomInt(-99999999, -1)
        };
        dispatch({
          type: `${domain}/addAddrRow`,
          payload: { ...newData },
        });
      },
    }, {
      key: 'deleteAddrRow',
      type: 'primary',
      name: '删除',
      hidden: !viewFlag,
      requiredSelected: 2,
      cb: (selectedRowKeys) => {
        selectedRowKeys.forEach(id => {
          dispatch({
            type: `${domain}/deleteAddrRow`,
            payload: id,
          });
        });
      },
    }],
  };

  const produce = [{
    title: '工厂员工人数',
    dataIndex: 'gcygrs',
    tag: <InputNumber disabled={readOnly} style={{ width: '100%' }} min={0} />,
  }, {
    title: '厂房总面积',
    dataIndex: 'cfzmj',
    options: {
      rules: [
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ],
    },
    tag: <Input disabled={readOnly} addonAfter="㎡" />,
  }, {
    title: '原料仓储面积',
    dataIndex: 'ylccmj',
    options: {
      rules: [
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ],
    },
    tag: <Input disabled={readOnly} addonAfter="㎡" />,
  }, {
    title: '开发技术人数',
    dataIndex: 'kfjsrs',
    options: {
    },
    tag: <InputNumber disabled={readOnly} style={{ width: '100%' }} min={0} />,
  }, {
    title: '生产面积',
    dataIndex: 'scmj',
    tag: <Input disabled={readOnly} addonAfter="㎡" />,
    options: {
      rules: [
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ],
    },
  }, {
    title: '冷冻冷藏库面积',
    dataIndex: 'ldlckmj',
    tag: <Input disabled={readOnly} addonAfter="㎡" />,
    options: {
      rules: [
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ],
    },
  }, {
    title: '品质检验人数',
    dataIndex: 'pzjyrs',
    options: {
    },
    tag: <InputNumber disabled={readOnly} style={{ width: '100%' }} min={0} />,
  }, {
    title: '生产线',
    dataIndex: 'scx',
    options: {
      rules: [
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ],
    },
    tag: <Input disabled={readOnly} />,
  }, {
    title: '成品库面积',
    dataIndex: 'cpkmj',
    options: {
      rules: [
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ],
    },
    tag: <Input disabled={readOnly} addonAfter="㎡" />,
  }, {
    title: '主要生产设备',
    dataIndex: 'zyscsb',
    options: {

    },
    tag: <TextArea disabled={readOnly} autosize={{ minRows: 2, maxRows: 6 }} />,
  }, {
    title: '供应商来源',
    dataIndex: 'gysly',
    options: {

    },
    tag: <TextArea disabled={ mode !== 'adjust' } autosize={{ minRows: 2, maxRows: 6 }} />,
  }];

  const produceSelect = [{
    title: '质量检验',
    dataIndex: 'zljy',
    tag: <UdcSelect domain="SUPP" code="ZLJY" disabled={readOnly} mode="multiple" />,
  }, {
    title: '认证体系',
    dataIndex: 'rztx',
    options: {
      initialValue: [],
    },
    tag: <UdcSelect domain="SUPP" code="RZTX" disabled={readOnly} mode="multiple" />,
  }, {
    title: '质量控制点报表',
    dataIndex: 'zlkzdbb',
    options: {
      initialValue: [],
    },
    tag: <UdcSelect domain="SUPP" code="ZLKZDBB" disabled={readOnly} mode="multiple" />,
  }, {
    title: '检验范围',
    dataIndex: 'jyfw',
    options: {
      initialValue: [],
    },
    tag: <UdcSelect domain="SUPP" code="JYFW" disabled={readOnly} mode="multiple" />,
  }, {
    title: '产品执行标准',
    dataIndex: 'cpzxbz',
    options: {
      initialValue: [],
    },
    tag: <UdcSelect domain="SUPP" code="CPZXBZ" disabled={readOnly} mode="multiple" />,
  }, {
    title: '供货质量记录',
    dataIndex: 'ghzljl',
    options: {
      initialValue: [],
    },
    tag: <UdcSelect domain="SUPP" code="GHZLJL" disabled={readOnly} mode="multiple" />,
  },];

  const qualifyTableProps = {
    rowKey: 'id',
    scroll: { x: '150%' },
    domain: domain,
    dispatch,
    loading,
    dataSource: addrQualifys,
    showAdd: updateQualify || viewFlag,
    showDelete: updateQualify || viewFlag,
    showCopy: false,
    size: 'small',
    buttons: [{
      key: 'downloadBatch',
      type: 'primary',
      name: '下载所选资质',
      requiredSelected: 2,
      cb: (selectedKeys) => {
        handleDownload(selectedKeys);
      },
    }],
    columns: [{
      title: '证件类型',
      required: true,
      dataIndex: 'qualifyType',
      width: '12%',
      render: (value, row, index) => {
        return (<UdcSelect domain="SUPP"
          code="GYSZZ_TYPE"
          size="small"
          value={value}
          disabled={ !updateQualify && readOnly }
          onChange={(e) => {
            handleChange('qualifyType', index, e);
          }}
        />);
      },
    }, {
      title: '证件名称',
      required: true,
      dataIndex: 'qualifyName',
      width: '10%',
      render: (value, row, index) => {
        return ( !updateQualify && readOnly ?
          <Tooltip
            placement="topLeft"
            title={
              <p style={{ wordBreak:'break-all', margin: 0 }}>{value}</p>
            }
          >
            <Input value={value} size="small" disabled style={{ textAlign: 'left' }} />
          </Tooltip> :
          <Input
            value={value}
            size="small"
            style={{ textAlign: 'left' }}
            onChange={(e) => {
              handleChange('qualifyName', index, e.target.value);
            }}
          />
        );
      },
    }, {
      title: '证件编号',
      required: true,
      dataIndex: 'qualifyNo',
      width: '10%',
      render: (value, row, index) => {
        return ( !updateQualify && readOnly ?
          <Tooltip
            placement="topLeft"
            title={
              <p style={{ wordBreak:'break-all', margin: 0 }}>{value}</p>
            }
          >
            <Input value={value} size="small" disabled style={{ textAlign: 'left' }} />
          </Tooltip> :
          <Input
            value={value}
            size="small"
            onChange={(e) => {
              handleChange('qualifyNo', index, e.target.value);
            }}
          />
        );
      },
    }, {
      title: '证件拥有者',
      required: true,
      dataIndex: 'qualifyOwner',
      width: '8%',
      render: (value, row, index) => {
        return (<UdcSelect domain="SRM"
          code="QUALIFY_OWNER"
          size="small"
          value={value}
          disabled={ !updateQualify && readOnly }
          onChange={(e) => {
            handleChange('qualifyOwner', index, e);
          }}
        />);
      },
    }, {
      title: '证件状态',
      dataIndex: 'qualifyStatusDesc',
      width: '6%',
    }, {
      title: '长期有效',
      dataIndex: 'longterm',
      width: '6%',
      render: (value, row, index) => {
        return (<Checkbox defaultChecked={value ? true : false} disabled={ !updateQualify && readOnly }
          onChange={(e) => {
            if (e.target.checked) {
              handleChange('longterm', index, 1);
              handleChange('validTo', index, null);
            } else {
              handleChange('longterm', index, 0);
            }
          }} />);
      },
    }, {
      title: '生效日期',
      dataIndex: 'validFrom',
      width: '10%',
      render: (value, row, index) => {
        return (<DatePicker style={{ width: '100%' }} size="small" disabled={ !updateQualify && readOnly } value={value ? moment(value) : value}
          disabledDate={disabledDate}
          onChange={(e, data) => {
            handleChange('validFrom', index, data);
          }}
        />);
      },
    }, {
      title: '失效日期',
      dataIndex: 'validTo',
      width: '10%',
      render: (value, row, index) => {
        return (<DatePicker style={{ width: '100%' }} size="small" disabled={row.longterm ? true : false || (!updateQualify && readOnly)} value={value ? moment(value) : value}
          disabledDate={disabledQualifyDate}
          onChange={(e, data) => {
            handleChange('validTo', index, data);
          }}
        />);
      },
    }, {
      title: '关联物料',
      dataIndex: 'relateItem',
      width: '10%',
      render: (value, row, index) => <ItemPicker
        // filter={{ statusList: [2] }}
        apiName='items'
        value={{ id: row.relateToItemId, code: row.itemCode, name: row.itemName }}
        disabled={ !updateQualify && readOnly }
        onChange={(data) => {
          handleChange('relateItem', index, data);
        }}
      />,
    }, {
      title: '附件',
      dataIndex: 'attachRepo',
      width: '16%',
      render: (value, row, index) => {
        let clsPath = row.attachRepo ? row.attachRepo : Math.abs(row.id);
        let dataKey = row.id > 0 ? row.id : '';
        return (
          <UploadEL
            currentData={ row }
            size={'small'}
            api={`/api/supp/sfs/token?clsPath=${clsPath}&dataKey=${dataKey}`}
            dataKey={`${dataKey}`}
            listTypes={['text', 'picture', 'picture-card']}
            disabled={!updateQualify && readOnly}
          />
        );
      }
    },],
  };

  const handleChange = (key, index, newValue) => {
    dispatch({ type: `${domain}/updateCell`, payload: { key, index, value: newValue } });
  };

  const handleAddrChange = (key, index, newValue) => {
    dispatch({ type: `${domain}/updateAddrCell`, payload: { key, index, value: newValue } });
  };


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

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

  const getDefaultValues = () => {
    let init = {

    };
    supp.forEach((suppItem) => {
      if (suppItem.options && suppItem.options.initialValue) {
        init[suppItem.dataIndex] = suppItem.options.initialValue;
      }
    });
    account.forEach((suppItem) => {
      if (suppItem.options && suppItem.options.initialValue) {
        init[suppItem.dataIndex] = suppItem.options.initialValue;
      }
    });
    addr.forEach((suppItem) => {
      if (suppItem.options && suppItem.options.initialValue) {
        init[suppItem.dataIndex] = suppItem.options.initialValue;
      }
    });
    produce.forEach((produceItem) => {
      if (produceItem.options && produceItem.options.initialValue) {
        init[produceItem.dataIndex] = produceItem.options.initialValue;
      }
    });
    produceSelect.forEach((produceSelectItem) => {
      if (produceSelectItem.options && produceSelectItem.options.initialValue) {
        init[produceSelectItem.dataIndex] = produceSelectItem.options.initialValue;
      }
    });
    introduction.forEach((introductionItem) => {
      if (introductionItem.options && introductionItem.options.initialValue) {
        init[introductionItem.dataIndex] = introductionItem.options.initialValue;
      }
    });

    return init;
  };

  // 校验资质证照、联系人
  const othersCheck = () => {
    let checked = true;

    if (addrQualifys.length > 0) {
      for (const iterator of addrQualifys) {
        if (!iterator['qualifyType']) {
          message.error('证件类型 必填', 3);
          return 0;
        }
        if (iterator['qualifyName'] && iterator['qualifyName'].length > 40) {
          message.error('证件名称 请输入不超过40个字符', 3);
          return 0;
        }
        if (iterator['qualifyNo'] && iterator['qualifyNo'].length > 40) {
          message.error('证件编号 请输入不超过40个字符', 3);
          return 0;
        }
        if (!iterator['longterm'] && !iterator['validTo']) {
          message.error('请确认证件长期有效 或输入失效日期', 3);
          return 0;
        }
      }
    }

    if (addrContacts.length > 0 ) {
      for (const iterator of addrContacts) {
        if (iterator['contPerson'] && iterator['contPerson'].length > 40) {
          message.error('联系人 请输入不超过40个字符', 3);
          return 0;
        }
        if (iterator['tel'] && iterator['tel'].length > 40) {
          message.error('联系电话 请输入不超过40个字符', 3);
          return 0;
        }
        if (iterator['email'] && iterator['email'].length > 40) {
          message.error('电子邮箱 请输入不超过40个字符', 3);
          return 0;
        }
        if (iterator['detailaddr'] && iterator['detailaddr'].length > 100) {
          message.error('详细地址 请输入不超过100个字符', 3);
          return 0;
        }
      }
    }
    return checked;
  }

  const getRules = () => {
    const rules = [...supp, ...account, ...addr, ...produce, ...produceSelect, ...introduction];
    rules.forEach(i => { delete i.tag; });
    return JSON.parse(JSON.stringify(rules));
  }

  // 去掉必填校验
  const unRequired = () => {
    const rules = getRules();
    rules.forEach(item => {
      if (item.options && item.options.rules) {
        const ors = item.options.rules;
        const nrs = ors.filter(rule => !rule.required);
        item.options.rules = nrs;
      }
    });
    return rules;
  }

  // 暂存 - 不提交流程
  const handlePresotre = () => {
    // 校验联系人、资质证照
    if (othersCheck()) {
      // 校验其他form项
      const rulesCheck = unRequired(); // 去掉必填校验的规则
      const dataCheck = Object.assign(getDefaultValues(), edpPbSupp, srmSuppAdd); // 做校验的数据

      if (!edpPbSupp.bussPicMail) {
        message.error('负责人邮箱 必填', 3);
      } else {
        formUtils.validateForm(rulesCheck, dataCheck,
          () => {
            dispatch({
              type: `${domain}/save`,
              payload: { submitted: false }
            });
          },
          null
        );
      }
    }
  }

  // 校验保存并提交流程
  const handleSave = () => {

    if (addrQualifys.length && formUtils.checkEmptyField(addrQualifys, qualifyTableProps.columns) === true) {
      message.error('请输入证件信息的必填项', 3);
      return 0;
    }

    let qualifys = [...addrQualifys,];

    for (const iterator of qualifys) {
      if (iterator['qualifyName'].length > 40) {
        message.error('证件名称 请输入不超过40个字符', 3);
        return 0;
      }
      if (iterator['qualifyNo'].length > 40) {
        message.error('证件编号 请输入不超过40个字符', 3);
        return 0;
      }
      if (!iterator['longterm'] && !iterator['validTo']) {
        message.error('请确认证件长期有效 或输入失效日期', 3);
        return 0;
      }
      // if(iterator['attachChangeFlag']){
      //   upload.onUpload(`supplierQualify${iterator['id']}`, iterator['viewFiles']);
      // }
    }

    if (addrContacts.length && formUtils.checkEmptyField(addrContacts, addrTableProps.columns) === true) {
      message.error('请输入联系信息的必填项', 3);
      return 0;
    }

    let contacts = [...addrContacts,];

    for (const iterator of contacts) {
      if (iterator['contPerson'].length > 40) {
        message.error('联系人 请输入不超过40个字符', 3);
        return 0;
      }
      if (iterator['tel'].length > 40) {
        message.error('联系电话 请输入不超过40个字符', 3);
        return 0;
      }
      if (iterator['email'] && iterator['email'].length > 40) {
        message.error('电子邮箱 请输入不超过40个字符', 3);
        return 0;
      }
      if (iterator['detailaddr'] && iterator['detailaddr'].length > 100) {
        message.error('详细地址 请输入不超过100个字符', 3);
        return 0;
      }
    }

    if (!edpPbSupp.gysylsx || edpPbSupp.gysylsx.length === 0) {
      message.error('请至少选择一项物料', 3);
      return 0;
    }

    if (!readOnly) {
      formUtils.validateForm([...supp, ...account, ...addr, ...produce, ...produceSelect, ...introduction,], Object.assign(getDefaultValues(), edpPbSupp, srmSuppAdd), () => {
        dispatch({ type: `${domain}/qualify` });
      });
    } else {
      formUtils.validateForm([...supp, ...account, ...addr,], edpPbSupp, () => {
        dispatch({ type: `${domain}/qualify` });
      });
    }
  };

  const handleApprove = () => {
    dispatch({ type: `${domain}/approve` });
  };

  const handleModal = () => {
    dispatch({
      type: `${domain}/modal`,
      payload: {
        id: edpPbSupp.id,
      },
    });
  };

  const handleQualifyModal = () => {
    dispatch({
      type: `${domain}/qualifyModal`,
      payload: {
        id: edpPbSupp.id,
      },
    });
  };

  const handleDownload = (selectedKeys) => {
    const selectedData = addrQualifys.filter(i => selectedKeys.includes(i.id));
    if(selectedData && selectedData.length > 0) {
      const downloadData = new Array();
      selectedData.forEach(item => {
        downloadData.push({
          clsPath: item.attachRepo,
          dataKey: item.id
        });
      });
      dispatch({
        type: `${domain}/download`,
        payload: {
          downloadData
        }
      });
    }
  };

  const handleReject = () => {
    dispatch({ type: `${domain}/reject` });
  };

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

  function onChange(checkedValues) {
    const key = 'gysylsx';
    dispatch({
      type: `${domain}/updateForm`,
      payload: {
        key,
        value: checkedValues,
      },
    });
  }

  function getHepl() {
    window.open('/static/help/supplier.html', '_blank', 'menubar=0, scrollbars=1, resizable=1, status=0, titlebar=0, toolbar=0, location=0');
  }

  let suppItem = [];
  items.length && items.map((status, index) => {
    suppItem.push(
      {
        label: status.name,
        value: status.code,
      });
  });

  return (
    <div>


      {(mode === 'view') &&
        <Toolbar domain={domain} loading={loading} formData={formData}
          readOnly={readOnly}
          mode={mode} prcId={formData.prcId} defId={formData.defId}
          buttons={[{
            id: 'broker',
            text: '对接人',
            type: 'primary',
            onClick: handleModal,
          },]}
          handleCancel={handleCancel}
        />
      }
      {(mode === 'update' || mode === 'updateQualify') &&
        <Toolbar domain={domain} loading={loading} formData={formData}
          readOnly={mode !== 'adjust'}
          mode={mode} prcId={formData.prcId} defId={formData.defId}
          buttons={[{
            id: 'prestore',
            text: '保存',
            type: 'primary',
            // hidden: edpPbSupp.suppStatus !== '01',
            onClick: handlePresotre,
          }, {
            id: 'save',
            text: '提交',
            type: 'primary',
            onClick: handleSave,
          }, {
            id: 'broker',
            text: '对接人',
            type: 'primary',
            onClick: handleModal,
          },]}
          handleCancel={handleCancel}
        />
      }
      {(mode === 'adjust') &&
        <Toolbar domain={domain} loading={loading} formData={formData}
          readOnly={readOnly}
          mode={mode} prcId={formData.prcId} defId={formData.defId}
          buttons={[{
            id: 'prestore',
            text: '保存',
            type: 'primary',
            onClick: handlePresotre,
          },]}
          handleCancel={handleCancel}
        />
      }
      {(mode === 'approval') &&
        <Toolbar domain={domain} loading={loading} formData={formData}
          readOnly={readOnly}
          record={formData}
          mode={mode} prcId={formData.prcId} defId={formData.defId}
          buttons={[{
            id: 'advice',
            placeholder: '请输入意见',
            onChange: (e) => {
              dispatch({ type: `${domain}/updateState`, payload: { advice: e.target.value } });
            },
          }, {
            id: 'assign',
            text: '同意',
            type: 'primary',
            onClick: handleApprove,
          }, {
            id: 'reject',
            text: '拒绝',
            type: 'primary',
            onClick: handleReject,
          }, {
            id: 'broker',
            text: '对接人',
            type: 'primary',
            onClick: handleModal,
          },]}
          handleCancel={handleCancel}
        />
      }


      {/*handleDispatch={handleDispatch}*/}
      {/*handleReject={handleReject}*/}
      {/*handleApprove={handleApprove}*/}
      {/*handleCancel={handleCancel}*/}


      {/*handleAdviceChange={handleAdviceChange}*/}

      <CollapseEL isOpened={ true }>
        <Card
          title={
            <div className={styles.baseHead}>
              <span>基本信息</span>
              <span className={styles.baseHelp}>
                <a href="javascript:;" onClick={ getHepl }><Icon type="question-circle-o"/> 查看帮助</a>
              </span>
            </div>
          }
          loading={loading.effects[`${domain}/query`]}
          id="suppBase">
          <FormEL items={supp} record={edpPbSupp} readOnly={ mode !== 'adjust' } onFieldsChange={handleFormChange} />
          {modalVisible && <Modal {...modalProps} />}
        </Card>
      </CollapseEL>

      <CollapseEL isOpened={ false }>
        <Card title="财务信息" loading={loading.effects[`${domain}/query`]} id="account">
          <FormEL items={account} record={edpPbSupp} readOnly={ readOnly } onFieldsChange={handleFormChange} />
        </Card>
      </CollapseEL>

      <CollapseEL isOpened={ false }>
        <Card title="联系信息" loading={loading.effects[`${domain}/query`]} id="suppAddr">
          <FormEL items={addr} record={edpPbSupp} readOnly={ readOnly } onFieldsChange={handleFormChange} />
          <EditableDataTable {...addrTableProps} />
        </Card>
      </CollapseEL>

      <CollapseEL isOpened={ false }>
        <Card title="生产情况" id="suppProduce">
          <FormEL items={produceSelect} record={edpPbSupp} readOnly={ readOnly } onFieldsChange={handleFormChange} />
          <FormEL items={produce} record={srmSuppAdd} readOnly={ mode !== 'adjust' } onFieldsChange={handleAddFormChange} />
        </Card>
      </CollapseEL>

      <CollapseEL isOpened={ false }>
        <Card title={<div>资质证照 <Button key="save" type="primary" onClick={handleQualifyModal}>查看所有资质</Button></div>}
          loading={loading.effects[`${domain}/query`]} id="suppQualify">
          <EditableDataTable {...qualifyTableProps} />
          {qualifyVisible && <QualifyModal {...qualifyProps} />}
        </Card>
      </CollapseEL>

      <CollapseEL isOpened={ true }>
        <Card title="物料信息" id="suppItem">
          <CheckboxGroup options={suppItem} className={styles.checkbox} value={edpPbSupp.gysylsx} onChange={onChange} disabled={ mode !== 'adjust' } />
          <br />
        </Card>
      </CollapseEL>

      <CollapseEL isOpened={ false }>
        <Card title="供应商自我介绍" id="supp">
          <FormEL items={introduction} record={edpPbSupp} readOnly={ readOnly } onFieldsChange={handleFormChange} />
        </Card>
      </CollapseEL>
    </div>
  );
};

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