import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';

import { default as GridLayoutSetter } from '../setter/GridLayoutSetter';

const GridLayoutMeta: IPublicTypeComponentMetadata = {
  componentName: 'GridLayout',
  title: '分栏',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  category: '布局',
  group: '精选组件',
  npm: {
    package: 'temp-materials',

    exportName: 'GridLayout',
    main: 'src\\index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: '布局',
        type: 'group',
        display: 'accordion',
        items: [
          {
            title: {
              label:'列比例',
              tip:'设置列元素宽度分配比例'
            },
            name: 'columnRatio',
            display: 'plain',
            setter: {
              componentName: GridLayoutSetter,
              isRequired: false,
              initialValue: '6:6',
            },
          },
          {
            title: {
              label:'列间距',
              tip:'设置元素列间距'
            },
            name: 'colGap',
            setter: {
              componentName: 'NumberSetter',
              isRequired: false,
              initialValue: 0,
            },
          },
          {
            title: {
              label:'行间距',
              tip:'设置元素行间距'
            },
            name: 'rowGap',
            setter: {
              componentName: 'NumberSetter',
              isRequired: false,
              initialValue: 0,
            },
          },
        ],
      },
    ],
    supports: {
      style: true,
    },
    component: {
      isContainer: true,
    },
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '分栏',
    screenshot: '',
    schema: {
      componentName: 'GridLayout',
      props: {
        columnRatio: '6:6',
      },
    },
  },
];

export default {
  ...GridLayoutMeta,
  snippets,
};