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, { useEffect, useRef, useState } from "react"

const AssetsList = () => {

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

  const columns = [
    {
      title: '操作',
      render: (row) => {
        return row.status_code === 0 ? (
          <div style={{ display: "flex", alignItems: 'center' }}>
            <EditOutlined onClick={() => {
              setCurrentItem(() => row)
              setVisible(true)
            }} />
          </div>
        ) : <></>
      }
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 150,
    },
    {
      title: '类型',
      dataIndex: 'type',
      width: 200,
    },
    {
      title: '时间',
      width: 200,
      dataIndex: 'time',
      render: (time) => (
        <div>{getTime(time * 1000)}</div>
      )
    },
    {
      title: '用户',
      dataIndex: 'email',
      width: 240,
    },
    {
      title: 'MT账号',
      dataIndex: 'account',
      width: 200,
    },
    {
      title: '金额',
      dataIndex: 'amount',
      width: 200
    },
    {
      title: '订单号',
      dataIndex: 'order',
      width: 200
    },
    {
      title: '审核人',
      dataIndex: 'review',
      width: 200
    },
  ]

  useEffect(() => {
    !visible && setCurrentItem({})
  }, [visible])

  const onFinish = async (values) => {
    setVisible(false)
    const res: any = await api.assets_review({
      ...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_assetsList}
        columns={columns}
        ref={tableRef}
        searchConfigList={[{
          key: 'search',
          name: 'search',
          slot: <Input style={{ minWidth: 350 }} placeholder="请输入MT账号、邮箱搜索" />
        }]}
      />
      <Modal
        visible={visible}
        onCancel={() => setVisible(false)}
        footer={() => null}
        title={`审核用户：${currentItem.email}`}
      >
        <Form form={form} onFinish={onFinish}>
          <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 AssetsList