import React, { FC, useEffect, useMemo, useRef, useState } from "react";
import clientApi from "@/package/SimpleTrade/api/client";
import MyTable from "@/components/MyTable";
import { Button, Input, Modal, notification, Select } from "antd";
import { copy, splitAddress } from "@/utils";
import { CopyOutlined } from "@ant-design/icons";

const UserList: FC = () => {

  const [currentItem, setCurrentItem] = useState({} as any)
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [lv, setLv] = useState(0);
  const tableRefs = useRef<any>()
  const options = useMemo(() => [
    { value: 0, label: 'R' },
    { value: 1, label: 'G' },
    { value: 2, label: 'G1' },
    { value: 3, label: 'G2' },
    { value: 4, label: 'G3' },
    { value: 5, label: 'G4' },
    { value: 6, label: 'G5' },
  ], [])
  const columns = [
    {
      title: '邮箱',
      dataIndex: 'email'
    },
    {
      title: '地址',
      dataIndex: 'address',
      render: (address) => (
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <div>{splitAddress(address, 5)}</div>
          <div style={{ marginLeft: 5, cursor: 'pointer' }} onClick={() => copy(address)}>
            <CopyOutlined />
          </div>
        </div>
      )
    },
    {
      title: 'A账号',
      dataIndex: 'a_mt4_login'
    },
    {
      title: 'A仓余额',
      dataIndex: 'a_mt4_balance'
    },
    {
      title: 'A仓订单数量',
      dataIndex: 'a_product'
    },
    {
      title: 'B账号',
      dataIndex: 'b_mt4_login'
    },
    {
      title: 'B仓余额',
      dataIndex: 'b_mt4_balance'
    },
    {
      title: 'B仓订单数量',
      dataIndex: 'b_product'
    },
    {
      title: '手数',
      dataIndex: 'volume'
    },
    {
      title: '级别',
      dataIndex: 'level',
      render: (level) => (
        <div>{options[level] ? options[level].label : level}</div>
      )
    },
    {
      title: '保险开关',
      dataIndex: 'insurance',
      render: (status) => (
        <div>{status === 1 ? '开' : '关'}</div>
      )
    },
    {
      title: '邀请码',
      dataIndex: 'invite_code'
    },
    {
      title: '推荐人',
      dataIndex: 'referrer'
    },
    {
      title: '操作',
      dataIndex: 'operations',
      align: 'center',
      key: Date.now(),
      render: (text, record) => {
        return (
          <div>
            <Button type="primary" className="btn" size="small" onClick={() => {
              setCurrentItem(record)
              setIsModalOpen(true)
              setLv(record.level)
            }}>修改等级</Button>
          </div>
        )
      }
    }
  ]
  // 搜索栏配置项
  const searchConfigList = [
    {
      key: 'name',
      slot: <Input placeholder="用户名" allowClear />,
      initialValue: ''
    }
  ]

  const setLevel = async () => {
    if (currentItem.level === lv) {
      notification.error({
        message: '设置等级相同',
      })
      return;
    }
    let res: any = await clientApi.up_levle({
      level: lv,
      invite_code: currentItem.invite_code
    })
    if (res.code === 0) {
      notification.success({
        message: '设置成功'
      })
      setIsModalOpen(false)
      tableRefs.current?.update()
    }
  }

  const handleChange = (_, e) => {
    setLv(e.value)
  }

  useEffect(() => {
    if (!isModalOpen) {
      setCurrentItem({})
      setLv(0)
    }
  }, [isModalOpen])

  return (
    <div>
      <MyTable
        ref={tableRefs}
        columns={columns}
        apiFun={clientApi.user_list}
        searchConfigList={searchConfigList}
        rowKey="invite_code"
      />
      <Modal
        title="设置等级"
        visible={isModalOpen}
        onOk={setLevel}
        onCancel={() => setIsModalOpen(false)}
      >
        {
          isModalOpen && (
            <Select
              defaultValue={currentItem.level || 0}
              options={options}
              style={{ width: '100%' }}
              onChange={handleChange}
            />
          )
        }
      </Modal>
    </div>
  )
};

export default UserList;