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

const MessageListMeta: IPublicTypeComponentMetadata = {
  componentName: 'MessageList',
  group: '低代码组件',
  title: '消息列表',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  category: '信息展示',
  npm: {
    package: '@dckj-npm/dc-material',
    version: '0.1.13',
    exportName: 'MessageList',
    main: 'src\\index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: '图片',
        name: 'images',
        description: '图片',
        setter: {
          componentName: 'ArraySetter',
          props: {
            itemSetter: 'StringSetter',
          },
        },
      },
      {
        name: '数据源绑定',
        setter: {
          componentName: 'SetterFormVariable',
          props: {
            attributes: [
              {
                label: '消息数据',
                value: 'dataList',
                children: [
                  { label: '标题', value: 'title' },
                  { label: '说明', value: 'description' },
                  { label: '发布时间', value: 'gmtCreate' },
                ],
                // 发送不同参数的请求
                mapping: [
                  {
                    label: '全部数据',
                    name: 'dataList',
                  },
                  {
                    value: '已读数据',
                    name: 'readDataList',
                  },
                  {
                    value: '未读数据',
                    name: 'unReadDataList',
                  },
                ],
              },
            ],
          },
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'onClick',
            'zh-CN': '点击事件',
          },
          tip: 'onClick | 点击事件',
        },
        name: 'onClick',
        description: '点击事件',
        setter: {
          componentName: 'FunctionSetter',
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'handleDataList',
            'zh-CN': 'tab改变事件',
          },
          tip: 'onChange | 改变事件',
        },
        name: 'handleDataList',
        description: 'tab改变事件',
        setter: {
          componentName: 'FunctionSetter',
          isRequired: true,
        },
      }
    ],
    supports: {
      style: true,
    },
    component: {
      disableBehaviors: ['copy'],
    },
  },
}
const snippets: IPublicTypeSnippet[] = [
  {
    title: '消息列表',
    screenshot: '',
    schema: {
      componentName: 'MessageList',
      props: {
        images: [
          'https://52pupu.com/source/api/upload/1036284777780613120/2024/202409/20240930/1038087407058161664.png',
          'https://52pupu.com/source/api/upload/1036284777780613120/2024/202409/20240930/1038087477308559360.png',
        ],
        dataList: [
          {
            title: '权益信息',
            description:
              '这里是消息    为小官时皆尝有之。” 金·元好问《为橄子醵金》诗之一：“明珠评价敌连城，弃掷泥涂意未平。” 清黄六鸿《福惠全',
            gmtCreate: '2024-05-24 09:24',
          },
          {
            title: '审核信息',
            description:
              '这里是消息    为小官时皆尝有之。” 金·元好问《为橄子醵金》诗之一：“明珠评价敌连城，弃掷泥涂意未平。” 清黄六鸿《福惠全',
            gmtCreate: '2024-05-24 09:24',
          },
          {
            title: '权益信息',
            description:
              '这里是消息    为小官时皆尝有之。” 金·元好问《为橄子醵金》诗之一：“明珠评价敌连城，弃掷泥涂意未平。” 清黄六鸿《福惠全',
            gmtCreate: '2024-05-24 09:24',
          },
        ],
        readDataList: [
          {
            title: '已读标题名称',
            description:
              '已读说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字',
            gmtCreate: '2024-05-24 09:24',
          },
          {
            title: '已读标题名称',
            description:
              '已读说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字',
            gmtCreate: '2024-05-24 09:24',
          },
        ],
        unReadDataList: [
          {
            title: '未读标题名称',
            description:
              '未读说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字',
            gmtCreate: '2024-05-24 09:24',
          },
          {
            title: '未读标题名称',
            description:
              '未读说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字',
            gmtCreate: '2024-05-24 09:24',
          },
        ],
      },
      children: [
        {
          componentName: 'Image',
          props: {
            key: 'image',
            width: 44,
            height: 44,
            style: {
              borderRadius: '50%',
            },
          },
        },
        {
          componentName: 'NextText',
          props: {
            type: 'h5',
            key: 'title',
            style: {
              fontSize: '15px',
              color: '#333',
              fontWeght: 'bold',
            },
          },
        },
        {
          componentName: 'NextText',
          props: {
            type: 'inherit',
            key: 'content',
            style: {
              fontSize: '13px',
              color: '#333',
            },
          },
        },
        {
          componentName: 'NextText',
          props: {
            type: 'inherit',
            key: 'gmtCreate',
            style: {
              fontSize: '10px',
              color: '#999',
              marginBottom: '5px',
            },
          },
        },
        {
          componentName: 'TabMessage',
          props: {
            key: 'tabMessage',
          },
        },
      ],
    },
  },
]

export default {
  ...MessageListMeta,
  snippets,
}