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

const GridNavMeta: IPublicTypeComponentMetadata = {
  group: '低代码组件',
  componentName: 'GridNav',
  title: '宫格导航',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  category: '引导',
  npm: {
    package: '@dckj-npm/dc-material',
    version: '0.1.0',
    exportName: 'GridNav',
    main: 'src\\index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    component: {
      isContainer: true,
      disableBehaviors: ['copy'],
    },
    props: [
      {
        title: '数据源配置',
        name: 'dataSourceSetting',
        setter: {
          componentName: 'ArraySetter',
          props: {
            itemSetter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      title: '跳转链接',
                      name: 'link',
                      setter: {
                        componentName: 'StringSetter',
                        isRequired: true,
                        initialValue: '',
                      },
                    },
                    {
                      title: '图标链接',
                      name: 'icon',
                      setter: {
                        componentName: 'StringSetter',
                        isRequired: true,
                        initialValue: '',
                      },
                    },
                    {
                      title: '标题',
                      name: 'title',
                      setter: {
                        componentName: 'StringSetter',
                        isRequired: true,
                        initialValue: '',
                      },
                    },
                    {
                      title: '角标文字',
                      name: 'rightText',
                      setter: {
                        componentName: 'StringSetter',
                        isRequired: true,
                        initialValue: '',
                      },
                    }
                  ],
                  extraSetter: {
                    componentName: 'MixedSetter',
                    isRequired: false,
                    props: {},
                  },
                },
              },
            },
          },
          isRequired: true,
          initialValue: [],
        },
      },
      // {
      //   name: 'dataSourceSetting',
      //   title: '数据源配置',
      //   setter: {
      //     componentName: 'SetterFormVariable',
      //     props: {
      //       attributes: [
      //         // { label: '导航项', value: 'items' }
      //         { label: '标题', value: 'title' },
      //         { label: '图标链接', value: 'icon' },
      //         { label: '跳转链接', value: 'link' }
      //       ],
      //
      //     }
      //   }
      // },
      {
        title: '每行列数',
        name: 'columns',
        setter: {
          componentName: 'NumberSetter',
          isRequired: true,
          initialValue: 4,
        },
      },
      {
        title: 'icon尺寸',
        name: 'iconSize',
        defaultValue: 'medium',
        initialValue: 'medium',
        setter: {
          componentName: 'SelectSetter',
          initialValue: 'medium',
          props: {
            defaultValue: 'medium',
            options: [
              {
                title: '大',
                value: 'large',
              },
              {
                title: '中',
                value: 'medium',
              },
              {
                title: '小',
                value: 'small',
              },
            ],
          },
        },
      },
      {
        title: '字重',
        name: 'fontWeight',
        defaultValue: 'normal',
        initialValue: 'normal',
        setter: {
          componentName: 'SelectSetter',
          initialValue: 'normal',
          props: {
            defaultValue: 'normal',
            options: [
              {
                title: '细',
                value: '100',
              },
              {
                title: '正常',
                value: 'normal',
              },
              {
                title: '粗',
                value: 'bold',
              },
            ],
          },
        },
      },
      {
        name: 'fontSize',
        title: '字号',
        defaultValue: 13,
        setter: 'NumberSetter',
      },
      {
        name: 'fontColor',
        title: '字体颜色',
        propType: 'string',
        setter: 'ColorSetter',
        defaultValue: '#222',
        initialValue: '#222',
      },
      {
        name: 'lineHeight',
        title: '行高',
        defaultValue: 'auto',
        setter: 'StringSetter',
      },
      {
        name: 'lineNum',
        title: '行数',
        defaultValue: 1,
        setter: 'NumberSetter',
      },
    ],
    supports: {
      style: true,
    },
  },
}
const snippets: IPublicTypeSnippet[] = [
  {
    title: '宫格导航',
    screenshot: '',
    schema: {
      componentName: 'GridNav',
      props: {
        columns: 4,
        dataSourceSetting: [
          {
            title: '导航项',
            icon: 'https://qcloudimg.tencent-cloud.cn/raw/fe54a986a821473655ba20afe30a543a.png',
            link: '#',
          },
          {
            title: '导航项',
            icon: 'https://qcloudimg.tencent-cloud.cn/raw/fe54a986a821473655ba20afe30a543a.png',
            link: '#',
          },
          {
            title: '导航项',
            icon: 'https://qcloudimg.tencent-cloud.cn/raw/fe54a986a821473655ba20afe30a543a.png',
            link: '#',
          },
          {
            title: '导航项',
            icon: 'https://qcloudimg.tencent-cloud.cn/raw/fe54a986a821473655ba20afe30a543a.png',
            link: '#',
          },
        ],
        iconSize: 'medium',
        fontWeight: 'normal',
      },
    },
  },
]

export default {
  ...GridNavMeta,
  snippets,
}