import { ComponentMetadata, Snippet } from "@alilc/lowcode-types";

const DivMeta: ComponentMetadata = {
  componentName: "Div",
  title: "Div",
  docUrl: "",
  screenshot: "",
  devMode: "proCode",
  npm: {
    package: "@pisell/materials",
    version: "1.0.4",
    exportName: "Div",
    main: "src/index.tsx",
    destructuring: true,
    subName: "",
  },
  props: [
    {
      title: "基础类名",
      name: "baseClassName",
      propType: "string",
      setter: ["StringSetter", "VariableSetter"]
    },
    {
      title: "自定义类名",
      name: "className",
      propType: "string",
      setter: ["StringSetter", "VariableSetter"]
    },
    {
      title: "渲染内容",
      name: "render",
      propType: "func",
      setter: [
        {
          componentName: "FunctionSetter",
        },
        "VariableSetter",
      ],
    },
    {
      title: "其他属性",
      name: "others",
      propType: "object",
      setter: ["JsonSetter", "VariableSetter"]
    }
  ],
  configure: {
    supports: {
      style: true,
      className: true,
      events: [
        {
          name: "onClick",
          template:
            "onClick(event,${extParams}){\n// 点击时的回调\nconsole.log('onClick', event);}",
        },
        {
          name: "onMouseEnter",
          template: "onMouseEnter(event){\n// 鼠标进入时的回调\n}",
        },
        {
          name: "onMouseLeave",
          template: "onMouseLeave(event){\n// 鼠标离开时的回调\n}",
        },
      ],
      loop: true,
    },
    component: {
      isContainer: true,
    },
  },
};

const snippets: Snippet[] = [
  {
    title: "Div",
    screenshot: "",
    schema: {
      componentName: "Div",
      props: {},
    },
  },
];

export default {
  ...DivMeta,
  snippets,
};