import React, { useEffect, useState } from "react";
import axios from "axios";
import HeadUser from "./HeadUser";
import { MainUser, HeadImage, HeadCon } from "../css/layout.jsx";
import { Spin } from "antd";
import UserMenu from "./Menu";
import "../css/layout.scss"
function account(props) {
  const [UserInfo, setUserInfo] = useState(null); //用户的内容
  const [isSpin, setSpin] = useState(false); //用户的内容
  const user_login = props.match.params.login;
  useEffect(() => {
    async function init(login) {
      setSpin(true);
      let url = `/users/${login}/user_info.json`;
      axios
        .get(url)
        .then((result) => {
          if (result) {
            setUserInfo(result.data.user);
          }
          setSpin(false);
        })
        .catch((e) => {
          setSpin(false);
          console.log(e);
        });
    }
    if (user_login) {
      init(user_login);
    }
  }, []);

  return (
    <Spin spinning={isSpin}>
      <MainUser
        style={{
          height: UserInfo && UserInfo.is_current_user ? "336px" : "400px",
        }}
      >
        <HeadImage></HeadImage>
        <HeadCon>
          <HeadUser UserInfo={UserInfo}></HeadUser>
        </HeadCon>
      </MainUser>
      <UserMenu is_current_user={UserInfo && UserInfo.is_current_user} login={UserInfo && UserInfo.login} props={props}></UserMenu>
    </Spin>
  );
}
export default account;
