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

const matColumns: ColumnItem[] = [
  {
    label: "缩放",
    dataIndex: "uv.scale",
    component: "Slider",
    props: {
      max: 5,
      min: 0,
      step: 0.1,
    },
  },
  {
    label: "X轴偏移",
    dataIndex: "uv.offsetX",
    component: "Slider",
    props: {
      max: 1,
      min: -1,
      step: 0.01,
    },
  },
  {
    label: "Y轴偏移",
    dataIndex: "uv.offsetY",
    component: "Slider",
    props: {
      max: 1,
      min: -1,
      step: 0.01,
    },
  },
  {
    label: "旋转",
    dataIndex: "uv.rotate",
    component: "Slider",
    props: {
      max: 360,
      min: 0,
    },
  },
  {
    label: "金属度",
    dataIndex: "metalness.factor",
    component: "Slider",
    props: {
      max: 1,
      min: 0,
      step: 0.01,
    },
  },
  {
    label: "粗糙度",
    dataIndex: "roughness.factor",
    component: "Slider",
    props: {
      max: 1,
      min: 0,
      step: 0.01,
    },
  },
];

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

    function changeVal(e: { dataIndex: string; value: any }) {
      set(props.data, e.dataIndex, e.value);
      queditor.actions.updateCurrPackFormData(
        queditor.store.currActiveMat,
        e.dataIndex,
        e.value,
        { combine: true }
      );
    }

    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="px-15px py-15px flex-1 overflow-y-auto scrollbar">
            <BaseInfo data={data} />
            <div class="border-bottom my-16px"></div>
            <div class="-mx-15px">
              <FormUI data={data} columns={matColumns} onChange={changeVal} />
            </div>
          </div>
        </div>
      );
    };
  },
});
