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/1685607488598_3mmBXh_thumbnail.png";

export { Component } from "./component";

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

export const { createComp, useCompData } = createCompHooks({
  value: {},
  layout: {
    size: [750, 275],
  },
  children: {
    bgImg: () =>
      createCompId("Image", {
        value: {
          url: require("@/assets/comps/Card14/img_shoe.png"),
        },
        layout: {
          size: [750, 275],
        },
      }),
    text1: () =>
      createCompId("Text", {
        value: `<p style="text-align:center;line-height:1.5;"><span style="color:hsl(0,0%,90%);font-size:60px;">FASHION</span></p>`,
        layout: {
          size: [750, 180],
        },
      }),
  },
});

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