import { Button, UploadFile } from "antd";
import { useEffect, useState } from "react";
import { inject, observer } from "mobx-react";
import AliUpload from "@/components/ali_upload";
interface ArchiveUploadFile extends UploadFile {
  file_type: string | undefined;
  file_url: string | undefined;
}
const FileListPage = (props: any) => {
  const { folderStore, archivesStore, id } = props;
  const [fileList, setFileList] = useState<ArchiveUploadFile[]>([]);
  useEffect(() => {
    folderStore.getAlist(id).then((res) => {
      setFileList(folderStore.alist);
    });
  }, [folderStore, id]);
  const saveHandler = () => {
    fileList.forEach((item) => {
      item.file_url = item.url;
      item.file_type = item.type;
    });
    archivesStore.save(id, fileList);
  };
  return (
    <div style={{ margin: "10px" }}>
      <div style={{ margin: "10px" }}></div>
      <div style={{ margin: "10px" }}>
        <Button type="primary" onClick={saveHandler}>
          保存
        </Button>
      </div>
      <AliUpload
        imgList={fileList ?? []}
        onChnage={(v) => {
          setFileList(v);
        }}
        maxCount={100}
      />
    </div>
  );
};
export default inject("archivesStore", "folderStore")(observer(FileListPage));