import FormUI, { ColumnItem } from "@queenjs/components/FormUI";
import { set } from "lodash";
import { defineUI } from "queenjs";
import { any } from "vue-types";

const meshColumns: ColumnItem[] = [
  {
    label: "缩放",
    dataIndex: "background.image",
    component: "Slider",
    props: {
      max: 2,
      min: 0.1,
    },
  },
  {
    label: "位置",
    dataIndex: "background.image",
    component: "Slider",
    props: {
      max: 2,
      min: 0.1,
    },
  },
  {
    label: "旋转",
    dataIndex: "background.image",
    component: "Slider",
    props: {
      max: 2,
      min: 0.1,
    },
  },
];

export default defineUI({
  props: {
    data: any(),
  },
  setup(props) {
    // const resource = useResource();
    // const queditor = useQueditor();

    function changeVal(e: { dataIndex: string; value: any }) {
      set(props.data, e.dataIndex, e.value);
    }

    return () => {
      const { data } = props;
      return (
        <div class="w-300px flex flex-col">
          <div class="border-bottom p-15px text-16px text-white">属性编辑</div>
          <div class="py-15px flex-1 overflow-y-auto scrollbar">
            <FormUI data={data} columns={meshColumns} onChange={changeVal} />
          </div>
        </div>
      );
    };
  },
});
