import React, { useState, useEffect } from 'react';
import { Form, Message } from '@alifd/next';
import request from 'axios';
import { getParams } from '@/utils/url';
import { getUser } from '@/apis';

export interface IDataSource {
  name?: string;
  nick?: string;
  role?: string;
}

const BasicDetail = () => {
  const [user, setUser] = useState<IDataSource>({});

  // eslint-disable-next-line no-underscore-dangle
  const _id = getParams()._id;

  useEffect(() => {
    const fetchUser = async () => {
      if (_id) {
        try {
          const result = await request.get(getUser, {
            params: { _id },
          });
          if (result && result.data) {
            if (result.data.errorMessage) {
              throw new Error(result.data.errorMessage);
            }
            setUser(result.data);
          } else {
            throw new Error('网络错误');
          }
        } catch (err) {
          Message.error(err.message || '网络错误');
        }
      }
    }

    fetchUser();
  }, []);

  return (
    <div className="halo-basic-detail-content">
      <Form labelAlign="top" responsive>
        <Form.Item colSpan={4} label="姓名" required>
          <span>{user.name}</span>
        </Form.Item>
        <Form.Item colSpan={4} label="昵称" required>
          <span>{user.nick}</span>
        </Form.Item>
        <Form.Item colSpan={4} label="角色" required>
          <span>{user.role}</span>
        </Form.Item>
      </Form>
    </div>
  );
};

export default BasicDetail;