// 档案管理
import {
  Button,
  Space,
  Modal,
  FormInstance,
  GetProps,
  Tree,
  Row,
  Col,
  Popconfirm,
  PopconfirmProps,
} 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 { folderConfig } from "./archives_conf";
import { Form, Select } from "antd";
import "./preview.less";
import DirectoryTree from "antd/lib/tree/DirectoryTree";
import FileListPage from "@/pages/archives/file_list";
const { Option } = Select;
const ArchivesFolder = (props: Store) => {
  const { folderStore, acStore } = props;
  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 [tagPId, setPId] = useState<Number | null>(null);
  const [folderId, setFolderId] = useState<String | null>(null);
  const [catList, setCatList] = useState<any>(null); // 仓库列表
  const onFinish = (values: any) => {
    if (tagPId) {
      values.pid = tagPId;
    }
    if (!tagId) {
      folderStore.add(values);
    } else {
      folderStore.putItem(tagId, values);
    }
    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 = () => {};
  type DirectoryTreeProps = GetProps<typeof Tree.DirectoryTree>;
  const onSelect: DirectoryTreeProps["onSelect"] = (keys, info: any) => {
    setFolderId(info.node.identity);
  };

  const cancel: PopconfirmProps["onCancel"] = (e) => {
    console.log(e);
  };
  const onExpand: DirectoryTreeProps["onExpand"] = (keys, info) => {
    // console.log("Trigger Expand", keys, info);
  };
  return (
    <div className="contentBox">
      <Space direction="vertical" size="middle" style={{ display: "flex" }}>
        <Space direction="horizontal" size={"middle"}>
          <Button type="default" onClick={addHandler}>
            创建文件夹
          </Button>
        </Space>
        <Row>
          <Col span={16} push={8} style={{ border: "1px solid #ccc" }}>
            <FileListPage id={folderId} />
          </Col>
          <Col span={8} pull={16} style={{ border: "1px solid #ccc" }}>
            <DirectoryTree
              defaultExpandAll
              onSelect={onSelect}
              onExpand={onExpand}
              treeData={folderStore.list}
              titleRender={(nodeData: any) => {
                return (
                  <>
                    {nodeData.folder_name}
                    <Space>
                      <span
                        style={{ marginLeft: "10px", color: "blue" }}
                        onClick={(e) => {
                          setPId(nodeData.id); // 设置当前id 为父节点id
                          e?.stopPropagation();
                          addHandler();
                          console.log("new");
                        }}
                      >
                        新建
                      </span>
                      <Popconfirm
                        title="Delete the task"
                        description="Are you sure to delete this task?"
                        onConfirm={() => {
                          remove(nodeData.id);
                        }}
                        onCancel={cancel}
                        okText="Yes"
                        cancelText="No"
                      >
                        <Button danger variant="solid" size="small">
                          删除
                        </Button>
                      </Popconfirm>
                    </Space>
                  </>
                );
              }}
            />
          </Col>
        </Row>

        <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)
);
