import React from 'react';
import { connect } from 'dva';
import { Button, Card, DatePicker, Checkbox, Input,} from 'antd';
import { EditableDataTable, FormEL } from '@components';
import UdcSelect from './UdcSelect';
import SuggestSelect from './SuggestSelect';
import { dataUtils, formUtils } from '@utils';
import styles from './index.less';
import moment from 'moment';

const Register = ({ dispatch, register, loading }) => {
  const { addrContacts, edpPbSupp } = register;
  const { TextArea } = Input;

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

  const domain = 'register';
  const supp = [ {
    title: '供应商名称',
    dataIndex: 'suppName',
    options: {
      rules: [
        {
          required: true,
          whitespace: true,
          message: '必填',
        },
        {
          max: 200,
          message: '请输入不超过200个字符',
        },
      ],
    },
    tag: <Input />,
  }, {
    title: '供货区域',
    dataIndex: 'region',
    options: {
      rules: [
        {
          required: true,
          message: '必填',
        },
      ],
    },
    tag: <SuggestSelect apiName="reRegions" mode="multiple"/>,
  },{
    title: '注册地(城市)',
    dataIndex: 'registerCity',
    tag: <SuggestSelect apiName="reCity"/>,
  }, {
    title: '供应商简称',
    dataIndex: 'suppAbbr',
    tag: <Input />,
    options: {
      rules: [
        {
          max: 100,
          message: '请输入不超过100个字符',
        },
      ],
    },
  },  {
    title: '供应商类型',
    dataIndex: 'suppType',
    options: {
      rules: [
        {
          required: true,
          message: '必填',
        },
      ],
    },
    tag: <UdcSelect domain="SUPP" code="SUPP_TYPE" />,
  },   {
    title: '注册地址',
    dataIndex: 'registerAddress',
    tag: <Input />,
    options: {
      rules: [
        {
          max: 100,
          message: '请输入不超过100个字符',
        },
      ],
    },
  }, {
    title: '营业执照号',
    dataIndex: 'icRegisterNo',
    options: {
      rules: [
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ],
    },
    tag: <Input />,
  }, {
    title: '供应商性质',
    dataIndex: 'gysxz',
    tag: <UdcSelect domain="REG" code="GYSXZ"  mode="multiple"/>,
    options: {
      rules: [
        {
          required: true,
          message: '必填',
        },
      ],
    },
  },{
    title: '注册资金',
    dataIndex: 'registerFund',
    options: {
      rules: [
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ],
    },
    tag: <Input addonAfter="万元"/>,
  // }, {
  //   title: '税务登记号',
  //   dataIndex: 'invTaxno',
  //   options: {
  //     rules: [
  //       {
  //         max: 40,
  //         message: '请输入不超过40个字符',
  //       },
  //     ],
  //   },
  //   tag: <Input />,
  },{
    title: '企业性质',
    dataIndex: 'gysxz1',
    tag: <UdcSelect domain="REG" code="GYSXZ1"  mode="multiple" />,
  }, {
    title: '公司总人数',
    dataIndex: 'compScale',
    options: {
      rules: [
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ],
    },
    tag: <Input />,
  },{
    title: '官方网站',
    dataIndex: 'webaddress',
    tag: <Input />,
    options: {
      rules: [
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ],
    },
  },{
    title: '纳税性质',
    dataIndex: 'gysxz2',
    tag: <UdcSelect domain="REG" code="GYSXZ2"  mode="multiple"/>,
  },  {
    title: '创立日期',
    dataIndex: 'registerDate',
    tag: <DatePicker style={{ width: '100%' }} disabledDate={disabledDate}/>,
  },  {
    title: '供应渠道',
    dataIndex: 'gyqd',
    options: {},
    tag: <UdcSelect domain="REG" code="GYQD"  mode="multiple" />,
  // }, {
  //   title: '引入原因',
  //   dataIndex: 'enroleDesc',
  //   options: {
  //     rules: [
  //       {
  //         max: 200,
  //         message: '请输入不超过200个字符',
  //       },
  //     ],
  //   },
  //   tag: <TextArea autosize={{ minRows: 2, maxRows: 6 }} style={{ width: '100%' }} />,
  }, {
    title: '蜀海供应商',
    dataIndex: 'shuhai',
    tag: <Checkbox checked={edpPbSupp.shuhai} />,
  }];

  const account = [ {
    title: '开户银行',
    dataIndex: 'suppBank',
    tag: <SuggestSelect apiName="reBank"  />,
  },  {
    title: '默认发票类型',
    dataIndex: 'invType',
    tag: <UdcSelect domain="SRM" code="INV_TYPE"  />,
  }, {
    title: '是否自产自销资质',
    dataIndex: 'agriSupp',
    tag: <UdcSelect domain="SRM" code="ARGI_SUPP" />,
    options: {
      rules: [
        {
          required: true,
          message: '必填',
        },
      ],
    },
  }, {
    title: '银行支行',
    dataIndex: 'bankBranch',
    options: {
      rules: [
        {
          max: 200,
          message: '请输入不超过200个字符',
        },
      ],
    },
    tag: <Input />,
  }, {
    title: '发票类型2',
    dataIndex: 'invType2',
    tag: <UdcSelect domain="SRM" code="INV_TYPE"  />,
  }, {
    title: '默认税率',
    dataIndex: 'taxRate',
    tag: <SuggestSelect apiName="retax" />,
  },{
    title: '银行账户',
    dataIndex: 'bankAccount',
    options: {
      rules: [
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ],
    },
    tag: <Input />,
  },{
    title: '发票类型3',
    dataIndex: 'invType3',
    tag: <UdcSelect domain="SRM" code="INV_TYPE" />,
  }, {
    title: '税率2',
    dataIndex: 'taxRate2',
    tag: <SuggestSelect apiName="retax"  />,
  }, {
    title: '币种',
    dataIndex: 'currId',
    tag: <SuggestSelect apiName="reCurrs" />,
  }, {
    title: '发票类型4',
    dataIndex: 'invType4',
    tag: <UdcSelect domain="SRM" code="INV_TYPE" />,
  }, {
    title: '税率3',
    dataIndex: 'taxRate3',
    tag: <SuggestSelect apiName="retax"  />,
  },{
    title: '付款方式',
    dataIndex: 'payMethod',
    tag: <UdcSelect domain="SRM" code="PAYMENT_METHOD" />,
  },{
    title: '付款条款',
    dataIndex: 'paymentTerm',
    tag: <UdcSelect domain="SRM" code="PAYMENT_TERM" />,
  }, {
    title: '税率4',
    dataIndex: 'taxRate4',
    tag: <SuggestSelect apiName="retax" />,
  },];

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

    },
    tag: <Input />,
  },  {
    title: '传真号码',
    dataIndex: 'suppFax',
    tag: <Input  />,
    options: {
      rules: [
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ],
    },
  }, {
    title: '负责人电话',
    dataIndex: 'bussPicTel',
    options: {
      rules: [
        {
          required: true,
          whitespace: true,
          message: '必填',
        },
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ],
    },
    tag: <Input />,
  }, {
    title: '法人电话',
    dataIndex: 'reprTel',
    options: {
      rules: [
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ],
    },
    tag: <Input/>,
  },  {
    title: '电子邮箱',
    dataIndex: 'email',
    options: {
      rules: [
        {
          type: 'email',
          message: '请输入邮箱',
        },
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ],
    },
    tag: <Input  />,
  }, {
    title: '负责人邮箱',
    dataIndex: 'bussPicMail',
    options: {
      rules: [
        {
          required: true,
          whitespace: true,
          message: '必填',
        },
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
        {
          type: 'email',
          message: '请输入邮箱',
        },
      ],
    },
    tag: <Input />,
  },{
    title: '法人邮箱',
    dataIndex: 'reprMail',
    options: {
      rules: [
        {
          type: 'email',
          message: '请输入邮箱',
        },
        {
          max: 40,
          message: '请输入不超过40个字符',
        },
      ],
    },
    tag: <Input />,
  }, {
    title: '联系地址',
    dataIndex: 'contactAddr',
    options: {
      rules: [
        {
          required: true,
          whitespace: true,
          message: '必填',
        },
        {
          max: 100,
          message: '请输入不超过40个字符',
        },
      ],
    },
    tag: <Input />,
  },  {
    title: '负责人职位',
    dataIndex: 'bussPicPosition',
    options: {
      rules: [
        {
          required: true,
          message: '必填',
        },
      ],
    },
    tag: <UdcSelect domain="SRM" code="POSITION" />,
  }, ];

  const addrTableProps = {
    rowKey: 'id',
    scroll: {
      x: '100%',
      y: 400,
    },
    domain: domain,
    dispatch,
    loading,
    dataSource: addrContacts,
    showAdd: false,
    showDelete: false,
    showCopy: false,
    size: 'small',
    enableSelection: true,
    columns: [{
      title: '联系人',
      dataIndex: 'contPerson',
      width: '15%',
      render: (value, row, index) => {
        return (<Input
          value={value}
          disabled={false}
          size="small"
          style={{ textAlign: 'left' }}
          onChange={(e) => {
            handleChange('contPerson', index, e.target.value);
          }}
        />);
      },
    },
    {
      title: '联系人类型',
      dataIndex: 'addressType',
      width: '15%',
      render: (value, row, index) => {
        return (<SuggestSelect apiName="reAddr"
          value={value}
          size="small"
          disabled={false}
          onChange={(e) => {
            handleChange('addressType', index, e);
          }} />);
      },
    },{
        title: '联系人职位',
        dataIndex: 'position',
        width: '14%',
        render: (value, row, index) => {
          return (<UdcSelect domain="SRM"
           code="POSITION"
           size="small"
           value={value}
           onChange={(e) => {
             handleChange('position', index, e);
           }}
          />);
        },

      },
     {
      title: '联系电话',
      dataIndex: 'tel',
      width: '15%',
      render: (value, row, index) => {
        return (<Input
          value={value}
          size="small"
          disabled={false}
          style={{ textAlign: 'left' }}
          onChange={(e) => {
            handleChange('tel', index, e.target.value);
          }}
        />);
      },
    }, {
      title: '电子邮箱',
      dataIndex: 'email',
      width: '15%',
      render: (value, row, index) => {
        return (<Input
          value={value}
          disabled={false}
          style={{ textAlign: 'left' }}
          size="small"
          onChange={(e) => {
            handleChange('email', index, e.target.value);
          }}
        />);
      },
    }, {
      title: '详细地址',
      dataIndex: 'detailaddr',
      width: '40%',
      render: (value, row, index) => {
        return (<Input
          value={value}
          size="small"
          disabled={false}
          style={{ textAlign: 'left' }}
          onChange={(e) => {
            handleChange('detailaddr', index, e.target.value);
          }}
        />);
      },
    }],
    buttons: [{
      key: 'addAddrRow',
      type: 'primary',
      name: '新增',
      requiredSelected: 0,
      cb: (selectedRowKeys) => {
        let newData = {};
        addrTableProps.columns.forEach((item) => {
          newData[item.dataIndex] = null;
        });
        newData.id = dataUtils.getRandomInt(-99999999, -1);
        dispatch({
          type: `${domain}/addAddrRow`,
          payload: { ...newData },
        });
      },
    }, {
      key: 'deleteAddrRow',
      type: 'primary',
      name: '删除',
      requiredSelected: 2,
      cb: (selectedRowKeys) => {
        selectedRowKeys.forEach(id => {
          dispatch({
            type: `${domain}/deleteAddrRow`,
            payload: id,
          });
        });
      },
    }],
  };

  const handleFormChange = (field) => {
    const key = Object.keys(field)[0];

    dispatch({
      type: `${domain}/updateForm`,
      payload: {
        key,
        value: field[key],
      },
    });
  };

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


  const getDefaultValues = () => {
    let init = {};
    supp.forEach((item) => {
      if (item.options && item.options.initialValue) {
        init[item.dataIndex] = item.options.initialValue;
      }
    });

    return init;
  };

  const prev = () => {
    dispatch({
      type: `${domain}/minusCurrent`,
    });
  };

  const next = () => {
    formUtils.validateForm([...supp,...account,...addr,], Object.assign(getDefaultValues(), edpPbSupp,), () => {
      //dispatch({ type: `${domain}/save`, payload: getDefaultValues() });
      dispatch({
        type: `${domain}/qualify`,
      });

      dispatch({
        type: `${domain}/addCurrent`,
      });
    });


  };

  return (
    <div>

      <Card title="基础信息" id="supp">
        <FormEL items={supp} record={edpPbSupp} onFieldsChange={handleFormChange} />
      </Card>

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

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

      <div className={styles.registerButton}>
        <Button  onClick={prev}> 返回 </Button>
        <Button style={{ marginLeft: 8 }} type="primary" onClick={next}>下一步</Button>
      </div>
    </div>
  );
};

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


