import {
  Button,
  Col,
  Divider,
  Flex,
  FormInstance,
  message,
  Modal,
  Row,
} from "antd";
import { Store } from "antd/es/form/interface";
import { inject, observer } from "mobx-react";
import { useState } from "react";
import AliUpload from "@/components/ali_upload";
import SimpleForm from "@/components/form/simple_form";
import React from "react";
import { folderConfig } from "../archives/archives_conf";
interface TaskArchivesProps {
  acStore?: Store;
  folderStore?: Store;
  trainingStore?: Store;
  taskId: string;
  category_identity: string;
}

const TaskArchives = (props: TaskArchivesProps) => {
  const { folderStore, trainingStore, taskId, category_identity } = props;
  const [isModalOpenUser, setIsModalOpenUser] = useState<boolean>(false);
  const [folderModal, setfolderModal] = useState<boolean>(false);
  const [folderList, setfolderList] = useState<any>([]);
  const [projectConfig, setProjectConfig] = useState<any>([]);
  const [identity, setIdentity] = useState<string>("");
  const [imageList, setImageList] = useState<any>([]);
  const formRef = React.useRef<FormInstance>(null);

  const getFolderList = () => {
    folderStore?.getFolderList(category_identity).then((res) => {
      setfolderList(res?.data?.record ?? []);
    });
  };
  const onFinish = async (values: any) => {
    let data = values;
    data.ac_identity = category_identity;
    folderStore?.add(data).then(() => {
      message.success("保存成功");
      getFolderList();
      setfolderModal(false);
    });
  };

  const save = async () => {
    message.loading("文件保存中...");
    let imlist = imageList;
    imlist.forEach((element) => {
      element.file_url = element.url;
      element.file_name = element.name;
    });
    let data = {
      task_identity: taskId, // 任务id
      identity: identity, // 文件夹id
      list: imlist,
      category_identity: category_identity,
    };
    await trainingStore?.addAcieves(data);
    message.success("档案已保存到当前文件夹");
  };
  const handleSelect = async (identity) => {
    await folderStore?.getAlist(identity).then(() => {
      folderStore.alist?.forEach((elem) => {
        elem.url = elem.file_url;
        elem.name = elem.file_name;
      });
      setImageList(folderStore.alist ?? []);
    });
    setIdentity(identity);
  };
  const onFinishFailed = () => {};

  return (
    <>
      <Button
        type="dashed"
        size="small"
        onClick={() => {
          setIsModalOpenUser(true);
          getFolderList();
        }}
      >
        档案上传
      </Button>
      <Modal
        title="创建文件夹"
        width={600}
        open={folderModal}
        okText="确认"
        cancelText="取消"
        onOk={() => formRef.current?.submit()}
        onCancel={() => setfolderModal(false)}
      >
        <SimpleForm
          formRef={formRef}
          createCallback={() => {}}
          formName="card_basic"
          colProps={12}
          span={6}
          subBtnName="提交"
          formDatas={projectConfig}
          onFinish={onFinish}
          initialValues={true}
          onFinishFailed={onFinishFailed}
        ></SimpleForm>
      </Modal>
      <Modal
        title="档案上传"
        width={1200}
        open={isModalOpenUser}
        okText="确认"
        cancelText="取消"
        onCancel={() => setIsModalOpenUser(false)}
      >
        <Row gutter={16}>
          <Col span={4}>
            <p>文件夹列表</p>
            <Divider dashed />
            <Button
              type="primary"
              onClick={() => {
                setfolderModal(true);
                setProjectConfig(folderConfig);
              }}
            >
              创建文件夹
            </Button>
            {folderList?.map((v: any) => {
              return (
                <p
                  style={{
                    cursor: "pointer",
                    color: identity === v.identity ? "blue" : "",
                  }}
                  key={v.identity}
                  onClick={() => {
                    handleSelect(v.identity);
                  }}
                >
                  {v.folder_name}
                </p>
              );
            })}
          </Col>
          <Col span={20}>
            <Flex justify={"space-between"}>
              <p>档案</p>
              <Button type="primary" onClick={save}>
                保存
              </Button>
            </Flex>
            <Divider dashed />
            <AliUpload
              value={imageList}
              maxCount={100}
              onChange={(v) => {
                setImageList(v);
              }}
            />
          </Col>
        </Row>
      </Modal>
    </>
  );
};

export default inject("folderStore", "trainingStore")(observer(TaskArchives));