import React from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Card, message } from 'antd';
import { EditableDataTable, FormEL } from '../../../components';
import { formUtils } from '../../../utils';
import { Toolbar } from '../../components';

const Detail = ({ user, returnOrderDetails, dispatch, loading }) => {
  const { mode, list, currentItem, formData } = returnOrderDetails;

  const domain = 'returnOrderDetails';
  const domainCN = '退货单明细';

  let readOnly = true;

  //基本信息form
  const basic = [
    {
      title: '退货单编号',
      dataIndex: 'faultCode',
    }, {
      title: '退货单状态',
      dataIndex: 'faultName',
    }, {
      title: '退货单类型',
      dataIndex: 'faultType',
    }, {
      title: '制单人员',
      dataIndex: 'agentCode',
    }, {
      title: '制单日期',
      dataIndex: 'bidMoney',
    }, {
      title: '退货日期',
      dataIndex: 'storageDate',
    }, {
      title: '退货单位',
      dataIndex: 'returnUnit',
    }, {
      title: '供应商名称',
      dataIndex: 'supplierName',
    }, {
      title: '供应商地址',
      dataIndex: 'supplierAddress',
    }, {
      title: '总金额',
      dataIndex: 'amount',
    }, {
      title: '币种',
      dataIndex: 'currency',
    }, {
      title: '备注',
      dataIndex: 'remark',
    }];

  //物料列
  const tableProps = {
    rowKey: 'id',
    scroll: {
      x: '100%',
      y: 400,
    },
    domain: domain,
    dispatch,
    loading,
    dataSource: list,
    size: 'small',
    rowSelection: null,
    footer: null,
    readOnly,
    columns: [{
      title: '退货单编号',
      dataIndex: 'materialCode',
      width: '10%',
    }, {
      title: '物料名称',
      dataIndex: 'materialname',
      width: '10%',
    }, {
      title: '物料规格',
      dataIndex: 'materialmode',
      width: '8%',
    }, {
      title: '本次退货数量',
      dataIndex: 'materialnumber',
      width: '8%',
    }, {
      title: '单位',
      dataIndex: 'materialunit',
      width: '8%',
    }, {
      title: '单价',
      dataIndex: 'materialprice',
      width: '8%',
    }, {
      title: '总价',
      dataIndex: 'materialamount',
      width: '8%',
    }, {
      title: '备注',
      dataIndex: 'remark',
      width: '15%',
    }],
  };

  /**
   * @param key      字段名
   * @param index    行号
   * @param newValue 新值
   */
  const handleChange = (key, index, newValue) => {
    dispatch({ type: `${domain}/updateCell`, payload: { key, index, value: newValue } });
  };

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

    if (key === 'productCode') {
      // console.log('21333333333', field[key]);
      if (field[key] !== null) {
        dispatch({
          type: `${domain}/updateSpecNo`,
          payload: {
            productCode: field[key],
          },
        });
      } else {
        dispatch({
          type: `${domain}/updateForm`,
          payload: {
            key: 'specNo',
            value: null,
          },
        });
      }
    } else if (key === 'dutyType') {
      dispatch({ type: `${domain}/updateOuId`, payload: { value: field[key] } });
    }

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

  const handleSave = () => {
    // 检查票故障更换件信息必填
    // console.log(faultForm.list);
    if (returnOrderDetails.list.length && formUtils.checkEmptyField(returnOrderDetails.list, tableProps.columns) === true) {
      message.error('请输入故障更换件信息的必填项', 3);
      return 0;
    }
  };

  let reason = '';

  const handleClose = () => {
    if (reason === '') {
      message.error('请填写关闭原因');
      return;
    }
  };

  const handleCreate = () => {
    dispatch(routerRedux.push(`/fault/forms/create`));
  };

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

  const handleCloseReasonChange = (e) => {
    reason = e.target.value;
  };

  return (
    <div style={{ height: '100%' }}>

      <Toolbar
        domain={domain}
        loading={loading}
        formData={formData}
        readOnly={readOnly}
        mode={mode}
        buttons={[]}
        handleSave={handleSave}
        handleCancel={handleCancel}
      />
      {/*handleDispatch={handleDispatch}*/}
      {/*handleReject={handleReject}*/}
      {/*handleApprove={handleApprove}*/}

      {/*handleCancel={handleCancel}*/}

      {/*handleAdviceChange={handleAdviceChange}*/}


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

      <Card title="退货单明细列表" loading={loading.effects[`${domain}/query`]}  id="material">
        <EditableDataTable {...tableProps} />
      </Card>

    </div>);
};

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