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";

const thumb = require("@/assets/comps/cardList/thumnail.png");
export const options = {
  name: "卡片列表",
  thumbnail: thumb,
};

export const { createComp, useCompData, useCreateChild } = createCompHooks({
  layout: {
    size: [750, 420],
  },
  value: {
    gap: 10,
    columns: 3,
    total: 3,
    imgHeight: 300,
    showDesc: true,
  },
  children: {
    list: (defaultOpts: any, length = 3) => {
      let i = 0;
      return Array.from({ length }, () => {
        const offsets = [
          { x: 32.5, y: 3.0, s: 3.6 },
          { x: 0.5, y: 3.0, s: 3.5 },
          { x: -32.0, y: 2.5, s: 3.55 },
        ];
        let offset = { x: 0, y: 0, s: 1 };
        if (defaultOpts.value.columns == 3) {
          offset = offsets[i % 3];
        }
        i = i + 1;
        return {
          img: createCompId("Image", {
            value: {
              url: thumb,
              ...offset,
            },
            layout: {
              size: [230, 300],
            },
          }),
          desc: createCompId("Text", {
            value: `<p style="text-align:center;">这是一个小标题</p>`,
            layout: {
              size: [230, 40],
            },
          }),
        };
      });
    },
  },
});

export const Form = createAttrsForm([
  {
    label: "卡片总数",
    dataIndex: "value.total",
    component: InputNumber,
  },
  {
    label: "每行数量",
    dataIndex: "value.columns",
    component: InputNumber,
  },
  {
    label: "卡片间距",
    dataIndex: "value.gap",
    component: InputNumber,
  },
  {
    label: "图片高度",
    dataIndex: "value.imgHeight",
    component: InputNumber,
  },
  {
    label: "显示描述",
    dataIndex: "value.showDesc",
    component: "Switch",
  },
]);
