import React, { memo, useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import Upload from '../../../components/upload';
import { message } from 'antd';
import { getLoginBGI, setLoginBGI } from '@/services/notice';
import './common.less';

const MemoUpload = memo(Upload);

const Banner = () => {
  const [imgUrl, setImgUrl] = useState('');

  // 设置登录背景图
  const saveImgUrl = async (url: string) => {
    const { status, msg } = await setLoginBGI(url);
    if (status === 200) {
      setImgUrl(url);
    } else {
      message.error(msg);
    }
  };

  // 获取登录背景图
  const getImgUrl = async () => {
    const { status, data, msg } = await getLoginBGI();
    if (status === 200) {
      setImgUrl(data.backgroundImage);
    } else {
      message.error(msg);
    }
  };

  useEffect(() => {
    getImgUrl();
  }, [imgUrl]);

  return (
    <PageContainer title="登录页背景图" className="loginBGI">
      <MemoUpload
        key={imgUrl}
        maxCount={1}
        desc="上传图片"
        setCoverFn={saveImgUrl}
        imgUrl={imgUrl}
      />
      <div className="remark">登录页封面GIF图上传</div>
    </PageContainer>
  );
};

export default Banner;