import React, { useRef } from 'react';
import Table, { ProColumns, ActionType } from '@/components/Table';
import { getWithdrawList, solveWithdraw } from '@/services/recharge/withdraw';
import { fetchTableData } from '@/utils/table';
import ConfirmButton from '@/components/Table/ConfirmButton';
import moment from 'moment';
import { WithdrawType } from '@/constants/enum/withdraw';
import RejectButton from '@/components/Table/RejectButton';
import { Access, useAccess } from 'umi';

const WithdrawList = () => {
  const tableRef = useRef<ActionType>();
  const access = useAccess();

  const handleClick = async (uuid, status) => {
    await solveWithdraw({ uuid: uuid, status: status });
    tableRef.current?.reload();
  };

  const WithdrawTypeList = [
    {
      label: '成功',
      value: WithdrawType.SUCCESS,
      status: 'Success',
    },
    {
      label: '失败',
      value: WithdrawType.FAILED,
      status: 'Error',
    },
    {
      label: '待处理',
      value: WithdrawType.PENDDING,
      status: 'Warning',
    },
  ];

  const columns: ProColumns<any>[] = [
    {
      title: '提现订单号',
      dataIndex: 'uuid',
      ellipsis: true,
    },
    {
      title: '金额',
      dataIndex: 'price',
      width: '10%',
      hideInSearch: true,
    },
    {
      title: '接收地址',
      dataIndex: 'to_address',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '类型',
      dataIndex: 'type',
      hideInSearch: true,
      width: '10%',
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: '10%',
      valueEnum: () => {
        const options = {};
        WithdrawTypeList.forEach((item) => {
          options[item.value] = { text: item.label, status: item.status };
        });
        return options;
      },
    },
    {
      title: '时间',
      dataIndex: 'time',
      valueType: 'dateRange',
      ellipsis: true,
    },
    {
      title: '操作',
      valueType: 'option',
      width: 150,
      render: (_, row) => [
        row.status === 30000 ? (
          <Access accessible={access.canShowButton('提现通过')}>
            <ConfirmButton
              key="confirm"
              title="确认通过提现?"
              buttonName="通过"
              onConfirm={() => {
                handleClick(row.uuid, WithdrawType.SUCCESS);
              }}
            />
          </Access>
        ) : null,
        row.status === 30000 ? (
          <Access accessible={access.canShowButton('提现拒绝')}>
            <RejectButton
              key="confirm"
              title="确认拒绝提现?"
              buttonName="拒绝"
              onConfirm={() => {
                handleClick(row.uuid, WithdrawType.FAILED);
              }}
            />
          </Access>
        ) : null,
      ],
    },
  ];
  return (
    <div>
      <Table
        columns={columns}
        rowKey="uuid"
        actionRef={tableRef}
        request={async (params) => {
          const res = await fetchTableData(getWithdrawList, params);
          for (const key in res.data) {
            if (Object.prototype.hasOwnProperty.call(res.data, key)) {
              const element = res.data[key];
              element.time = moment(element.time * 1000).format('YYYY-MM-DD hh:mm:ss');
            }
          }
          return res;
        }}
      />
    </div>
  );
};

export default WithdrawList;