import { defineUI } from "queenjs";
import { h } from "vue";
import { useEditor } from "../../../..";
import { CompTree } from "./CompTree";

export default defineUI({
  setup() {
    const editor = useEditor();

    return () => {
      const { currComp } = editor.store;
      const Form = editor.controls.compUICtrl.state.components.get(
        currComp?.compKey
      )?.Form;
      return (
        <div class="flex flex-col h-1/1">
          <div class="p-16px border-bottom !border-2px">设置栏</div>
          <div class="flex-1 p-16px scrollbar">
            <Form component={currComp} />
          </div>
          <div class="p-16px border-bottom !border-2px border-top">组件树</div>
          <div class="h-300px py-20px pr-20px scrollbar">
            <CompTree />
          </div>
        </div>
      );
    };
  },
});