import { Button, Form, FormInstance, Select, Space } 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 React from "react";
import { serchConfig, studyColumns } from "./column";
import SimpleForm from "@/components/form/simple_form";
const { Option } = Select;

const Signin = (props: Store) => {
  const { signinStore } = props;
  const serchFormRef = React.useRef<FormInstance>(null);
  const [tagList, setTagList] = useState<any>([]);

  useEffect(() => {
    signinStore.getlist();
    setTagList([
      {
        id: 0,
        name: "全部",
      },
      {
        id: 1,
        name: "网格员",
      },
      {
        id: 2,
        name: "微网格员",
      },
      {
        id: 3,
        name: "基干民兵",
      },
      {
        id: 4,
        name: "普通民兵",
      },
      {
        id: 5,
        name: "巡防大队",
      },
    ]);
  }, [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: 20,
    };
    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>
              <Form.Item key="tags" label="身份" name="tags" initialValue={0}>
                <Select placeholder="">
                  {tagList?.map((v: any) => {
                    return (
                      <Option key={v.id} value={v.id}>
                        {v.name}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
              <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));
