import SimpleForm from "@/components/form/simple_form";
import { traningConfig } from "@/pages/training/traning_config";
import { Button, Form, FormInstance, Modal, Select } from "antd";
import React, { useEffect } from "react";
import { useState } from "react";
import baseHttp from "@/service/base";
import "./bot.less";
import { Store } from "antd/es/form/interface";
import { inject, observer } from "mobx-react";
import { FormType } from "@/components/form/interface";
const { Option } = Select;

const Dispath = (props: Store) => {
  const { trainingStore, trainingCatStore } = props;
  const openDispatch = () => {
    setIsModalOpen(true);
    setProjectConfig([
      ...traningConfig,
      {
        type: FormType.cehckboxGroup,
        label: "参与人员选择",
        name: "user_id",
        value: [],
        checkboxData: userList,
        rules: [{ required: true, message: "请选择参与人员!" }],
      },
    ]);
  };
  const handleCancle = () => {
    setIsModalOpen(false);
  };
  const handleSubmit = () => {
    setIsModalOpen(false);
  };
  const formRef = React.useRef<FormInstance>(null);
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const [projectConfig, setProjectConfig] = useState<any>([]);
  const [stashList, setStashList] = useState<any>([]);
  const [userList, setUserList] = useState<any>([]);

  useEffect(() => {
    try {
      trainingCatStore.getlist().then(() => {
        setStashList(trainingCatStore.list);
      });
      baseHttp.get("/user/list", null).then((res) => {
        let data = res.data?.record ?? [];
        data.forEach((item) => {
          item.label = item.account;
          item.value = item.identity;
        });
        setUserList(data ?? []);
      });
    } catch (error) {
      console.log(error);
    }
  }, [trainingCatStore]);

  const onFinish = (values: any) => {
    let data = {
      ...values,
      score: Number(values.score),
      count: Number(values.count),
    };
    trainingStore.add(data);
    setIsModalOpen(false);
  };
  return (
    <>
      <span onClick={openDispatch}>巡防调度</span>
      <Modal
        title={"发布调度任务"}
        className="owner_model"
        width={800}
        open={isModalOpen}
        afterClose={() => {}}
        onOk={() => {}}
        okText="确定"
        cancelText="取消"
        footer={[
          <Button key="return" ghost onClick={handleCancle}>
            取消
          </Button>,
          <Button
            className="btn-dp"
            key="submit"
            type="primary"
            ghost
            onClick={handleSubmit}
          >
            确定
          </Button>,
        ]}
        onCancel={() => {
          setIsModalOpen(false);
        }}
      >
        <div className="disPatch" style={{ fontSize: "#fff" }}>
          <SimpleForm
            formRef={formRef}
            createCallback={() => {}}
            formName="card_basic"
            colProps={25}
            subBtnName="提交"
            formDatas={projectConfig}
            onFinish={onFinish}
            initialValues={true}
            onFinishFailed={() => {}}
          >
            <>
              <Form.Item
                key="category_identity"
                label="训练类别"
                name="category_identity"
                rules={[{ required: true, message: "请选择训练类别!" }]}
              >
                <Select placeholder="">
                  {stashList?.map((v: any) => {
                    return (
                      <Option key={v.identity} value={v.identity}>
                        {v.name}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
            </>
          </SimpleForm>
        </div>
      </Modal>
    </>
  );
};
export default inject("trainingStore", "trainingCatStore")(observer(Dispath));