import { Button, FormInstance, Space } from "antd";
import { inject, observer } from "mobx-react";
import BTable from "@/components/b_table";
import { useEffect } from "react";
import { Store } from "antd/lib/form/interface";
import React from "react";
import { serchConfig, studyColumns } from "./column";
import SimpleForm from "@/components/form/simple_form";

const Signin = (props: Store) => {
  const { signinStore } = props;
  const serchFormRef = React.useRef<FormInstance>(null);
  useEffect(() => { 
    signinStore.getlist();
  }, [signinStore]);

  const onSerchFinish = (values: any) => {
    let query = {
      ...values,
      start_time: values.start_time?.format("YYYY-MM-DD HH:mm"),
      end_time: values.end_time?.format("YYYY-MM-DD HH:mm"),
      page: 1,
      page_size: 10,
    };
    signinStore.getlist(query);
  };
  const onFinishFailed = () => {};
  return (
    <div className="contentBox">
      <Space direction="vertical" size="middle" style={{ display: "flex" }}>
        <Space
          direction="horizontal"
          size={"middle"}
          style={{ display: "flex", justifyContent: "space-between" }}
        >
          <SimpleForm
            formRef={serchFormRef}
            createCallback={() => {}}
            formName="serch_basic"
            colProps={30}
            span={8}
            layout="inline"
            formDatas={serchConfig}
            onFinish={onSerchFinish}
            initialValues={true}
            onFinishFailed={onFinishFailed}
          >
            <Space>
              <Button
                type="primary"
                onClick={() => {
                  serchFormRef.current?.submit();
                }}
              >
                查询
              </Button>
              <Button
                onClick={() => {
                  serchFormRef.current?.resetFields();
                  serchFormRef.current?.submit();
                }}
              >
                重置
              </Button>
              <Button onClick={() => {
                signinStore.exports();
              }}>导出</Button>
            </Space>
          </SimpleForm>
        </Space>

        <BTable
          store={signinStore}
          columns={studyColumns}
          dataSource={signinStore.list}
        />
      </Space>
    </div>
  );
};

export default inject("signinStore")(observer(Signin));