import BTable from "@/components/b_table";
import { inject, observer } from "mobx-react";
import { Store } from "antd/lib/form/interface";
import { Button, FormInstance, Modal, Space } from "antd";
import { defaultConfig, leaveColumns } from "./levcat_column";
import { useEffect, useState } from "react";
import SimpleForm from "@/components/form/simple_form";
import React from "react";
const Leave = (props: Store) => {
  const { leaveStore } = props;
  const formRef = React.useRef<FormInstance>(null);
  const [record, setRecord] = useState<any>(null);
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const [projectConfig, setProjectConfig] = useState<any>([]);
  useEffect(() => {
    leaveStore.getlist();
    setProjectConfig(defaultConfig);
  }, [leaveStore]);
  const onFinish = (values: any) => {
    let data = {
      ...values,
      status: 2,
    };
    leaveStore.access(record.id, data);
    setIsModalOpen(false);
  };
  const onFinishFailed = () => {};
  const edit = (record) => {
    setIsModalOpen(true);
    setRecord(record);
  };
  const access = (record) => {
    leaveStore.access(record.id, { status: 1 });
  };
  const column_widget = (any, record) => {
    if (record.status === 0) {
      return (
        <Space wrap>
          <Button
            type="dashed"
            size="small"
            onClick={() => {
              edit(record);
            }}
          >
            驳回
          </Button>
          <Button
            type="dashed"
            size="small"
            onClick={() => {
              access(record);
            }}
          >
            通过
          </Button>
        </Space>
      );
    }
    return <div></div>;
  };
  return (
    <>
      <BTable
        store={leaveStore}
        columns={[
          ...leaveColumns,
          {
            title: "操作",
            dataIndex: "id",
            ellipsis: {
              showTitle: false,
            },
            render: (any, record) => column_widget(any, record),
          },
        ]}
        dataSource={leaveStore.list}
      />
      <Modal
        title={"审批"}
        width={500}
        open={isModalOpen}
        afterClose={() => formRef.current?.resetFields()}
        onOk={() => formRef.current?.submit()}
        onCancel={() => {
          setIsModalOpen(false);
        }}
        okText="确定"
        cancelText="取消"
      >
        <SimpleForm
          formRef={formRef}
          formName="card_basic"
          colProps={25}
          subBtnName="提交"
          formDatas={projectConfig}
          onFinish={onFinish}
          initialValues={true}
          onFinishFailed={onFinishFailed}
        />
      </Modal>
    </>
  );
};

// export default Leave;
export default inject("leaveStore")(observer(Leave));
