import { Button, Space, Modal, FormInstance, Select } from "antd";
import { inject, observer } from "mobx-react";
import BTable from "@/components/b_table";
import { useEffect, useState } from "react";
import { Store } from "antd/lib/form/interface";
import SimpleForm from "@/components/form/simple_form";
import React from "react";
import { columns_ac, defaultConfig } from "./archivesCat_clumn";
import { Form } from "antd";
import dayjs from "dayjs";
const { Option } = Select;
const Archive = (props: Store) => {
  const { archivesStore, folderStore } = props;
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const [projectConfig, setProjectConfig] = useState<any>([]);
  const formRef = React.useRef<FormInstance>(null);
  const [record, setRecord] = useState<any>(null);
  const [stashList, setStash] = useState<any>(null); // 仓库列表
  // 获取物资列表
  useEffect(() => {
    folderStore.getlist().then(() => {
      setStash(folderStore.list);
      setProjectConfig(defaultConfig);
    });
  }, [folderStore]);

  // 获取分类
  useEffect(() => {
    archivesStore.getlist();
  }, [archivesStore]);

  const column_widget = (any, record) => {
    return (
      <Space wrap>
        <Button
          type="dashed"
          size="small"
          onClick={() => {
            edit(record);
          }}
        >
          编辑
        </Button>

        <Button
          type="dashed"
          danger
          size="small"
          onClick={() => {
            archivesStore.deleteItem(record.id);
          }}
        >
          删除
        </Button>
      </Space>
    );
  };
  const edit = (record) => {
    setIsModalOpen(true);
    record.expiry_date = dayjs(record.expiry_date);
    setRecord(record);
  };
  const onFinish = (values: any) => {
    let data = {
      ...values,
      file_url: values.file_url[0].name,
    };
    if (!record?.id) {
      archivesStore.add(data);
    } else {
      archivesStore.putItem(record.id, data);
    }
    setIsModalOpen(false);
  };

  const onFinishFailed = () => {};
  return (
    <div className="contentBox">
      <Space direction="vertical" size="middle" style={{ display: "flex" }}>
        <Space direction="horizontal" size={"middle"}>
          <Button
            type="default"
            onClick={() => {
              setRecord(null);
              setProjectConfig(defaultConfig);
              setIsModalOpen(true);
            }}
          >
            添加档案
          </Button>
        </Space>
        <BTable
          store={archivesStore}
          columns={[
            ...columns_ac,
            {
              title: "操作",
              dataIndex: "id",
              ellipsis: {
                showTitle: false,
              },
              render: (any, record) => column_widget(any, record),
            },
          ]}
          dataSource={archivesStore.list}
        />
        <Modal
          title={!record?.id ? "添加档案" : "编辑档案"}
          width={600}
          open={isModalOpen}
          afterClose={() => formRef.current?.resetFields()}
          onOk={() => formRef.current?.submit()}
          okText="确定"
          cancelText="取消"
          onCancel={() => {
            setIsModalOpen(false);
          }}
        >
          <SimpleForm
            formRef={formRef}
            createCallback={() => {
              if (record?.id) {
                formRef.current?.setFieldsValue(record);
              } else {
                formRef.current?.setFieldsValue(null);
              }
            }}
            formName="card_basic"
            colProps={25}
            subBtnName="提交"
            formDatas={projectConfig}
            onFinish={onFinish}
            initialValues={true}
            onFinishFailed={onFinishFailed}
          >
            <>
              <Form.Item
                key="folder_identity"
                label="文件夹"
                name="folder_identity"
                rules={[{ required: true, message: "请选择文件夹!" }]}
              >
                <Select placeholder="">
                  {stashList?.map((v: any) => {
                    return (
                      <Option key={v.identity} value={v.identity}>
                        {v.folder_name}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
            </>
          </SimpleForm>
        </Modal>
      </Space>
    </div>
  );
};

export default inject("archivesStore", "folderStore")(observer(Archive));
