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

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

const SuppInvoiceForm = ({ dispatch, suppInvoiceForm, loading }) => {
  const { list, total, accountBtn, invBtn } = suppInvoiceForm;
  const domain = 'suppInvoiceForm';

  const tableProps = {
    rowKey: 'id',
    limit: stringUtils.queryURL('limit'),
    offset: stringUtils.queryURL('offset'),
    sortBy: stringUtils.queryURL('sortBy') || 'id',
    sortDirection: stringUtils.queryURL('sortDirection') || 'DESC',
    scroll: {
      x: '170%',
      y: 400,
    },
    domain,
    dispatch,
    loading,
    showAdd: false,
    showEdit: false,
    showDelete: false,
    total,
    dataSource: list,
    handleDownload: {
      requestUrl: `${exportExcelURL}/invItem`,
      requestParam: window.location.search,
    },
    filter: [{
      title: '发票代码',
      dataIndex: 'invNo',
      options: {
        initialValue: stringUtils.queryURL('invNo'),
      },
    },{
      title: '发票号码',
      dataIndex: 'invIdCode',
      options: {
        initialValue: stringUtils.queryURL('invIdCode'),
      },
    }, {
      title: '形式发票编号',
      dataIndex: 'invNoInv',
      options: {
        initialValue: stringUtils.queryURL('invNoInv'),
      },
    }, {
      title: '对账单编号',
      dataIndex: 'checkNo',
      options: {
        initialValue: stringUtils.queryURL('checkNo'),
      }
    }, {
      title: '供应商名称',
      dataIndex: 'suppName',
      tag: <Input placeholder="请输入名称/编号" />,
      options: {
        initialValue: stringUtils.queryURL('suppName'),
      },
    }, {
      title: '企业名称',
      dataIndex: 'ouName',
      tag: <Input placeholder="请输入名称/编号" />,
      options: {
        initialValue: stringUtils.queryURL('ouName'),
      },
    },
    // {
    //   title: '发票形式',  // 预制发票,或正式发票
    //   dataIndex: 'invType',
    //   options: {
    //     initialValue: stringUtils.queryURL('invType'),
    //   },
    //   tag: <UdcSelect domain="SRM" code="INV_FORM" />,
    // },
    {
      title: '发票验证状态',
      dataIndex: 'invStatus',
      options: {
        initialValue: stringUtils.queryURL('invStatus'),
      },
      tag: <UdcSelect domain="SRM" code="INV_CHECK_STATUS" />,
    }, {
      title: '发票种类',
      dataIndex: 'invClass',
      options: {
        initialValue: stringUtils.queryURL('invClass'),
      },
      tag: <UdcSelect domain="SRM" code="INV_TYPE" />,
    }],
    columns: [{
      title: '企业编号',
      dataIndex: 'ouCode',
      sorter: true,
      width: '5%',
    }, {
      title: '企业名称',
      dataIndex: 'ouName',
      className: 'alignLeft',
      sorter: false,
      width: '8%',
      render: (value) => {
        if (value) {
          return value.length > 10 ? <Tooltip placement="bottom" title={value}>
            {value && `${value.slice(0, 10)}...`}
          </Tooltip> : value;
        } else {
          return '无';
        }
      },
    },
    // {
    //   title: '发票形式',
    //   dataIndex: 'invTypeName',
    //   sorter: false,
    //   width: '4%',
    // },
    {
      title: '发票代码',
      dataIndex: 'invNo',
      sorter: true,
      width: '6%',
    }, {
      title: '发票种类',
      dataIndex: 'invClassDesc',
      width: '6%',
    }, {
      title: '发票号码',
      dataIndex: 'invIdCode',
      sorter: true,
      width: '5%',
    }, {
      title: '形式发票编号',
      dataIndex: 'invNoInv',
      sorter: true,
      width: '7%',
    }, {
      title: '对账单编号',
      dataIndex: 'checkNo',
      sorter: true,
      width: '8%',
    }, {
      title: '发票验证状态',
      dataIndex: 'invStatusName',
      sorter: false,
      width: '6%',
    }, {
      title: '开票日期',
      dataIndex: 'invDate',
      sorter: false,
      width: '5%',
    }, {
      title: '供应商编号',
      dataIndex: 'suppCode',
      sorter: true,
      width: '6%',
    }, {
      title: '供应商名称',
      dataIndex: 'suppName',
      className: 'alignLeft',
      sorter: false,
      width: '8%',
      render: (value) => {
        if (value) {
          return value.length > 10 ? <Tooltip placement="bottom" title={value}>
            {value && `${value.slice(0, 10)}...`}
          </Tooltip> : value;
        } else {
          return '无';
        }
      },
    }, {
      title: '发票校验码',
      dataIndex: 'invSymbol',
      sorter: false,
      width: '5%',
    }, {
      title: '发票金额',
      dataIndex: 'invAmt',
      className: 'alignRight',
      sorter: false,
      width: '5%',
      render: (value) => {
        return (
          numberUtils.round_half_up_format(value, 2)
        );
      }
    }, {
      title: '未税金额',
      dataIndex: 'netAmt',
      className: 'alignRight',
      sorter: false,
      width: '5%',
      render: (value) => {
        return (
          numberUtils.round_half_up_format(value, 2)
        );
      }
    }, {
      title: '税率',
      dataIndex: 'taxVal',
      sorter: false,
      width: '5%',
    }, {
      title: '税额',
      dataIndex: 'taxAmt',
      className: 'alignRight',
      sorter: false,
      width: '5%',
      render: (value) => {
        return (
          numberUtils.round_half_up_format(value, 2)
        );
      }
    }, {
      title: '备注',
      dataIndex: 'remark',
      className: 'alignLeft',
      width: '8%',
      key: 'remark',
      render: (value) => {
        if (value) {
          return value.length > 5 ? <Tooltip placement="bottom" title={value}>
            {value && `${value.slice(0, 5)}...`}
          </Tooltip> : value;
        } else {
          return '无';
        }
      },
    }],
    buttons: [{
      key: 'viewAccount',
      type: 'primary',
      name: '查看对账单',
      requiredSelected: 1,
      hidden: accountBtn,
      disabled: accountBtn,
      cb: (selectedRowKeys, searchBarForm, selectedRows) => {
        dispatch({
          type: `${domain}/goToAccount`,
          payload: {
            id: selectedRowKeys[0],
            selectedRows,
          },
        });
      },
    }, {
      key: 'viewPFInv',
      type: 'primary',
      name: '查看汇总形式发票',
      requiredSelected: 1,
      hidden: invBtn,
      disabled: invBtn,
      cb: (selectedRowKeys, searchBarForm, selectedRows) => {
        dispatch({
          type: `${domain}/goToInv`,
          payload: {
            id: selectedRowKeys[0],
            selectedRows,
          },
        });
      },
    }],
  };

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

};

export default connect(({ suppInvoiceForm, loading }) => ({ suppInvoiceForm, loading }))(SuppInvoiceForm);
