import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
import FormUI, { ColumnItem } from "@queenjs/components/FormUI";
import { set } from "lodash";
import { defineComponent } from "vue";
import { any } from "vue-types";

const styleColumns: ColumnItem[] = [
  {
    label: "内边距",
    dataIndex: "padding",
    component: "Input",
  },
];

export const PageForm = defineComponent({
  props: {
    component: any<DesignComp>().isRequired,
  },
  setup(props) {
    function changeVal(e: { dataIndex: string; value: any }) {
      set(props.component.layout, e.dataIndex, e.value);
    }

    return () => {
      const { layout } = props.component;
      return (
        <>
          <div>页面样式</div>
          <FormUI data={layout} columns={styleColumns} onChange={changeVal} />
        </>
      );
    };
  },
});