
import { Icon, Input, InputNumber } from 'antd';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import moment from 'moment';
import React from 'react';
import { DataTable, MonthPicker } from '../../../components';
import { stringUtils, config } from '../../../utils';
import { CascaderItem } from '../../components';

const { api } = config;
const { excel } = api;
const { exportExcelURL } = excel;

const ReferPrices = ({ dispatch, referprices, loading }) => {
  const { list, total } = referprices;

  const domain = 'referprices';
  // 接收路径上的参数
  const cCode = stringUtils.queryURL('cccCode');
  const cccCode = cCode ? cCode.split('%2C') : [];
  const yearMonthDateForm = stringUtils.queryURL('yearMonthDateFrom');
  const yearMonthDateTo = stringUtils.queryURL('yearMonthDateTo');
  const yearMonthDate = yearMonthDateForm && yearMonthDateTo ? [moment(yearMonthDateForm, 'YYYY-MM-DD'), moment(yearMonthDateTo, 'YYYY-MM-DD')] : [];
  // 更改字段
  const handleUpdateValue = (dataIndex, index, newValue) => {
    dispatch({
      type: `${domain}/updateCell`,
      payload: { index, dataIndex, newValue }
    });
  };

  const formatAmtInput = (value, row, num, dataIndex) => {
    return (
      <InputNumber value={value} max={99999999} min={0} precision={4} step={0.0001} style={{ width: '100%' }}
        formatter={(value) => {
          var parts = value.toString().split(".");
          parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
          return parts.join(".");
        }}
        parser={(e) => e.replace(/\$\s?|(,*)/g, '')}
        disabled={!row.editable}
        onChange={(e) => handleUpdateValue(dataIndex, num, e)}
      />
    );
  };
  const tableProps = {
    rowKey: 'id',
    limit: stringUtils.queryURL('limit'),
    offset: stringUtils.queryURL('offset'),
    sortBy: stringUtils.queryURL('sortBy') || 'outerCode',
    sortDirection: stringUtils.queryURL('sortDirection') || 'DESC',
    scroll: { x: '180%' },
    domain,
    dispatch,
    loading,
    total,
    dataSource: list,
    enableSelection: false,
    showAdd: false,
    showDelete: false,
    showView: false,
    showEdit: false,
    handleDownload: {
      requestUrl: `${exportExcelURL}/outer-price`,
      requestParam: window.location.search,
    },
    buttons: [{
      key: 'back',
      type: 'primary',
      name: '返回',
      requiredSelected: 0,
      cb: () => {
        dispatch(routerRedux.goBack());
      },
    }],
    filter: [{
      title: '物料',
      dataIndex: 'itemCode',
      tag: <Input placeholder="请输入名称/编号" />,
      options: {
        initialValue: stringUtils.queryURL('itemCode'),
      },
    }, {
      title: '物料类别',
      dataIndex: 'cccCode',
      tag: <CascaderItem placeholder="选择大类/中类/小类" changeOnSelect={true} />,
      options: {
        initialValue: cccCode,
      },
    }, {
      title: '价格期间',
      dataIndex: 'yearMonthDate',
      tag: <MonthPicker style={{ width: '50%' }} />,
      options: {
        initialValue: yearMonthDate,
      },
    }],
    columns: [{
      title: '物料编号',
      dataIndex: 'outerCode',
      className: 'alignCenter',
      sorter: true,
      width: '5%',
    }, {
      title: '物料名称',
      dataIndex: 'itemName',
      className: 'alignLeft',
      sorter: true,
      width: '7%',
    }, {
      title: '价格年月',
      dataIndex: 'yearMonth',
      className: 'alignCenter',
      sorter: true,
      width: '5%',
    }, {
      title: '品牌',
      dataIndex: 'brandName',
      className: 'alignCenter',
      sorter: false,
      width: '4%',
    }, {
      title: '规格型号',
      dataIndex: 'spec',
      className: 'alignLeft',
      sorter: false,
      width: '4%',
    }, {
      title: '网址1',
      dataIndex: 'webName1',
      className: 'alignLeft',
      sorter: false,
      width: '8%',
      render: (value, row, num) => {
        return (
          <Input value={value} disabled={!row.editable} maxLength={10}
            onChange={(e) => handleUpdateValue('webName1', num, e.target.value)}
          />
        );
      },
    }, {
      title: '1价格',
      dataIndex: 'price1',
      className: 'alignRight',
      sorter: false,
      width: '5%',
      render: (value, row, num) => {
        return (formatAmtInput(value, row, num, 'price1'));
      },
    }, {
      title: '网址2',
      dataIndex: 'webName2',
      className: 'alignLeft',
      sorter: false,
      width: '8%',
      render: (value, row, num) => {
        return (
          <Input value={value} disabled={!row.editable} maxLength={10} onChange={(e) => handleUpdateValue('webName2', num, e.target.value)}
          />
        );
      },
    }, {
      title: '2价格',
      dataIndex: 'price2',
      className: 'alignRight',
      sorter: false,
      width: '5%',
      render: (value, row, num) => {
        return (formatAmtInput(value, row, num, 'price2'));
      },
    }, {
      title: '网址3',
      dataIndex: 'webName3',
      className: 'alignLeft',
      sorter: false,
      width: '8%',
      render: (value, row, num) => {
        return (
          <Input value={value} disabled={!row.editable} maxLength={10}
            onChange={(e) => handleUpdateValue('webName3', num, e.target.value)}
          />
        );
      },
    }, {
      title: '3价格',
      dataIndex: 'price3',
      className: 'alignRight',
      sorter: false,
      width: '5%',
      render: (value, row, num) => {
        return (formatAmtInput(value, row, num, 'price3'));
      },
    }, {
      title: '网址4',
      dataIndex: 'webName4',
      className: 'alignLeft',
      sorter: false,
      width: '8%',
      render: (value, row, num) => {
        return (
          <Input value={value} disabled={!row.editable} maxLength={10}
            onChange={(e) => handleUpdateValue('webName4', num, e.target.value)}
          />
        );
      },
    }, {
      title: '4价格',
      dataIndex: 'price4',
      className: 'alignRight',
      sorter: false,
      width: '5%',
      render: (value, row, num) => {
        return (formatAmtInput(value, row, num, 'price4'));
      },
    }, {
      title: '网址5',
      dataIndex: 'webName5',
      className: 'alignLeft',
      sorter: false,
      width: '8%',
      render: (value, row, num) => {
        return (
          <Input value={value} disabled={!row.editable} maxLength={10}
            onChange={(e) => handleUpdateValue('webName5', num, e.target.value)}
          />
        );
      },
    }, {
      title: '5价格',
      dataIndex: 'price5',
      className: 'alignRight',
      sorter: false,
      width: '5%',
      render: (value, row, num) => {
        return (formatAmtInput(value, row, num, 'price5'));
      },
    }, {
      title: '币种',
      dataIndex: 'currName',
      className: 'alignCenter',
      sorter: false,
      width: '3%',
    }, {
      title: '编辑',
      dataIndex: 'edit',
      className: 'alignCenter',
      width: '6%',
      render: (value, row, index) => {
        if (row.editable) {
          return (
            <div>
              <Icon key="save" type={'check'} style={{ color: 'green', fontSize: '22px' }} onClick={() => {
                dispatch({ type: `${domain}/updateRows`, payload: { index } }); // 保存价格
              }}
              />&emsp;
              <Icon key="cancel" type={'cross'} style={{ color: 'red', fontSize: '22px' }}
                onClick={() => {
                  dispatch({ type: `${domain}/cancelRows`, payload: { index, row } });
                }}
              />
            </div>);
        } else {
          return (
            <Icon type={'edit'} style={{ color: '#3C91C2', fontSize: '22px' }}
              onClick={() => {
                dispatch({ type: `${domain}/toggleEditable`, payload: { index } });
              }}
            />);
        }

      },
    }]
  };

  return (
    <div className="content-inner">
      <DataTable {...tableProps} />
    </div>
  );
};

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