import React, { useState } from "react";
import { Form, Input, Space, Button } from "antd";
import baseRequest from "../../utils/baseRequest";

export default function QuerryMidAndUserId() {
  const [result, setResult] = useState({});
  //搜索
  const search = async (value) => {
    if (value.mid && value.user_id) {
      alert("不可同时查询mid和user_id");
      return;
    }
    let type = "list_by_mid";
    if (!value.mid) type = "list_by_user_id";
    try {
      const base = baseRequest();
      const response = await fetch(`/op/account/${type}`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          user_id: value.user_id ? parseInt(value.user_id, 10) : 0,
          mid: value.mid ? parseInt(value.mid, 10) : 0,
          ...base,
        }),
      });
      const data = await response.json();
      if (data.ret === -1) {
        alert(data.msg);
        return;
      }
      if (type === "list_by_user_id") {
        setResult({ user_id: null, mid: data.data.account.mid });
        return;
      }
      setResult({ user_id: data.data.account.user_id, mid: null });
    } catch (error) {
      console.error(error);
    }
  };
  //表单提交失败
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  return (
    <div className="mt-4" style={{ marginLeft: 20, marginRight: 20 }}>
      <Form name="search" onFinish={search} onFinishFailed={onFinishFailed}>
        <Space direction="vertical" style={{ marginBottom: 20 }}>
          <Form.Item label="请输入user_id" name="user_id" style={{ margin: 0 }}>
            <Input type="number" />
          </Form.Item>
          <Form.Item label="请输入mid" name="mid" style={{ margin: 0 }}>
            <Input type="number" />
          </Form.Item>
          <Button type="primary" htmlType="submit">
            搜索
          </Button>
        </Space>
      </Form>
      {result?.user_id && (
        <p className="text-lg mt-4">user_id：{result?.user_id}</p>
      )}
      {result?.mid && <p className="text-lg mt-4">mid：{result?.mid}</p>}
    </div>
  );
}