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

const DataVScrollBoardMeta: IPublicTypeComponentMetadata = {
  componentName: 'DataVScrollBoard',
  title: '轮播表',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  group: '云仓大屏',
  category: '轮播表',
  npm: {
    package: '@ztocwst/datav-materials',
    version: '0.1.0',
    exportName: 'DataVScrollBoard',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'header',
            'zh-CN': '表头数据',
          },
          tip: 'header | 表头数据',
        },
        name: 'header',
        description: '表头数据',
        setter: {
          componentName: 'ArraySetter',
          props: {
            itemSetter: {
              componentName: 'I18nSetter',
              isRequired: false,
            },
          },
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'data',
            'zh-CN': '表数据',
          },
          tip: 'data | 表数据',
        },
        name: 'data',
        description: '表数据',
        setter: {
          componentName: 'JsonSetter',
          isRequired: true,
          initialValue: [],
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'rowNum',
            'zh-CN': '表行数',
          },
          tip: 'rowNum | 表行数',
        },
        name: 'rowNum',
        description: '表行数',
        setter: {
          componentName: 'NumberSetter',
          isRequired: false,
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'headerBGC',
            'zh-CN': '表头背景色',
          },
          tip: 'headerBGC | 表头背景色',
        },
        name: 'headerBGC',
        description: '表头背景色',
        setter: {
          componentName: 'ColorSetter',
          isRequired: false,
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'oddRowBGC',
            'zh-CN': '奇数行背景色',
          },
          tip: 'oddRowBGC | 奇数行背景色',
        },
        name: 'oddRowBGC',
        description: '奇数行背景色',
        setter: {
          componentName: 'ColorSetter',
          isRequired: false,
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'evenRowBGC',
            'zh-CN': '偶数行背景色',
          },
          tip: 'evenRowBGC | 偶数行背景色',
        },
        name: 'evenRowBGC',
        description: '偶数行背景色',
        setter: {
          componentName: 'ColorSetter',
          isRequired: false,
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'waitTime',
            'zh-CN': '轮播时间间隔(ms)',
          },
          tip: 'waitTime | 轮播时间间隔(ms)',
        },
        name: 'waitTime',
        description: '轮播时间间隔(ms)',
        setter: {
          componentName: 'NumberSetter',
          isRequired: false,
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'headerHeight',
            'zh-CN': '表头高度',
          },
          tip: 'headerHeight | 表头高度',
        },
        name: 'headerHeight',
        description: '表头高度',
        setter: {
          componentName: 'NumberSetter',
          isRequired: false,
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'columnWidth',
            'zh-CN': '列宽度',
          },
          tip: 'columnWidth | 列宽度',
        },
        name: 'columnWidth',
        description: '列宽度',
        setter: {
          componentName: 'ArraySetter',
          props: {
            itemSetter: {
              componentName: 'NumberSetter',
              isRequired: false,
            },
          },
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'align',
            'zh-CN': '列对齐方式',
          },
          tip: 'align | 列对齐方式',
        },
        name: 'align',
        description: '列对齐方式',
        setter: {
          componentName: 'ArraySetter',
          props: {
            itemSetter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    label: 'center',
                    value: 'center',
                  },
                  {
                    label: 'left',
                    value: 'left',
                  },
                  {
                    label: 'right',
                    value: 'right',
                  },
                ],
              },
              initialValue: 'center',
            },
          },
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'index',
            'zh-CN': '显示行号',
          },
          tip: 'index | 显示行号',
        },
        name: 'index',
        description: '显示行号',
        setter: {
          componentName: 'BoolSetter',
          isRequired: false,
          initialValue: false,
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'indexHeader',
            'zh-CN': '行号表头，默认#',
          },
          tip: 'indexHeader | 行号表头，默认#',
        },
        name: 'indexHeader',
        description: '行号表头，默认#',
        setter: {
          componentName: 'I18nSetter',
          isRequired: false,
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'carousel',
            'zh-CN': '轮播方式',
          },
          tip: 'carousel | 轮播方式',
        },
        name: 'carousel',
        description: '轮播方式',
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                label: '行滚动',
                value: 'single',
              },
              {
                label: '整页滚动',
                value: 'page',
              },
            ],
          },
          initialValue: 'single',
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'hoverPause',
            'zh-CN': '悬浮暂停轮播',
          },
          tip: 'hoverPause | 悬浮暂停轮播',
        },
        name: 'hoverPause',
        description: '悬浮暂停轮播',
        setter: {
          componentName: 'BoolSetter',
          isRequired: false,
          initialValue: false,
        },
      },
    ],
    supports: {
      events: [
        {
          name: 'onClick',
          template: 'onClick(record,${extParams}){\n\n}',
        },
        {
          name: 'onMouseOver',
          template: 'onMouseOver(record,${extParams}){\n\n}',
        },
      ],
      style: true,
    },
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '轮播表',
    screenshot: 'https://files.ztocwst.com/download/5201dc4e333c44798385252372d3ef81?isShow=true',
    schema: {
      componentName: 'DataVScrollBoard',
      props: {
        data: [
          ['行1列1', '行1列2', '行1列3'],
          ['行2列1', '行2列2', '行2列3'],
          ['行3列1', '行3列2', '行3列3'],
          ['行4列1', '行4列2', '行4列3'],
          ['行5列1', '行5列2', '行5列3'],
          ['行6列1', '行6列2', '行6列3'],
          ['行7列1', '行7列2', '行7列3'],
          ['行8列1', '行8列2', '行8列3'],
          ['行9列1', '行9列2', '行9列3'],
          ['行10列1', '行10列2', '行10列3'],
        ],
        style: { width: '500px', height: '200px' },
      },
    },
  },
];

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