
import moment from 'moment';
import React, { useRef, useEffect, useState } from 'react'

import { Button, Modal, Popconfirm, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { getInvoiceDetailList } from '@/services/invoiceDetail'
import { getExport } from '@/services/invoiceFill'

import PageTable from '@/components/PageTable'
import { history } from 'umi';
import BanjiSearch from '@/components/BanjiSearch';

const formatterTime = (val) => {
  return val ? moment(val).format('YYYY-MM-DD HH:mm') : '';
};

export default (props) => {
  const actionRef = useRef();

  const handleClick = () => {
    history.push('/invoiceFill/edit.jsx');
  }
  const handleDelete = (id) => {
    deleteInvoiceFill(id).then((res) => {
      message.success('删除成功')
      actionRef.current.reload();
    }).catch((err) => {
      console.log(err.message)
    });
  }

  const handleBeforSearch = (params) => {
    const { ...others } = params;    
    return { ...others };
  }

  const columns = [
    {
      title: '班级名称',
      dataIndex: 'invoiceId',
      key: 'invoiceId',
      search: true,
      hideInTable: true,
      renderFormItem: () => (
        <BanjiSearch placeholder='请输入班级名称' />
      ),
      formItemProps: {
        rules: [          
          {
            required: true,
            message: '请输入班级名称',
          }
        ],
      }
    },
    {
      title: '姓名',
      dataIndex: 'personName',
      key: 'personName',
      search: true,
    },
    {
      title: '开票单位',
      dataIndex: 'orgName',
      key: 'orgName',
      search: true,
    },
    {
      title: '纳税识别号',
      dataIndex: 'taxNo',
      key: 'taxNo',
      search: false,
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
      search: false,
    },
    {
      title: '电话',
      dataIndex: 'phone',
      key: 'phone',
      search: false,
    },
    {
      title: '开户银行',
      dataIndex: 'bankName',
      key: 'bankName',
      search: false,
    },
    {
      title: '开户行账号',
      dataIndex: 'cardNo',
      key: 'cardNo',
      search: false,
    },
    {
      title: '报销项目',
      dataIndex: 'itemName',
      key: 'itemName',
      search: false,
    },
    {
      title: '开票金额',
      dataIndex: 'charge',
      key: 'charge',
      search: false,
    },
    {
      title: '是否合开',
      dataIndex: 'mergeRemark',
      key: 'mergeRemark',
      search: false,
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      ellipsis: true,
      render: (_, record) => [
        <Button type="link" key={1} onClick={() => history.push(`/invoiceFill/edit.jsx?id=${record.detailId}`)} style={{ padding: 0 }}>
          编辑
        </Button>,
        <Popconfirm
          key={2}
          title="您是否确认删除 ?"
          onConfirm={() => handleDelete(record.detailId)}
          okText="确定"
          cancelText="取消"
        >
          <Button style={{ padding: 0 }} type="link">
            删除
          </Button>
        </Popconfirm>
      ],
    },
  ]


  return (
    <PageHeaderWrapper>
      <PageTable
        columns={columns}
        request={getInvoiceDetailList}
        expfunc={getExport}
        options={false}        
        actionRef={actionRef}
        search={{
          defaultCollapsed:false
        }}
        form={{ ignoreRules: false }}
        manualRequest={true}
        revalidateOnFocus={false}
        beforeSearchSubmit={handleBeforSearch}
        rowKey="detailId"
        scroll={{x:2000}}
      />
    </PageHeaderWrapper>
  )
}
