import { Dict_Imgs } from "@/dict";
import { createAttrsForm } from "../../defines/createAttrsForm";
import { createCompHooks } from "../../defines/createCompHooks";
import Slider from "../../formItems/Slider";

export { Component } from "./component";

export const options = {
  name: "图片",
  thumbnail: require("@/modules/editor/assets/icons/picture.svg"),
};

export const { createComp, useCompData } = createCompHooks({
  value: { url: Dict_Imgs.Default, x: 0, y: 0, s: 1, opacity: 1 },
  layout: {
    size: [750, 400],
  },
});

export const Form = createAttrsForm([
  {
    label: "图片",
    dataIndex: "value.url",
    component: "Input",
  },
  {
    label: "x偏移",
    dataIndex: "value.x",
    component: "Input",
  },
  {
    label: "y偏移",
    dataIndex: "value.y",
    component: "Input",
  },
  {
    label: "缩放",
    dataIndex: "value.s",
    component: "Input",
  },
  {
    label: "透明度",
    dataIndex: "value.opacity",
    component: Slider,
    props: {
      min: 0,
      max: 1,
      step: 0.01,
    },
  },
]);