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

export { Component } from "./component";

const thumb = require("@/assets/comps/card/thumbnail.png");

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

export const { createComp, useCompData } = createCompHooks({
  value: {
    imgSize: [240, 240],
  },
  layout: {
    padding: "10px 17.5px",
    size: [750, 500],
  },
  children: {
    img: () =>
      createCompId("Image", { value: { url: thumb, x: 25.5, y: 7.0, s: 3.8 } }),
    desc: () =>
      createCompId("Text", {
        value: `<p><span style="font-size:16px;">名称 &nbsp; p190 (注塑)</span></p><p><span style="font-size:16px;">规格 &nbsp; 52英寸</span></p><p><span style="font-size:16px;">厚度 &nbsp;1.0mm+0.05mm</span></p><p><span style="font-size:16px;">底材 &nbsp;鹿皮绒</span></p><p><span style="font-size:16px;">用途 &nbsp;凉鞋、跟鞋、高更鞋、</span><br><span style="font-size:16px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 时尚休闲鞋等</span></p>`,
      }),
  },
});

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