import { Form, Input } from "ant-design-vue";
import FlowGraph from "./graph";
import "./index.css";

export default {
  props: {
    groups: { type: Array, default: () => [] },
    graphData: { type: Object, default: () => ({}) },
    isShow: { type: Boolean, default: true },
  },
  data() {
    return {
      form: {},
      flowGraph: null,
    };
  },
  watch: {
    "groups.length": function () {
      this.initFlowGraph();
    },
    graphData: {
      handler() {
        FlowGraph.initGraphData(this.graphData);
      },
      deep: true,
    },
  },
  mounted() {
    this.initFlowGraph();
    const resizeFn = () => {
      const { width, height } = this.getContainerSize();
      this.flowGraph.resize(width, height);
    };
    resizeFn();
    window.addEventListener("resize", resizeFn);
    this.$once("hooks:beforeDestroy", () => {
      window.removeEventListener("resize", resizeFn);
    });
  },
  methods: {
    initFlowGraph() {
      this.flowGraph = FlowGraph.init({
        groups: this.groups,
      });

      this.flowGraph.on("node:click", (event) => {});
    },
    flowGraphJson() {
      return this.flowGraph.toJSON();
    },
    getContainerSize() {
      return {
        width: document.body.offsetWidth - 280,
        height: document.body.offsetHeight - 38,
      };
    },
    renderConfigPanel() {
      return (
        <Form layout="vertical" requiredMark={false}>
          <Form.Item label="节点名称" name="name">
            <Input placeholder="input placeholder" />
          </Form.Item>
          <Form.Item label="Field C">
            <Input placeholder="input placeholder" />
          </Form.Item>
          <Form.Item label="Field D">
            <Input placeholder="input placeholder" />
          </Form.Item>
        </Form>
      );
    },
  },
  render() {
    return (
      <div class="flow-graph-content">
        {this.isShow && (
          <div class="flow-graph-node-source-tree" id="toolbox" />
        )}
        <div class="flow-graph-edit-panel">
          <div class="flow-graph-dag-canvas" id="flowContainer" />
          {/* <div class="flow-graph-conf-panel"></div> */}
        </div>
      </div>
    );
  },
};
