import React, { useEffect } from "react";
import {
  Table,
  Button,
  Switch,
  TableColumnType,
  Space,
  Select,
  Modal,
  message,
} from "antd";
import {
  GetAllColumnConfigs,
  EditColumnConfig,
  DeleteColumnConfig,
  GetInformColums,
} from "@/api/node";
import { useConfigStore } from "..";
import { useRequest, useModel } from "umi";
import ColumnModal from "@/components/ColumnModal";

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

  const { data, loading, run, refresh } = useRequest(GetAllColumnConfigs, {
    manual: true,
  });

  useEffect(() => {
    if (nodeData?.columnLinkId) {
      run({ id: nodeData?.columnLinkId });
    }
  }, [nodeData]);

  const columns: TableColumnType[] = [
    {
      title: "字段代码",
      dataIndex: "schemaName",
    },
    {
      title: "字段名称",
      dataIndex: "name",
    },
    {
      title: "来源类型",
      dataIndex: "whereInputType",
      render: (val, record) => (
        <Select
          style={{ width: 120 }}
          value={val}
          disabled
          options={[
            { label: "无", value: "" },
            { label: "基础数据", value: "1" },
            { label: "数据视图", value: "2" },
          ]}
        />
      ),
    },
    {
      title: "内容",
      dataIndex: "whereInputContent",
    },
    {
      title: "需求描述",
      dataIndex: "memo",
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="small">
          <Button type="link" danger onClick={() => handleDelete(record)}>
            删除
          </Button>
        </Space>
      ),
    },
  ];

  // 删除字段
  const handleDelete = (record: any) => {
    Modal.confirm({
      title: "提示",
      content: "是否删除该数据？",
      okText: "删除",
      cancelText: "取消",
      onOk: async () => {
        await DeleteColumnConfig({ id: record.id });
        message.success("删除成功");
        refresh();
      },
    });
  };

  // 新增字段配置
  const handleAddConfig = async (list: any) => {
    if (!list?.length) return;
    const data = list[0];
    await EditColumnConfig({
      columnLinkId: nodeData?.columnLinkId,
      columnId: data.c_Id,
      name: data.c_Name,
      columnLevel: 3,
      type: 1,
      columnKey: data.schemaName + "." + data.c_SchemaName,
    });
    message.success("添加成功");
    refresh();
  };

  return (
    <div>
      <div className="mb-12px">
        <ColumnModal
          trigger={<Button type="primary" style={{display: mode === 'ops' ? 'none' : 'block'}}>+字段</Button>}
          api={() => GetInformColums({ informLevel: 3, nodeId: nodeData?.id })}
          defaultParams={[
            {
              id: nodeData?.columnLinkId,
            },
          ]}
          onChange={handleAddConfig}
        />
      </div>
      <Table
        columns={columns}
        dataSource={data?.result || []}
        loading={loading}
        rowKey={"id"}
        pagination={false}
      />
    </div>
  );
}
