import { MyColumns, MyPageContainer, MyProTableProps } from '@/common';
import { Selects } from '@/components/Select';
import { Apis } from '@/gen/Apis';
import { RefundsStatusEnum, RefundsTypeEnum } from '@/gen/Enums';
import BIllInfo from '@/pages/bills/house_bills/modals/BIllInfo';
import { ProTable } from '@ant-design/pro-components';
import { Image, Space } from 'antd';
import Refund from './modals/Refund';

export default function Index({ title = '退款列表' }) {
  return (
    <MyPageContainer
      title={title}
      enableTabs={true}
      tabKey="house_charge_refund"
      tabLabel={title}
    >
      <ProTable
        {...MyProTableProps.props}
        headerTitle={title}
        request={async (params, sort) =>
          MyProTableProps.request(params, sort, Apis.Refund.Refunds.List)
        }
        // toolBarRender={(action) => [
        //   <TaskCreate key="Create" reload={action?.reload} title="账单任务" />,
        // ]}
        columns={[
          MyColumns.ID({ search: false }),
          Selects?.AssetProjects({
            title: '选择项目',
            key: 'asset_projects_id',
            hidden: true,
          }),
          {
            title: '项目名称',
            dataIndex: ['asset_project', 'name'],
            search: false,
          },
          MyColumns.EnumTag({
            title: '类型',
            dataIndex: 'type',
            valueEnum: RefundsTypeEnum,
          }),
          MyColumns.EnumTag({
            title: '退款状态',
            dataIndex: 'refund_status',
            valueEnum: RefundsStatusEnum,
          }),
          {
            title: '退款申请时间',
            dataIndex: 'apply_time',
            valueType: 'dateTimeRange',
            hidden: true,
          },
          {
            title: '退款金额',
            dataIndex: 'refund_amount',
            search: false,
          },
          {
            dataIndex: 'payee_name',
            title: '收款人',
            search: false,
          },
          {
            dataIndex: 'applicant_name',
            title: '申请人',
            hidden: true,
          },
          {
            dataIndex: 'payee_bank',
            title: '收款银行',
            search: false,
          },
          {
            dataIndex: 'payee_account',
            title: '收款账号',
            search: false,
          },
          {
            title: '退款原因',
            dataIndex: 'remark',
            search: false,
          },
          {
            title: '退款信息',
            search: false,
            render: (_, item: any) => {
              return item?.serial_number ? (
                <Space direction="vertical" size="small">
                  <div>流水号：{item?.serial_number}</div>
                  <div>退款时间：{item?.refund_time}</div>
                </Space>
              ) : (
                ''
              );
            },
          },
          {
            title: '退款凭证',
            search: false,
            render: (_, item: any) => {
              return (
                <Space direction="vertical" size="small">
                  {item?.voucher?.map((res: any, index: number) => {
                    return (
                      <Image
                        src={res?.url}
                        key={`item_${index}`}
                        style={{ width: 50 }}
                      />
                    );
                  })}
                </Space>
              );
            },
          },
          // MyColumns.UpdatedAt(),
          MyColumns.CreatedAt(),
          MyColumns.Option({
            render: (_, item: any, index, action) => (
              <Space key={index}>
                <BIllInfo
                  item={{ ...item, id: item?.refundable_id, type: 'primary' }}
                  reload={action?.reload}
                  title="查看"
                />
                <Refund item={item} title="完成退款" reload={action?.reload} />
              </Space>
            ),
          }),
        ]}
      />
    </MyPageContainer>
  );
}