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 defaultData = [
  {
    label: `<p style="text-align:center;"><span style="color:hsl(0,0%,100%);">产品名称</span></p>`,
    content: "P190（注塑）",
  },
  {
    label: `<p style="text-align:center;"><span style="color:hsl(0,0%,100%);">产品规格</span></p>`,
    content: "52英寸",
  },
  {
    label: `<p style="text-align:center;"><span style="color:hsl(0,0%,100%);">产品厚度</span></p>`,
    content: "1.0mm+0.05mm",
  },
  {
    label: `<p style="text-align:center;"><span style="color:hsl(0,0%,100%);">产品底材</span></p>`,
    content: "鹿皮绒",
  },
  {
    label: `<p style="text-align:center;"><span style="color:hsl(0,0%,100%);">产品用途</span></p>`,
    content: "凉鞋、跟鞋、高更鞋、时尚休闲鞋等",
  },
];

export const options = {
  name: "文字",
  thumbnail: require("./thumbnail.jpg"),
};

export const { createComp, useCompData, useCreateChild } = createCompHooks({
  layout: {
    size: [750, 420],
  },
  value: {
    columns: 5,
    gap: 20,
    width: 156,
    showBackground: true,
  },
  children: {
    list: (defaultOpts: any, length = defaultData.length) => {
      let i = -1;
      return Array.from({ length }, () => {
        i = i + 1;
        return {
          label: createCompId("Text", {
            value: defaultData[i]?.label,
            layout: {
              size: [160, 60],
            },
          }),
          content: createCompId("Text", {
            value: defaultData[i]?.content,
            layout: {
              size: [160, 60],
            },
          }),
        };
      });
    },
  },
});

export const Form = createAttrsForm([
  {
    label: "列表行数",
    dataIndex: "value.columns",
    component: InputNumber,
  },
  {
    label: "行间距",
    dataIndex: "value.gap",
    component: InputNumber,
  },
  {
    label: "标题宽度",
    dataIndex: "value.width",
    component: InputNumber,
  },
  {
    label: "标题背景色",
    dataIndex: "value.showBackground",
    component: "Switch",
    props: {
      size: "small",
    },
  },
]);