import { Button, Space, Modal, FormInstance } 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, defaultConfig } from "./whseMgmt_column";
import { useNavigate } from "react-router";

const WhseMgmt = (props: Store) => {
  const { stashStore } = props;
  const nav = useNavigate();
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const [projectConfig, setProjectConfig] = useState<any>([]);
  const formRef = React.useRef<FormInstance>(null);
  const [record, setRecord] = useState<any>(null);
  

  useEffect(() => {
    stashStore.getlist();
    setProjectConfig(defaultConfig);
  }, [stashStore]);
  const column_widget = (any, record) => {
    return (
      <Space wrap>
        <Button
          type="dashed"
          size="small"
          onClick={() => { 
            nav("/admin/whse/storage/" + record.identity);
          }}
        >
          货架管理
        </Button>
        <Button
          type="dashed"
          size="small"
          onClick={() => {
            edit(record);
          }}
        >
          编辑
        </Button>

        <Button
          type="dashed"
          danger
          size="small"
          onClick={() => {
            stashStore.deleteItem(record.id);
          }}
        >
          删除
        </Button>
      </Space>
    );
  };
  // 编辑按钮
  const edit = (record) => {
    setIsModalOpen(true);
    setRecord(record);
  };
  // 表单提交
  const onFinish = (values: any) => {
    let data = {
      ...values,
      score: Number(values.score),
    };
    data.file_url = "";
    if (!record?.id) {
      stashStore.add(data);
    } else {
      stashStore.putItem(record.id, data);
    }
    setIsModalOpen(false);
  };
  const addhandler = () => {
    setRecord(null);
    setProjectConfig(defaultConfig);
    setIsModalOpen(true);
  };

  const onFinishFailed = () => {};
  return (
    <div className="contentBox">
      <Space direction="vertical" size="middle" style={{ display: "flex" }}>
        <Space direction="horizontal" size={"middle"}>
          <Button onClick={addhandler}>新增仓库</Button>
        </Space>
        <BTable
          store={stashStore}
          columns={[
            ...columns,
            {
              title: "操作",
              dataIndex: "id",
              ellipsis: {
                showTitle: false,
              },
              render: (any, record) => column_widget(any, record),
            },
          ]}
          dataSource={stashStore.list}
        />
        <Modal
          title={!record?.id ? "添加仓库" : "编辑仓库"}
          width={1200}
          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}
          />
        </Modal>
      </Space>
    </div>
  );
};

export default inject("stashStore")(observer(WhseMgmt));
