import { Input, Tooltip } from 'antd';
import { connect } from 'dva';
import React from 'react';
import { DataTable, UdcSelect, SuggestSelect } from '@components';
import { config, stringUtils } from '@utils';
import { numberUtils } from '@utils';

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

const ProFormaInvForm = ({ dispatch, proFormaInv, loading }) => {
  const { list, total, editBtn, apprBtn } = proFormaInv;
  const domain = 'proFormaInv';

  const tableProps = {
    rowKey: 'id',
    limit: stringUtils.queryURL('limit'),
    offset: stringUtils.queryURL('offset'),
    sortBy: stringUtils.queryURL('sortBy') || 'id',
    sortDirection: stringUtils.queryURL('sortDirection') || 'DESC',
    scroll: {
      x: '120%',
      y: 400,
    },
    domain,
    dispatch,
    loading,
    showAdd: false,
    showEdit: false,
    showDelete: false,
    total,
    dataSource: list,
    handleDownload: {
      requestUrl: `${exportExcelURL}/inv`,
      requestParam: window.location.search,
    },
    filter: [{
      title: '形式发票编号',
      dataIndex: 'invNo',
      options: {
        initialValue: stringUtils.queryURL('invNo'),
      },
    }, {
      title: '供应商名称',
      dataIndex: 'suppName',
      tag: <Input placeholder="请输入名称/编号" />,
      options: {
        initialValue: stringUtils.queryURL('suppName'),
      },
    }, {
      title: '企业名称',
      dataIndex: 'ouName',
      tag: <Input placeholder="请输入名称/编号" />,
      options: {
        initialValue: stringUtils.queryURL('ouName'),
      },
    },
    // {
    //   title: '发票形式', // 正式发票或形式发票
    //   dataIndex: 'invForm',
    //   options: {
    //     initialValue: stringUtils.queryURL('invForm'),
    //   },
    //   tag: <UdcSelect domain="SRM" code="INV_FORM" />,
    //   // }, {
    //   // title: '发票状态',
    //   // dataIndex: 'invStatus',
    //   // options: {
    //   //   initialValue: stringUtils.queryURL('invStatus'),
    //   // },
    //   // tag: <UdcSelect domain="SRM" code="INV_STATUS"/>,
    //   // }, {
    //   //   title: '审批状态',
    //   //   dataIndex: 'approveStatus',
    //   //   options: {
    //   //     initialValue: stringUtils.queryURL('approveStatus'),
    //   //   },
    //   //   tag: <UdcSelect domain="SRM" code="APPROVE_STATUS"/>,
    // },
    {
      title: '任务节点',
      dataIndex: 'activeTaskKey',
      options: {
        initialValue: stringUtils.queryURL('activeTaskKey'),
      },
      tag: <SuggestSelect apiName="taskDefs" params={{ defKeys: ['Invoice'] }} optionKey="code" />,
    }, {
      title: '流程状态',
      dataIndex: 'bpmStatus',
      options: {
        initialValue: stringUtils.queryURL('bpmStatus'),
      },
      tag: <UdcSelect domain="SRM" code="TRANSACT_STATUS" />,
    }],
    columns: [{
      title: '形式发票编号',
      dataIndex: 'invNo',
      sorter: true,
      width: '11%',
    },
    // {
    //   title: '发票形式',
    //   dataIndex: 'invFormName',
    //   sorter: false,
    //   width: '6%',
    // },
    {
      title: '发票状态',
      dataIndex: 'invStatusName',
      sorter: false,
      width: '6%',
    }, {
      title: '审批状态',
      dataIndex: 'approveStatusName',
      sorter: false,
      width: '8%',
    }, {
      title: '当前任务',
      dataIndex: 'activeTaskName',
      className: 'alignLeft',
      width: '13%',
    }, {
      title: '发票金额',
      dataIndex: 'invAmt',
      className: 'alignRight',
      sorter: false,
      width: '8%',
      render: (value) => {
        return (numberUtils.round_half_up_format(value, 2))
      }
    }, {
      title: '币种',
      dataIndex: 'currName',
      sorter: false,
      width: '5%',
    }, {
      title: '企业编号',
      dataIndex: 'ouCode',
      sorter: true,
      width: '7%',
    }, {
      title: '企业名称',
      dataIndex: 'ouName',
      className: 'alignLeft',
      sorter: false,
      width: '14%',
      render: (value, row, index) => {
        if (value) {
          return value.length > 12 ? (
            <Tooltip placement="bottom" title={value}> {value && `${value.slice(0, 12)}...`} </Tooltip>) : value;
        } else {
          return '';
        }
      },
    }, {
      title: '供应商编号',
      dataIndex: 'suppCode',
      sorter: true,
      width: '7%',
    }, {
      title: '供应商名称',
      dataIndex: 'suppName',
      className: 'alignLeft',
      sorter: false,
      width: '14%',
      render: (value, row, index) => {
        if (value) {
          return value.length > 12 ? (
            <Tooltip placement="bottom" title={value}> {value && `${value.slice(0, 12)}...`} </Tooltip>) : value;
        } else {
          return '';
        }
      },
    }],
    buttons: [{
      key: 'update',
      type: 'primary',
      name: '编辑',
      hidden: editBtn,
      disabled: editBtn,
      requiredSelected: 1,
      cb: (selectedKeys, searchBarForm, selectedRows) => {
        dispatch({
          type: `${domain}/getSingle`,
          payload: {
            mode: 'update',
            id: selectedKeys[0],
            row: selectedRows[0],
          },
        });
      },
    }, {
      key: 'approval',
      type: 'primary',
      name: '审核',
      hidden: apprBtn,
      disabled: apprBtn,
      requiredSelected: 1,
      cb: (selectedKeys, searchBarForm, selectedRows) => {
        dispatch({
          type: `${domain}/getSingle`,
          payload: {
            mode: 'approval',
            id: selectedKeys[0],
            row: selectedRows[0],
          },
        });
      },
    }],
  };

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

};

export default connect(({ proFormaInv, loading }) => ({ proFormaInv, loading }))(ProFormaInvForm);
