import React from 'react';
import { Input, InputNumber, DatePicker } from 'antd';
import { UdcSelect, SuggestSelect } from '@components';
import { OuPicker, SupplierPicker, ItemPicker } from '@bizComponents';
import { enums } from '@utils';
const { compsMode } = enums;

const localCfg = (record, mode, dispatch, loading, extraInfo) => {
  const { TextArea } = Input;
  const domain = 'claimOrderDetail';

  const formatter = (value) => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  const parser = (value) => value.replace(/\$\s?|(,*)/g, '');
  // 金额格式化
  const amtProps = {
    disabled: false,
    min: 0.01,
    max: 999999999.99,
    precision: 2,
    step: 0.01,
    formatter,
    parser,
    style: { width: '100%' },
  };

  // 整数格式化
  const numProps = {
    disabled: false,
    min: 0,
    max: 999999999,
    precision: 2,
    step: 1,
    formatter,
    parser,
    style: { width: '100%' },
  };

  // input - 整数(数量)
  const renderNum = (cloumn, value, row, index) => {
    return <InputNumber value={value} onChange={(e) => { handleChange(cloumn, index, e); }} {...numProps} />;
  };
  // input - 小数(金额)
  const renderAmt = (cloumn, value, row, index) => {
    return <InputNumber value={value} onChange={(e) => { handleChange(cloumn, index, e); }} {...amtProps} />;
  };
  // textarea
  const renderTextArea = (cloumn, value, row, index) => {
    return <TextArea
      value={value}
      autosize={{ minRows: 1, maxRows: 4 }}
      onChange={(e) => { handleChange(cloumn, index, e.target.value); }}
    />;
  };

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

  const onMaterialChange = (value, index) => {
    dispatch({ type: `${domain}/updateMaterial`, payload: { index, value } });
  };

  // 基本信息form
  const basicInfo = [{
    title: '索赔单号',
    dataIndex: 'docNo',
  }, {
    title: '公司',
    dataIndex: 'ouName',
    tag: <OuPicker />,
  },  {
    title: '供应商',
    dataIndex: 'suppName',
    tag: <SupplierPicker disabled={!record || record.docNo8D} filter={{ suppStatus: '02' }}/>,
  }, {
    title: '单据状态',
    dataIndex: 'docStatusName',
    // tag: <UdcSelect domain="SRM" code="COMPS_STATUS" />,
  },  {
    title: '索赔方式',
    dataIndex: 'compsMode',
    tag: <UdcSelect domain="SRM" code="COMPS_MODE" />,
  }, {
    title: '联系人',
    dataIndex: 'contPerson',
  }, {
    title: '联系电话',
    dataIndex: 'contTel',
  }, {
    title: '币种',
    dataIndex: 'currName',
  }, {
    title: '审批状态',
    dataIndex: 'approveStatusName',
  }, {
    title: '索赔类型',
    dataIndex: 'compsType',
    tag: <UdcSelect domain="SRM" code="COMPS_TYPE" />,
  }, {
    title: '制单日期',
    dataIndex: 'docDate',
  }, {
    title: '索赔日期',
    dataIndex: 'compsDate',
    tag: <DatePicker style={{ width: '100%' }} />,
  }, {
    title: '索赔原因',
    dataIndex: 'remark',
    tag: <TextArea autosize={{ minRows: 1, maxRows: 4 }} />,
    options: {
      rules: [{
        min: 0,
        max: 2000,
        message: '至多输入2000个字符',
      }],
    },
  }, {
    title: '仓库',
    dataIndex: 'mcu',
    hidden: !record || !record.compsMode || record.compsMode !== compsMode.COMPS_MODE_MONEY,
    tag: <SuggestSelect apiName="pbwh" params={record && { ouId: record.ouId, whType: '99' }}/>,
    options: {
      rules: [{
        required: record && record.compsMode === compsMode.COMPS_MODE_MONEY,
        message: '必填',
      }]
    },
  }, {
    title: '索赔金额',
    dataIndex: 'amt',
    hidden: !record || !record.compsMode || record.compsMode !== compsMode.COMPS_MODE_MONEY,
    tag: <InputNumber {...amtProps} />,
    options: {
      rules: [{
        required: record && record.compsMode === compsMode.COMPS_MODE_MONEY,
        message: '必填',
      }, {
        type: 'number',
        min: 0.01,
        message: '大于0',
      }],
    },
  }, {
    title: '8D报告编号',
    dataIndex: 'docNo8D',
    hidden: !record || !record.docNo8D,
  },];

  const materialInfo = [{
    title: '物料名称',
    dataIndex: 'itemName',
    width: '18%',
    render: (value, row, index) => {
      return (extraInfo && extraInfo.suppId) && (
        <ItemPicker
          type="multiple"
          filter={{statusList: [2], suppId: extraInfo.suppId}}
          apiName='items'
          value={{id: row.itemId, code: row.itemCode, name: row.itemName}}
          onChange={(value) => onMaterialChange(value, index)}
        />
      )
    }
  }, {
    title: '物料编号',
    dataIndex: 'itemCode',
    width: '12%',
  }, {
    title: '物料规格',
    dataIndex: 'spec',
    width: '10%',
  }, {
    title: '单位',
    dataIndex: 'uomName',
    width: '10%',
  }, {
    title: '数量',
    dataIndex: 'qty',
    width: '10%',
    options: {
      rules: [{
        type: 'number',
        message: '不是有效数字',
      }],
    },
    render: (text, record, index) => renderNum('qty', text, record, index),
  }, {
    title: '单价',
    dataIndex: 'price',
    width: '10%',
    // render: (text, record, index) => renderAmt("price", text, record, index),
  }, {
    title: '总价',
    dataIndex: 'amt',
    width: '10%',
  }, {
    title: '备注',
    dataIndex: 'remark',
    width: '20%',
    render: (text, record, index) => renderTextArea('remark', text, record, index),
    options: {
      rules: [{
        min: 0,
        max: 2000,
        message: '至多输入2000个字符',
      }],
    },
  }];

  const uploadInfo = [{
    title: '附件上传',
    dataIndex: 'upload',
  }];

  return {
    basicInfo,
    materialInfo,
    uploadInfo,
  };
};

export default localCfg;
