import { createAttrsForm } from "../../../defines/createAttrsForm";
import { createCompHooks } from "../../../defines/createCompHooks";
import { createCompId } from "../../../defines/createCompId";

export { Component } from "./component";

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

export const { createComp, useCompData } = createCompHooks({
  value: {},
  layout: {
    size: [750, 1200],
  },
  children: {
    img1: () =>
      createCompId("Image", {
        value: {
          url: require("@/assets/comps/Cover2/img_1.png"),
          x: 0,
          y: 0,
          s: 1,
        },
        layout: {
          size: [451, 1022],
        },
      }),
    img2: () =>
      createCompId("Image", {
        value: {
          url: require("@/assets/comps/Cover2/img_2.jpg"),
        },
        layout: {
          size: [167, 306],
        },
      }),
    img3: () =>
      createCompId("Image", {
        value: {
          url: require("@/assets/comps/Cover2/img_3.jpg"),
        },
        layout: {
          size: [167, 208],
        },
      }),
    title: () =>
      createCompId("Text", {
        value: `<p style="text-align:center;"><span style="color:hsl(0,0%,60%);font-size:42px;">NEW &nbsp;</span><span style="font-size:42px;"> FasHION</span></p><p>&nbsp;</p>`,
        layout: {
          size: [750, 110],
        },
      }),
    text1: () =>
      createCompId("Text", {
        value: `<p><span style="color:hsl(0,0%,100%);font-size:42px;"><strong>P190</strong></span></p><p><span style="color:hsl(0,0%,100%);font-size:20px;"><strong>全新 &nbsp; &nbsp; 时尚 &nbsp; &nbsp;</strong></span><span style="color:hsl(0,0%,0%);font-size:20px;"><strong>简约</strong></span></p>`,
        layout: {
          size: [380, 200],
        },
      }),
    text2: () =>
      createCompId("Text", {
        value: `<p style="text-align:right;"><span style="color:hsl(0, 0%, 0%);">2023新品</span></p>`,
        layout: {
          size: [380, 40],
        },
      }),
  },
});

export const Form = createAttrsForm([]);