// 档案管理

import { Button, Space, Modal, FormInstance, Flex } from "antd";
import { inject, observer } from "mobx-react";
import { useEffect, useState } from "react";
import { Store } from "antd/lib/form/interface";
import SimpleForm from "@/components/form/simple_form";
import React from "react";
import FolderTwoTone from "@ant-design/icons/FolderOpenTwoTone";
import { folderConfig } from "./archives_conf";
import { Form, Select } from "antd";
import Preview from "./preview";
const { Option } = Select;
const ArchivesFolder = (props: Store) => {
  const { folderStore, acStore } = props;
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const [isModalOpenArchives, setIsModalOpenArchives] =
    useState<boolean>(false);

  const [projectConfig, setProjectConfig] = useState<any>([]);
  const formRef = React.useRef<FormInstance>(null);
  const [tagId, setId] = useState<Number | null>(null);
  const [catList, setCatList] = useState<any>(null); // 仓库列表
  const onFinish = (values: any) => {
    let data = values;
    if (!tagId) {
      folderStore.add(data);
    } else {
      folderStore.putItem(tagId, data);
    }
    setIsModalOpen(false);
  };
  useEffect(() => {
    folderStore.getlist();
    acStore.getlist().then(() => {
      setCatList(acStore.list);
    });
  }, [folderStore, acStore]);

  // 添加事件
  const addHandler = () => {
    setProjectConfig(folderConfig);
    setIsModalOpen(true);
  };

  // 取消
  const cancelHandler = () => {
    setId(null);
    setIsModalOpen(false);
  };

  const cancelHandlerArch = () => {
    setIsModalOpenArchives(false);
  };

  // 文件夹点击
  const folderHandle = (e) => {
    folderStore.getAlist(e.identity).then((res) => {
      setIsModalOpenArchives(true);
    })
  };
  const onFinishFailed = () => {};
  return (
    <div className="contentBox">
      <Space direction="vertical" size="middle" style={{ display: "flex" }}>
        <Space direction="horizontal" size={"middle"}>
          <Button type="default" onClick={addHandler}>
            创建文件夹
          </Button>
        </Space>
        <Flex wrap gap="25px" justify="start">
          {Array.from({ length: folderStore.list?.length ?? 0 }, (_, i) => (
            <div
              key={i}
              onClick={()=>folderHandle(folderStore.list[i])}
              style={{ cursor: "pointer", width: "120px" }}
            >
              <FolderTwoTone rotate={-270} style={{ fontSize: "80px" }} />
              <p style={{ fontSize: "14px" }}>
                {folderStore.list[i].folder_name}
              </p>
            </div>
          ))}
        </Flex>
        <Modal
          title={"档案预览"}
          width={"80%"}
          open={isModalOpenArchives}
          onCancel={cancelHandlerArch}
          footer={null}
        >
          <Preview list={folderStore.alist} />
        </Modal>
        <Modal
          title={!tagId ? "添加文件夹" : "编辑文件夹"}
          width={600}
          open={isModalOpen}
          afterClose={() => formRef.current?.resetFields()}
          onOk={() => formRef.current?.submit()}
          onCancel={cancelHandler}
        >
          <SimpleForm
            formRef={formRef}
            createCallback={() => {}}
            formName="card_basic"
            colProps={12}
            span={6}
            subBtnName="提交"
            formDatas={projectConfig}
            onFinish={onFinish}
            initialValues={true}
            onFinishFailed={onFinishFailed}
          >
            <Form.Item
              key="ac_identity"
              label="所属档案类别"
              name="ac_identity"
              rules={[{ required: true, message: "请选择所属档案类别!" }]}
            >
              <Select placeholder="">
                {catList?.map((v: any) => {
                  return (
                    <Option key={v.identity} value={v.identity}>
                      {v.category_name}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </SimpleForm>
        </Modal>
      </Space>
    </div>
  );
};

export default inject(...["archivesStore", "folderStore", "acStore"])(
  observer(ArchivesFolder)
);