import React from 'react';
import { connect } from 'dva';
import { stringUtils, config, dataUtils } from '@utils';
import { DataTable, UdcSelect, SuggestSelect } from '@components';
import { DatePicker, Input, Tooltip } from 'antd';
import moment from 'moment';
const RangePicker = DatePicker.RangePicker;
const { api } = config;
const { excel } = api;
const { exportExcelURL } = excel;

const ClaimOrder = ({ dispatch, claimOrder, loading }) => {
  const { list, total, supplier, showMenu } = claimOrder;
  const domain = 'claimOrder';
  const domainCN = '索赔单列表';
  const monthFormat = 'YYYY-MM-DD';
  const formatter = (value) => {
    return (
      value ? `${parseFloat(value).toFixed(2)}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : ''
    );
  };

  const tableProps = {
    rowKey: 'id',
    limit: stringUtils.queryURL('limit'),
    offset: stringUtils.queryURL('offset'),
    sortBy: stringUtils.queryURL('sortBy') || 'docNo',
    sortDirection: stringUtils.queryURL('sortDirection') || 'DESC',
    scroll: { x: '160%' },
    domain,
    dispatch,
    loading,
    total,
    showAdd: showMenu[0],
    showEdit: showMenu[1],
    showDelete: false,
    dataSource: list,
    handleDownload: {
      requestUrl: `${exportExcelURL}/co`,
      requestParam: window.location.search,
    },
    filter: [{
      title: '索赔单编号',
      dataIndex: 'docNo',
      options: {
        initialValue: supplier.docNo,
      },
    }, {
      title: '供应商',
      dataIndex: 'suppCode',
      tag: <Input placeholder="请输入名称/编号" disabled={supplier.supplier} />,
      options: {
        initialValue: supplier.supplier ? supplier.suppName.trim() : supplier.suppCode,
      },
    }, {
      title: '制单日期',
      dataIndex: 'docDate',
      tag: <RangePicker format="YYYY-MM-DD" style={{ width: '100%' }} />,
      options: {
        initialValue: supplier.docDateFrom ?
          [moment(supplier.docDateFrom, monthFormat), moment(supplier.docDateTo, monthFormat)] : '',
      },
    }, {
      title: '索赔方式',
      dataIndex: 'compsMode',
      tag: <UdcSelect domain="SRM" code="COMPS_MODE" />,
      options: {
        initialValue: supplier.compsMode,
      },
    }, {
      title: '索赔类型',
      dataIndex: 'compsType',
      tag: <UdcSelect domain="SRM" code="COMPS_TYPE" />,
      options: {
        initialValue: supplier.compsType,
      },
    }, {
      title: '单据状态',
      dataIndex: 'docStatus',
      // tag: <UdcSelect domain="SRM" code="COMPS_STATUS" />,
      tag: <SuggestSelect apiName="ocStatus" />,
      options: {
        initialValue: supplier.docStatus,
      },
    }, {
      title: '8D报告编号',
      dataIndex: 'docNo8D',
      options: {
        initialValue: supplier.docNo8D,
      },
    }, {
      title: '任务节点',
      dataIndex: 'activeTaskKey',
      options: {
        initialValue: supplier.activeTaskKey,
      },
      tag: <SuggestSelect apiName="taskDefs" params={{ defKeys: ['StatementOfClaim'] }} optionKey="code" />,
    }, {
      title: '流程状态',
      dataIndex: 'bpmStatus',
      options: {
        initialValue: supplier.bpmStatus || 'NONE',
      },
      tag: <UdcSelect domain="SRM" code="TRANSACT_STATUS" />,
    }],
    columns: [{
      title: '索赔单编号',
      dataIndex: 'docNo',
      width: '9%',
    }, {
      title: '供应商编号',
      dataIndex: 'suppCode',
      width: '5%',
    }, {
      title: '供应商名称',
      dataIndex: 'suppName',
      width: '7%',
      className: 'alignLeft noWrap',
    }, {
      title: '单据状态',
      dataIndex: 'docStatusName',
      width: '5%',
    }, {
      title: '当前任务',
      dataIndex: 'activeTaskName',
      className: 'alignLeft',
      width: '7%',
    }, {
      title: '索赔方式',
      dataIndex: 'compsModeName',
      width: '6%',
    }, {
      title: '索赔类型',
      dataIndex: 'compsTypeName',
      width: '5%',
    },{
      title: '总金额',
      dataIndex: 'amt',
      width: '3%',
      className: 'alignRight',
      render: formatter,
    }, {
      title: '联系人',
      dataIndex: 'contPerson',
      width: '5%',
    }, {
      title: '联系电话',
      dataIndex: 'contTel',
      width: '8%',
    }, {
      title: '制单日期',
      dataIndex: 'docDate',
      width: '6%',
    }, {
      title: '确认完成时间',
      dataIndex: 'completeTime',
      width: '7%',
      render: (value, row, index) => {
        return (
          row.approveStatusName === '已审核' &&
          dataUtils.dtm(value)
        )
      }
    }, {
      title: '8D报告编号',
      dataIndex: 'docNo8D',
      width: '9%',
    }, {
      title: '币种',
      dataIndex: 'currName',
      width: '5%',
    }, {
      title: '索赔原因',
      dataIndex: 'remark',
      width: '13%',
      className: 'alignLeft',
      render: (value, row, index) => {
        if (value) {
          return value.length > 12 ? <Tooltip placement="topLeft" title={value}>
            {value && `${value.slice(0, 12)}...`}
          </Tooltip> : value;
        }
      },
    }],
    buttons: [{
      key: 'approve',
      type: 'primary',
      name: '审批',
      hidden: !showMenu[2],
      requiredSelected: 1,
      cb: (selectedKeys) => {
        dispatch({
          type: `${domain}/getSingle`,
          payload: {
            id: selectedKeys,
            mode: 'approve',
          },
        });
      },
    }, {
      key: 'remove',
      type: 'primary',
      name: '删除',
      hidden: !showMenu[3],
      requiredSelected: 1,
      cb: (selectedKeys) => {
        dispatch({
          type: `${domain}/remove`,
          payload: { id: selectedKeys },
        });
      },
    }],
  };

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

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