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

export { Component } from "./component";

export const options = {
  name: "卡片",
  thumbnail: require("@/assets/comps/Card14/thumbnail.jpg"),
};

export const { createComp, useCompData } = createCompHooks({
  value: {},
  layout: {
    padding: "0.3rem 0",
    margin: "0 0.35rem",
  },
  children: {
    text: () =>
      createCompId("Text", {
        value: `<p style="text-align:center;"><span style="color:hsl( 0, 0%, 40% );font-size:12px;">蓝色是个舒服的颜色，</span></p><p style="text-align:center;"><span style="color:hsl( 0, 0%, 40% );font-size:12px;">&nbsp;处处充满着生机和希望，</span></p><p style="text-align:center;"><span style="color:hsl( 0, 0%, 40% );font-size:12px;">&nbsp;其明净空旷往往让人迷失其中，&nbsp;</span></p><p style="text-align:center;"><span style="color:hsl( 0, 0%, 40% );font-size:12px;">给人无限的对未来的憧憬，&nbsp;</span></p><p style="text-align:center;"><span style="color:hsl( 0, 0%, 40% );font-size:12px;">不需要过多的言语，让心灵感到平和</span></p>`,
        layout: {
          textAlign: "center",
        },
      }),
    img1: () =>
      createCompId("Image", {
        value: {
          url: require("@/assets/comps/Card14/img_1.jpg"),
        },
      }),
    imgShoe: () =>
      createCompId("Image", {
        value: {
          url: require("@/assets/comps/Card14/img_shoe.png"),
        },
      }),
  },
});

export const Form = createAttrsForm([]);