import { DatePicker, Input, Tooltip } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import React from 'react';
import { DataTable, UdcSelect } from '../../../components';
import { stringUtils, config } from '../../../utils';

const { RangePicker, } = DatePicker;
const dateFormat = 'YYYY-MM-DD';

const { api } = config;
const { excel } = api;
const { exportExcelURL } = excel;
import { numberUtils } from '@utils';

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

  const payDateFrom = stringUtils.queryURL('payDateFrom');
  const payDateTo = stringUtils.queryURL('payDateTo');

  const tableProps = {
    rowKey: 'id',
    limit: stringUtils.queryURL('limit'),
    offset: stringUtils.queryURL('offset'),
    sortBy: stringUtils.queryURL('sortBy') || 'id',
    sortDirection: stringUtils.queryURL('sortDirection') || 'DESC',
    scroll: {
      x: '190%',
      y: 400,
    },
    domain,
    dispatch,
    loading,
    showAdd: false,
    showEdit: false,
    showDelete: false,
    total,
    dataSource: list,
    handleDownload: {
      requestUrl: `${exportExcelURL}/payable`,
      requestParam: window.location.search,
    },
    filter: [{
      title: '凭证号',
      dataIndex: 'srcDoc',
      options: {
        initialValue: stringUtils.queryURL('srcDoc'),
      },
    }, {
      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: 'openFlag',
      options: {
        initialValue: stringUtils.queryURL('openFlag'),
      },
      tag: <UdcSelect domain="SRM" code="AP_OPEN_STAT" />,
    }, {
      title: '应付日期区间',
      dataIndex: 'payDate',  // 应付
      options: {
        initialValue: payDateFrom ? [moment(payDateFrom, dateFormat), moment(payDateTo, dateFormat)] : []
      },
      tag: <RangePicker format="YYYY-MM-DD" style={{ width: '100%' }} />,
    }],
    columns: [{
      title: '企业编号',
      dataIndex: 'ouCode',
      sorter: true,
      width: '5%',
    }, {
      title: '企业名称',
      dataIndex: 'ouName',
      className: 'alignLeft',
      sorter: false,
      width: '8%',
      render: (value, row, index) => {
        if (value) {
          return value.length > 10 ? (
            <Tooltip placement="bottom" title={value}> {value && `${value.slice(0, 10)}...`} </Tooltip>) : value;
        } else {
          return '';
        }
      },
    }, {
        title: '凭证号',
        dataIndex: 'srcDocId',
        className: 'alignLeft',
        sorter: true,
        width: '6%',
    },
    // {
    //   title: '来源单据类型',
    //   dataIndex: 'docTypeDesc',
    //   className: 'alignLeft',
    //   sorter: false,
    //   width: '6%',
    // }, {
    //   title: '来源单据编号',
    //   dataIndex: 'docNo',
    //   className: 'alignLeft',
    //   sorter: true,
    //   width: '6%',
    // },
    {
      title: '形式发票编号',
      dataIndex: 'invNo',
      sorter: true,
      width: '8%',
    }, {
      title: '应付开始日期',
      dataIndex: 'apDate',
      className: 'noWrap',
      sorter: false,
      width: '6%',
    }, {
      title: '应付到期日期',
      dataIndex: 'dueDate',
      className: 'noWrap',
      sorter: false,
      width: '6%',
    }, {
      title: '供应商编号',
      dataIndex: 'suppCode',
      sorter: true,
      width: '5%',
    }, {
      title: '供应商名称',
      dataIndex: 'suppName',
      className: 'alignLeft',
      sorter: false,
      width: '8%',
      render: (value, row, index) => {
        if (value) {
          return value.length > 10 ? (
            <Tooltip placement="bottom" title={value}> {value && `${value.slice(0, 10)}...`} </Tooltip>) : value;
        } else {
          return '';
        }
      },
    }, {
      title: '付款状态',
      dataIndex: 'openFlagDesc',
      sorter: false,
      width: '5%',
    }, {
      title: '应付金额',
      dataIndex: 'amt',
      className: 'alignRight',
      sorter: false,
      width: '5%',
      render: (value) => {
        return (
          numberUtils.round_half_up_format(value, 2)
        );
      }
    }, {
      title: '未结金额',
      dataIndex: 'openAmt',
      className: 'alignRight',
      sorter: false,
      width: '5%',
      render: (value) => {
        return (
          numberUtils.round_half_up_format(value, 2)
        );
      }
    }, {
      title: '已付金额',
      dataIndex: 'payedAmt',
      className: 'alignRight',
      sorter: false,
      width: '5%',
      render: (value) => {
        return (
          numberUtils.round_half_up_format(value, 2)
        );
      }
    },
    // {
    //   title: '付款日期',
    //   dataIndex: 'payedDate',
    //   className: 'noWrap',
    //   sorter: false,
    //   width: '8%',
    // }, {
    //   title: '物料编号',
    //   dataIndex: 'itemCode',
    //   sorter: false,
    //   width: '5%',
    // }, {
    //   title: '物料名称',
    //   dataIndex: 'itemName',
    //   sorter: false,
    //   width: '10%',
    //   render: (value, row, index) => {
    //     if (value) {
    //       return value.length > 10 ? (
    //         <Tooltip placement="bottom" title={value}> {value && `${value.slice(0, 10)}...`} </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(({ payable, loading }) => ({ payable, loading }))(Payable);
