import AliUpload from "@/components/ali_upload";
import { Button, UploadFile } from "antd";
import { Store } from "antd/es/form/interface";
import { inject, observer } from "mobx-react";
import { useEffect, useState } from "react";
interface UploadFilewx extends UploadFile {
  file_name: string;
  file_url: string;
}

const Banner = (props: Store) => {
  const { sysStore } = props;
  const [files, setFileList] = useState<UploadFilewx[]>([]);
  const uploadChange = (v) => {
    v.forEach((i) => {
      i.file_name = i.fileName;
      i.file_url = i.url
    });
    setFileList(v);
  };
  useEffect(() => {
    sysStore.getbanner().then(() => {
        let data = sysStore.bannerList
        data.forEach((e)=>{
            e.fileNmae = e.file_name
            e.name = e.file_name
            e.url = e.file_url
        })
      setFileList(data);
    });
  }, [sysStore]);
  const save = () => {
    sysStore.addBanner({ list: files });
  };
  return (
    <div>
      <Button type="dashed" onClick={save}>
        保存
      </Button>
      <AliUpload value={files} onChange={uploadChange} />
    </div>
  );
};

export default inject("sysStore")(observer(Banner));
