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

const { api } = config;
const { excel } = api;
const { exportExcelURL } = excel;
const PrepayOrder = ({ dispatch, prepayOrder, loading }) => {
  const { list, total, supplier, updateBtnFlag } = prepayOrder;
  const { RangePicker } = DatePicker;

  const domain = 'prepayOrder';
  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: '130%', y: 400 },
    domain,
    dispatch,
    loading,
    showAdd: false,
    showDelete: false,
    showEdit: updateBtnFlag,
    total,
    dataSource: list,
    handleDownload: {
      requestUrl: `${exportExcelURL}/ppo`,
      requestParam: window.location.search,
    },
    filter: [{
      title: '预付款单编号',
      dataIndex: 'docNo',
      options: {
        initialValue: supplier.docNo,
      },
    }, {
      title: '预付款单状态',
      dataIndex: 'docStatus',
      options: {
        initialValue: supplier.docStatus,
      },
      tag: <UdcSelect domain="SRM" code="PAY_STATUS" />,
    }, {
      title: '制单日期',
      dataIndex: 'docDate',
      options: {
        initialValue: supplier.docDateFrom ?
          [moment(supplier.docDateFrom, monthFormat), moment(supplier.docDateTo, monthFormat)] : '',
      },
      tag: <RangePicker style={{ width: '100%' }} />,
    }, {
      title: '供应商',
      dataIndex: 'suppCode',
      options: {
        initialValue: supplier.supplier ? supplier.suppName.trim() : supplier.suppCode,
      },
      tag: <Input placeholder="请输入名称/编号" disabled={supplier.supplier} />,
    }, {
      title: '合同编号',
      dataIndex: 'contractCode',
      options: {
        initialValue: supplier.contractCode,
      },
    }, {
      title: '预付款日期',
      dataIndex: 'payDate',
      options: {
        initialValue: supplier.payDateFrom ?
          [moment(supplier.payDateFrom, monthFormat), moment(supplier.payDateTo, monthFormat)] : '',
      },
      tag: <RangePicker style={{ width: '100%' }} />,
    }],
    columns: [{
      title: '编号',
      dataIndex: 'docNo',
      width: '7%',
    }, {
      title: '状态',
      dataIndex: 'docStatusName',
      width: '7%',
    }, {
      title: '付款方',
      dataIndex: 'ouName',
      className: 'alignLeft',
      width: '18%',
    }, {
      title: '供应商名称',
      dataIndex: 'suppName',
      className: 'alignLeft',
      width: '18%',
    },  {
      title: '预付款金额',
      dataIndex: 'payAmt',
      className: 'alignRight',
      width: '8%',
      render: formatter,
    },{
      title: '制单日期',
      dataIndex: 'docDate',
      width: '8%',
    }, {
      title: '预付款日期',
      dataIndex: 'payDate',
      width: '8%',
    }, {
      title: '合同编号',
      dataIndex: 'contractCode',
      width: '10%',
    }, {
      title: '备注',
      dataIndex: 'remark',
      width: '16%',
      className: 'alignLeft',
    }],
  };

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

};

export default connect(({ prepayOrder, loading }) => ({ prepayOrder, loading }))(PrepayOrder);
