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

const thumbnail =
  "https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1685507733441_uVjZuw_thumbnail.png";

export { Component } from "./component";

export const options = {
  name: "卡片2",
  thumbnail,
};

export const { createComp, useCompData } = createCompHooks({
  value: {},
  layout: {
    padding: "0 0 0.2rem 0",
    size: [750, 600],
  },
  children: {
    bgImg: () =>
      createCompId("Image", {
        value: {
          url: "https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1685527709350_MHQZdg_bg.png",
          x: 0,
          y: 0,
          s: 1,
        },
      }),
    item1: () =>
      createCompId("Image", {
        value: { url: thumbnail, x: 26.5, y: -23.0, s: 4.05 },
      }),
    item2: () =>
      createCompId("Image", {
        value: { url: thumbnail, x: -4.0, y: -13.5, s: 3.9 },
      }),
    item3: () =>
      createCompId("Image", {
        value: { url: thumbnail, x: -34.0, y: -3.5, s: 4.0 },
      }),
    text1: () =>
      createCompId("Text", {
        value: `<p><span style="font-size:42px;"><strong>&nbsp; </strong></span><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;">&nbsp; &nbsp; &nbsp;可注塑</span></p>`,
      }),
    text2: () =>
      createCompId("Text", {
        value: `<p style="text-align:right;"><span style="color:hsl(0, 0%, 0%);font-size:14px;">全新 &nbsp;| &nbsp;时尚 &nbsp;| &nbsp;简约 &nbsp;</span></p>`,
      }),
  },
});

export const Form = createAttrsForm([
  {
    label: "图片尺寸",
    dataIndex: "value.imgSize",
    component: GroupNumber,
    props: {
      labels: ["宽", "高"],
    },
  },
]);