// 档案管理

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 MinusCircleOutlined from "@ant-design/icons/lib/icons/MinusCircleOutlined";
import FolderTwoTone from "@ant-design/icons/FolderOpenTwoTone";
import { folderConfig } from "./archives_conf";
import { Form, Select } from "antd";
import { useNavigate } from "react-router";
import "./preview.less";
const { Option } = Select;
const ArchivesFolder = (props: Store) => {
  const { folderStore, acStore } = props;
  const nav = useNavigate();
  const [isModalOpen, setIsModalOpen] = 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 remove = (id: string) => {
    folderStore.deleteItem(id);
  };

  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
              className="folder_box"
              key={i}
              style={{
                cursor: "pointer",
                width: "120px",
                position: "relative",
              }}
            >
              <MinusCircleOutlined
                onClick={() => {
                  remove(folderStore.list[i].id);
                }}
                className="close_icon"
              />
              <FolderTwoTone
                rotate={-270}
                style={{ fontSize: "70px" }}
                onClick={() =>
                  nav("/admin/archives/folder/" + folderStore.list[i].identity)
                }
              />
              <p style={{ fontSize: "14px" }}>
                {folderStore.list[i].folder_name}
              </p>
            </div>
          ))}
        </Flex>
        <Modal
          title={!tagId ? "添加文件夹" : "编辑文件夹"}
          width={600}
          open={isModalOpen}
          afterClose={() => formRef.current?.resetFields()}
          onOk={() => formRef.current?.submit()}
          onCancel={cancelHandler}
          okText="确定"
          cancelText="取消"
        >
          <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)
);