import api from "@/api"
import MyTable from "@/components/MyTable"
import { getTime } from "@/utils"
import { EditOutlined } from "@ant-design/icons"
import { Button, Form, Input, Modal, Switch, notification } from "antd"
import React, { useRef, useState } from "react"

const WithdrawReview = () => {

  const [visible, setVisible] = useState(false)
  const [currentItem, setCurrentItem] = useState({} as any)
  const tableRef = useRef(null)
  const currentType = useRef(1)
  const [form] = Form.useForm()

  const columns = [
    {
      title: '操作',
      width: 100,
      render: (row) => {
        return row.status_code === 0 ? (
          <div style={{ display: "flex", alignItems: 'center' }}>
            <EditOutlined onClick={() => {
              setCurrentItem(() => row)
              setVisible(true)
            }} />
          </div>
        ) : <></>
      }
    },
    { "dataIndex": "Withdraw_method", "title": "取款方式" },
    { "dataIndex": "withdraw_source", "title": "取款来自" },
    { "dataIndex": "account", "title": "MT账户" },
    { "dataIndex": "address", "title": "钱包地址" },
    { "dataIndex": "amount", "title": "取款金额" },
    { "dataIndex": "time", "title": "时间", render: (time) => (<div>{getTime(time * 1000)}</div>) },
    { "dataIndex": "name", "title": "姓名" },
    { "dataIndex": "email", "title": "用户" },
    { "dataIndex": "fee", "title": "取款手续费" },
    { "dataIndex": "order", "title": "订单号" },
    { "dataIndex": "status", "title": "状态" },
    { "dataIndex": "status_code", "title": "状态码" },
    { "dataIndex": "symbol", "title": "币种" },
    { "dataIndex": "type", "title": "钱包类型" },
  ]


  const onFinish = async (values) => {
    setVisible(false)
    const res: any = await api.review_withdrawReview({
      ...values,
      id: currentItem.id,
      status_code: currentType.current
    })
    if (res.code === 0) {
      tableRef.current.update()
      form.resetFields()
      notification.success({
        message: currentType.current === 1 ? '已拒绝' : '已同意'
      })
    }
  }

  return (
    <div>
      <MyTable
        apiFun={api.get_withdrawReviewList}
        columns={columns}
        ref={tableRef}
      />

      <Modal
        visible={visible}
        onCancel={() => setVisible(false)}
        footer={() => null}
        title={`取款审核：${currentItem.email}`}
      >
        <Form form={form} onFinish={onFinish}>
          <div style={{ display: 'flex' }}>
            <Form.Item label="用户" style={{ flex: 1 }}>
              <div>{currentItem.email}</div>
            </Form.Item>
          </div>

          <div style={{ display: 'flex' }}>
            <Form.Item label="钱包地址" style={{ flex: 1 }}>
              <div>{currentItem.address}</div>
            </Form.Item>
          </div>

          <div style={{ display: 'flex' }}>
            <Form.Item label="取款方式" style={{ flex: 1 }}>
              <div>{currentItem.Withdraw_method}</div>
            </Form.Item>
            <Form.Item label="取款来自" style={{ flex: 1 }}>
              <div>{currentItem.withdraw_source}</div>
            </Form.Item>
          </div>

          <div style={{ display: 'flex' }}>
            <Form.Item label="取款金额" style={{ flex: 1 }}>
              <div>{currentItem.amount}</div>
            </Form.Item>
            <Form.Item label="取款手续费" style={{ flex: 1 }}>
              <div>{currentItem.fee}</div>
            </Form.Item>
          </div>

          <div style={{ display: 'flex' }}>
            <Form.Item label="取款币种" style={{ flex: 1 }}>
              <div>{currentItem.symbol}</div>
            </Form.Item>
            <Form.Item label="时间" style={{ flex: 1 }}>
              <div>{getTime(currentItem.time * 1000)}</div>
            </Form.Item>
          </div>

          <Form.Item name="reason" label="原因" initialValue="">
            <Input placeholder="请输入原因" />
          </Form.Item>
          <Form.Item label="邮箱通知" name="email_flag" initialValue={false} valuePropName="checked">
            <Switch />
          </Form.Item>
          <Form.Item>
            <Button onClick={() => setVisible(false)}>取消</Button>
            <Button style={{ margin: '0 10px', backgroundColor: "#FF8C00", borderColor: '#FF8C00' }} type="primary" htmlType="submit" onClick={() => currentType.current = 1}>拒绝</Button>
            <Button type="primary" htmlType="submit" onClick={() => currentType.current = 2}>同意</Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}

export default WithdrawReview