import React, { FC, useRef } from "react";
import clientApi from "@/package/SimpleTrade/api/client";
import MyTable from "@/components/MyTable";
import { Button, Input, notification, Popconfirm } from "antd";
import { CopyOutlined } from "@ant-design/icons";
import { copy, getTime, splitAddress } from "@/utils";
import { Withdraw_Check } from "@/package/SimpleTrade/types/enum";

const WithdrawRecord: FC = () => {

  const tableRefs = useRef(null)

  const columns = [
    {
      title: '账号ID',
      dataIndex: 'a_mt4_login'
    },
    {
      title: '交易ID',
      dataIndex: 'tx_hash',
      render: (tx_hash) => (
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <div>{splitAddress(tx_hash, 5)}</div>
          <div style={{ marginLeft: 5, cursor: 'pointer' }} onClick={() => copy(tx_hash)}>
            <CopyOutlined />
          </div>
        </div>
      )
    },
    {
      title: '链ID',
      dataIndex: 'chain_id'
    },
    {
      title: '提币地址',
      dataIndex: 'to_address',
      render: (to_address) => (
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <div>{splitAddress(to_address, 5)}</div>
          <div style={{ marginLeft: 5, cursor: 'pointer' }} onClick={() => copy(to_address)}>
            <CopyOutlined />
          </div>
        </div>
      )
    },
    {
      title: '数量',
      dataIndex: 'amount'
    },
    {
      title: '币种',
      dataIndex: 'symbol'
    },
    {
      title: '提现状态',
      dataIndex: 'status'
    },
    {
      title: '处理时间',
      dataIndex: 'handle_time',
      render: (time) => (
        <div>{getTime(time * 1000)}</div>
      )
    },
    {
      title: '操作',
      dataIndex: 'operations',
      align: 'center',
      key: Date.now(),
      render: (_, item) => {
        return item.check_status === 1 ? (<div>
          <Popconfirm
            title="确认拒绝吗？"
            onConfirm={() => handleOrder(item, Withdraw_Check.WithdrawCheckReject)}
          >
            <Button size="small" type="primary" danger style={{ marginRight: 20 }}>拒绝</Button>
          </Popconfirm>
          <Popconfirm
            title="确认同意吗？"
            onConfirm={() => handleOrder(item, Withdraw_Check.WithdrawCheckAgree)}
          >
            <Button size="small" type="primary">同意</Button>
          </Popconfirm>
        </div>) : (<></>)
      }
    }
  ]

  // 搜索栏配置项
  const searchConfigList = [
    {
      key: 'name',
      slot: <Input placeholder="用户名" allowClear />,
      initialValue: ''
    }
  ]

  const handleOrder = async (item, type: Withdraw_Check) => {
    const res: any = await clientApi.withdraw_check({
      id: item.id,
      status: type
    })
    if (res.code === 0) {
      notification.success({
        message: type === Withdraw_Check.WithdrawCheckAgree ? '已同意' : '已拒绝'
      })
      tableRefs.current?.update()
    }
  }

  return (
    <div>
      <MyTable
        ref={tableRefs}
        columns={columns}
        apiFun={clientApi.withdraw_list}
        searchConfigList={searchConfigList}
        rowKey="id"
      />
    </div>
  )
};

export default WithdrawRecord;