import { Breadcrumb, Button, UploadFile } from "antd";
import { useEffect, useState } from "react";
import { Store } from "antd/es/form/interface";
import { inject, observer } from "mobx-react";
import { useParams } from "react-router";
import AliUpload from "@/components/ali_upload";
interface ArchiveUploadFile extends UploadFile{
  file_type:string | undefined;
  file_url:string | undefined;
}
const FileListPage = (props: Store) => {
  const { folderStore,archivesStore } = props;
  const { id } = useParams();
  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" }}>
      <Breadcrumb
        items={[
          {
            title: "文件夹",
            path: "/admin/archives/box",
          },
          {
            title: "档案列表",
          },
        ]}
      />
      <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 FileListPage;
export default inject("archivesStore","folderStore")(observer(FileListPage));