import React, { useEffect, useMemo } from "react";
import { Table, Select, Switch, message } from "antd";
import { useConfigStore } from "..";
import { useRequest, useModel } from "umi";
import {
  GetOtherStepNodes,
  EditJumpNodeId,
  EditJumpTypeBinary,
} from "@/api/node";

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

  const { run, data, loading } = useRequest(GetOtherStepNodes, {
    manual: true,
    cacheKey: `GetOtherStepNodes_${nodeData?.id}_${nodeData?.wfdWorkflowId}`,
    cacheTime: 1000 * 60 * 10,
    staleTime: 1000 * 60 * 10,
  });

  useEffect(() => {
    nodeData?.id && run({ id: nodeData?.id, selectedId: nodeData?.wfdWorkflowId });
  }, [nodeData]);

  // 修改跳转方式
  const handleChangeJumpTypeBinary = async (record: any, val: boolean) => {
    const jumpTypeBinary = nodeData?.jumpTypeBinary || "00000";
    const list = jumpTypeBinary.split("");
    list[record.key] = val ? "1" : "0";
    await EditJumpTypeBinary({
      ...nodeData,
      jumpTypeBinary: list.join(""),
    });
    updateState({
      nodeData: {
        ...nodeData,
        jumpTypeBinary: list.join(""),
      },
    });
    message.success("修改成功");
  };

  // 修改跳转节点
  const handleEditJumpNodeId = async (record: any, val: string) => {
    await EditJumpNodeId({
      ...nodeData,
      jumpNodeId: val,
    });
    updateState({
      nodeData: {
        ...nodeData,
        jumpNodeId: val,
      },
    });
    message.success("修改成功");
  };

  const columns = [
    {
      title: "类型",
      dataIndex: "type",
    },
    {
      title: "跳过方式",
      dataIndex: "checked",
      render: (text: boolean, record: any) => (
        <Switch
          disabled={mode === "ops"}
          checked={text}
          onChange={(val) => handleChangeJumpTypeBinary(record, val)}
        />
      ),
    },
    {
      title: "配置",
      dataIndex: "options",
      width: 200,
      render: (_dom: any, record: any) =>
        record?.key === 2 && record.checked ? (
          <Select
            loading={loading}
            options={(data?.result || []).map((item: any) => ({
              label: item.displayName,
              value: item.id,
              key: item.id,
            }))}
            value={record.nodeId}
            placeholder="请选择跳转节点"
            onChange={(val) => handleEditJumpNodeId(record, val)}
          />
        ) : null,
    },
  ];

  const dataSource = useMemo(() => {
    const jumpTypeBinary = nodeData?.jumpTypeBinary || "00000";
    const jumpNodeId = nodeData?.jumpNodeId;
    const list = jumpTypeBinary.split("");
    return [
      { key: 4, type: "处理人与提交人相同跳过", checked: list[4] === "1" },
      { key: 3, type: "与前置节点处理人相同跳过", checked: list[3] === "1" },
      {
        key: 2,
        type: "与某一节点处理人相同跳过",
        nodeId: jumpNodeId,
        checked: list[2] === "1",
      },
      {
        key: 1,
        type: "与前面任意节点处理人相同跳过",
        checked: list[1] === "1",
      },
      { key: 0, type: "无对应处理人跳过跳过", checked: list[0] === "1" },
    ];
  }, [nodeData]);

  return (
    <div>
      <h3>请选择跳过方式:</h3>
      <Table columns={columns} dataSource={dataSource} pagination={false} />
    </div>
  );
}
