import { Dict_Imgs } from "@/dict";
import { createAttrsForm } from "../../../defines/createAttrsForm";
import { createOptions } from "../../../defines/createOptions";
import { GroupNumber } from "../../../formItems/GroupNumber";

export { Component } from "./component";

const thumbnail =  require("@/assets/comps/card2/thumbnail.png")
export const { options, useCompData } = createOptions({
  name: "卡片2",
  thumbnail:thumbnail,
  value: {

  },
  layout: {
    padding: "0 0 0.2rem 0",
  },
  children: {
    bgImg: {
      compKey: "Image",
      value: { url: require("@/assets/comps/card2/bg.png"), x: 0, y: 0, s: 1 },
    },
    item1: {
        compKey: "Image",
        value: { url: thumbnail, x: 26.50, y: -23.00, s: 4.05 },
    },
    item2: {
        compKey: "Image",
        value: { url: thumbnail, x: -4.0, y: -13.50, s: 3.90 },
    },
    item3: {
        compKey: "Image",
        value: { url: thumbnail, x: -34.00, y: -3.5, s: 4.0 },
    },
    text1: {
        compKey: "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: {
        compKey: "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: ["宽", "高"],
    },
  },
]);