import React from "react";
import { Radio, Form, message, Table, Button } from "antd";
import { EditProcessType } from "@/api/node";
import { useConfigStore } from "..";
import { useModel } from "umi";
import SelectProcessorModal from "@/components/SelectProcessorModal/index";

export default function Processor() {
  const nodeData = useConfigStore((state) => state?.nodeData);
  const updateState = useConfigStore((state) => state.updateState);
  const { mode } = useModel("flowModel");

  // 设置处理人类型
  const handleSetProcessType = (e: any) => {
    EditProcessType({
      ...nodeData,
      processType: e.target.value,
    });
    updateState({
      nodeData: {
        ...nodeData,
        processType: e.target.value,
      },
    });
    message.success("保存成功");
  };

  const columns = [
    { title: "类型", dataIndex: "name" },
    { title: "处理人", dataIndex: "name" },
    { title: "生效条件", dataIndex: "name" },
    { title: "操作", dataIndex: "action" },
  ];

  return (
    <>
      <Form
        initialValues={{
          processType: nodeData?.processType,
        }}
        disabled={mode === "ops"}
      >
        <Form.Item label="处理方式" name="processType">
          <Radio.Group onChange={handleSetProcessType}>
            <Radio value={0}>任何一个</Radio>
            <Radio value={1}>并行处理</Radio>
            <Radio value={2}>串行处理</Radio>
          </Radio.Group>
        </Form.Item>
      </Form>
      {mode === "ops" && (
        <>
          <SelectProcessorModal
            trigger={<Button type="primary">+添加</Button>}
            nodeData={nodeData}
          />
          <Table columns={columns} dataSource={[]} />
        </>
      )}
    </>
  );
}
