import { InputNumber } from "ant-design-vue";
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/Card11/thumbnail.jpg"),
};

export const { createComp, useCompData, useCreateChild } = createCompHooks({
  layout: {
    size: [750, 500],
  },
  value: {
    columns: 3,
  },
  children: {
    text: () =>
      createCompId("Text", {
        value: `<p><span style="color:hsl(0, 0%, 30%);font-size:12px;">皮中贵族，触及之处皆舒适，柔韧度高的细腻肌理皮革，触感柔润亲肤，透气</span></p><p><span style="color:hsl(0, 0%, 30%);font-size:12px;">质量经久耐磨，性价比高， 经典之作用不过时。 </span></p>`,
        layout: {
          textAlign: "center",
        },
      }),
    img1: () =>
      createCompId("Image", {
        value: {
          url: require("@/assets/comps/Card11/img_1.jpg"),
        },
        layout: {
          size: [251, 417],
        },
      }),
    img2: () =>
      createCompId("Image", {
        value: {
          url: require("@/assets/comps/Card11/img_shoe.png"),
        },
        layout: {
          size: [317, 240],
        },
      }),
    list: (defaultOpts: any, length = 3) => {
      let i = 0;
      return Array.from({ length }, () => {
        i = i + 1;
        return createCompId("Image", {
          value: {
            url: require(`@/assets/comps/Card11/cover_${i}.png`),
          },
          layout: {
            size: [72, 72],
          },
        });
      });
    },
  },
});

export const Form = createAttrsForm([
  {
    label: "列表行数",
    dataIndex: "value.columns",
    component: InputNumber,
  },
]);