import { createAttrsForm } from "../../../defines/createAttrsForm";
import { createOptions } from "../../../defines/createOptions";
import { createColorOpts } from "../../../defines/formOpts/createColorOpts";

export { Component } from "./component";

export const { options, useCompData } = createOptions({
  name: "卡片",
  thumbnail: require("@/assets/comps/Card15/thumbnail.jpg"),
  value: {
    themeColor: "#6D8D70",
  },
  layout: {
    // padding: "0.5rem 0",
    margin: "0.2rem 0.35rem",
  },
  children: {
    title: {
      value:
        '<p><span style="color:hsl(0, 0%, 0%);font-size:24px;"><strong>P190-3#</strong></span></p>',
    },
    colorText: {
      value: `<p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">3#&nbsp;</span></p><p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">铜绿色</span></p>`,
    },
    text: {
      value: `<p style="text-align:center;"><span style="color:hsl(0,0%,0%);font-size:12px;">绿色是个舒服的颜色，&nbsp;</span></p><p style="text-align:center;"><span style="color:hsl(0,0%,0%);font-size:12px;">处处充满着生机和希望，</span></p><p style="text-align:center;"><span style="color:hsl(0,0%,0%);font-size:12px;">&nbsp;其明净空旷往往让人迷失其中，</span></p><p style="text-align:center;"><span style="color:hsl(0,0%,0%);font-size:12px;">&nbsp;给人无限的对未来的憧憬，</span></p><p style="text-align:center;"><span style="color:hsl(0,0%,0%);font-size:12px;">&nbsp;不需要过多的言语，让心灵感到平和</span></p>`,
      layout: {
        textAlign: "center",
      },
    },
    img2: {
      compKey: "Image",
      value: {
        url: require("@/assets/comps/Card15/img_shoe.png"),
      },
    },
    img1: {
      compKey: "Image",
      value: {
        url: require("@/assets/comps/Card15/img_1.jpg"),
      },
    },
  },
});

export const Form = createAttrsForm([
  {
    label: "主题色",
    dataIndex: "value.themeColor",
    ...createColorOpts(),
  },
]);