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

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

export const { createComp, useCompData, useCreateChild } = createCompHooks({
  layout: {
    size: [750, 460],
  },
  value: {
    columns: 5,
    gap: 20,
    width: 160,
    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: [140, 36],
            },
          }),
          content: createCompId("Text", {
            value: defaultData[i]?.content,
            layout: {
              size: [160, 36],
            },
          }),
        };
      });
    },
  },
});

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",
    },
  },
]);