import { Dict_Imgs } from "@/dict";
import { createAttrsForm } from "../../../defines/createAttrsForm";
import { createCompHooks } from "../../../defines/createCompHooks";
import { createCompId } from "../../../defines/createCompId";
import { createColorOpts } from "../../../defines/formOpts/createColorOpts";

export { Component } from "./component";

export const options = {
  name: "标题",
  thumbnail: require("@/assets/comps/title1/thumbnail.png"),
};

export const { createComp, useCompData } = createCompHooks({
  layout: {
    size: [750, 172],
  },
  value: {
    themeColor: "#666666",
  },
  children: {
    title: () =>
      createCompId("Text", {
        value: `<p style="text-align:center;line-height:1.5;"><span style="color:hsl(0, 0%, 0%);font-size:28px;">我的风格我选择</span></p>`,
        layout: {
          textAlign: "center",
          size: [750, 84],
        },
      }),
    subTitle: () =>
      createCompId("Text", {
        value: `<p style="text-align:center;line-height:1.5;"><span style="color:hsl(0, 0%, 30%);font-size:16px;">2023主推新品</span></p>`,
        layout: {
          textAlign: "center",
          margin: "5px auto 0",
          size: [300, 48],
        },
      }),
  },
});

export const Form = createAttrsForm([
  {
    label: "主题颜色",
    dataIndex: "value.themeColor",
    ...createColorOpts(),
  },
]);