import React from 'react';
import { connect } from 'dva';
import { Card } from 'antd';
import { DataTable } from '../../../components';
import { numberUtils } from '@utils';
import moment from 'moment';

const AccReceivable = ({ dispatch, accReceivable, loading }) => {
  const { list, total, filterParams } = accReceivable;

  const domain = 'accReceivable';
  const domainCN = '应付账款账龄分析表';

  const formatter = (value) => {
    return (value && value !== 0) ? numberUtils.round_half_up_format(value, 2) : null;
  }

  const yearMonth = (monthCnt) => {
    return moment().subtract(monthCnt, "months").format("YYYY年MM月");
  }

  const monthColumns = () => {
    const cols = [];
    for (let i = 1; i <= 12; i++) {
      const col = {
        title: yearMonth(i),
        dataIndex: `month${i}`,
        width: '5%',
        render: formatter,
      };
      cols.push(col);
    }
    return cols;
  }

  const tableProps = {
    rowKey: 'rowKey',
    sortBy: 'itemCode',
    scroll: { x: '200%' },
    domain,
    dispatch,
    loading,
    total,
    showAdd: false,
    enableSelection: false,
    dataSource: list,
    handleDownload: {
      requestUrl: `/srm/api/export/accreceivable`,
      requestParam: window.location.search,
    },
    filter: [{
      title: '公司',
      dataIndex: 'ouCodeName',
      options: {
        initialValue: filterParams.ouCodeName,
      },
    }, {
      title: '供应商',
      dataIndex: 'suppCodeName',
      options: {
        initialValue: filterParams.suppCodeName,
      },
    }],
    columns: [{
      title: '公司名称',
      dataIndex: 'ouName',
      width: '7%',
    }, {
      title: '供应商编码',
      dataIndex: 'suppCode',
      width: '5%',
    }, {
      title: '供应商名称',
      dataIndex: 'suppName',
      width: '8%',
    }, {
      title: '3个月内',
      dataIndex: 'm3Acc',
      width: '5%',
      render: formatter,
    }, {
      title: '4~6个月',
      dataIndex: 'm6Acc',
      width: '5%',
      render: formatter,
    }, {
      title: '7~12个月',
      dataIndex: 'm12Acc',
      width: '5%',
      render: formatter,
    }, {
      title: '1年以上',
      dataIndex: 'y1Acc',
      width: '5%',
      render: formatter,
    },
    ...monthColumns()
    ],
  };

  return (
    <Card>
      <DataTable {...tableProps} />
    </Card>
  );
};

export default connect(({ accReceivable, loading }) => ({ accReceivable, loading }))(AccReceivable);
