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/1685588983505_77BJpB_thumbnail.png";

export { Component } from "./component";

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

export const { createComp, useCompData } = createCompHooks({
  value: {},
  layout: {
    size: [750, 250],
  },
  children: {
    bgImg: () =>
      createCompId("Image", {
        value: { url: thumbnail, x: -25.0, y: -0.5, s: 2.1 },
        layout: {
          size: [317, 240],
        },
      }),
    item1: () =>
      createCompId("Image", {
        value: { url: thumbnail, x: 37.0, y: -6, s: 11.0 },
      }),
    item2: () =>
      createCompId("Image", {
        value: { url: thumbnail, x: 24.0, y: -6, s: 11.15 },
      }),
    item3: () =>
      createCompId("Image", {
        value: { url: thumbnail, x: 11.0, y: -6, s: 11.7 },
      }),
    text1: () =>
      createCompId("Text", {
        value: `<p><span style="color:hsl(0, 0%, 0%);font-size:14px;"><strong>P190注塑</strong></span></p>`,
        layout: {
          size: [300, 50],
        },
      }),
    text2: () =>
      createCompId("Text", {
        value: `复古羊巴 / 2023年新品`,
        layout: {
          size: [300, 40],
        },
      }),
  },
});

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