import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
import { uuid } from '../utils';
import { snippets } from './snippets';

const ProTableMeta: IPublicTypeComponentMetadata = {
  "componentName": "ProTable",
  "title": "高级表格",
  "group": "精选组件",
  "category": "基础元素",
  "docUrl": "",
  "screenshot": "",
  "devMode": "proCode",
  "npm": {
    "package": "lowcode-edit-pro-table",
    "version": "{{version}}",
    "exportName": "ProTable",
    "main": "src/index.tsx",
    "destructuring": true,
    "subName": ""
  },
  "configure": {
    props: [
      {
        name: 'ref',
        title: {
          label: 'ref',
          tip: "ref | 通过 this.$('xxx') 获取到组件实例"
        },
        defaultValue: () => {
          return `pro_table_${uuid()}`
        },
        setter: 'StringSetter'
      },
      {
        title: '数据源',
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'dataSource',
            title: { label: '表格数据', tip: 'dataSource | 表格数据' },
            propType: 'object',
            setter: 'JsonSetter'
          },
          {
            name: 'loading',
            title: { label: '加载中', tip: 'loading | 是否加载中' },
            propType: 'bool',
            setter: 'BoolSetter'
          },
          {
            name: 'rowKey',
            title: {
              label: '行Key',
              tip: 'rowKey | 表格行 key 的取值，可以是字符串或一个函数'
            },
            propType: { type: 'oneOfType', value: ['string', 'func'] },
            setter: [
              'StringSetter',
              {
                componentName: 'FunctionSetter',
                props: {
                  template:
                    'getRowKey(record,index,${extParams}){\n// 通过函数获取表格行 key\nreturn record.id;\n}'
                }
              },
              'VariableSetter'
            ],
            defaultValue: 'id'
          },
        ]
      },
      {
        name: 'columns',
        title: { label: '表格列', tip: '表格列的配置描述，具体项见下表' },
        setter: {
          componentName: 'ArraySetter',
          props: {
            itemSetter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'title',
                      title: { label: '列标题', tip: 'title | 列标题' },
                      propType: {
                        type: 'oneOfType',
                        value: ['string', 'func']
                      },
                      setter: [
                        'StringSetter',
                        {
                          componentName: 'SlotSetter',
                          title: '列标题插槽',
                          initialValue: {
                            type: 'JSSlot',
                            params: ['options'],
                            value: []
                          }
                        }
                      ],
                      isRequired: true
                    },
                    {
                      name: 'dataIndex',
                      title: { label: '数据字段', tip: 'dataIndex | 数据字段' },
                      propType: 'string',
                      setter: 'StringSetter',
                      isRequired: true
                    },
                    {
                      name: 'valueType',
                      title: { label: '数据类型', tip: 'valueType | 数据类型' },
                      propType: 'string',
                      setter: {
                        componentName: 'SelectSetter',
                        props: {
                          options: [
                            { title: '文本', value: 'text' },
                            { title: '标签', value: 'tag' },
                            { title: '数字', value: 'digit' },
                            { title: '金额', value: 'money' },
                            { title: '日期', value: 'date' },
                            { title: '日期时间', value: 'dateTime' },
                            { title: '链接', value: 'link' },
                            { title: '头像', value: 'avatar' },
                            { title: '进度条', value: 'progress' }
                          ]
                        }
                      }
                    },
                    {
                      name: 'valueEnum',
                      title: {
                        label: '枚举定义',
                        tip: 'valueEnum | 值的枚举，会自动转化把值当成 key 来取出要显示的内容'
                      },
                      propType: 'object',
                      setter: 'JsonSetter'
                    },
                    {
                      name: 'width',
                      title: { label: '宽度', tip: 'width | 宽度' },
                      propType: {
                        type: 'oneOfType',
                        value: ['number', 'string']
                      },
                      setter: ['NumberSetter', 'StringSetter', 'VariableSetter']
                    },
                    {
                      name: 'align',
                      title: { label: '对齐方式', tip: 'align | 对齐方式' },
                      propType: {
                        type: 'oneOf',
                        value: ['left', 'right', 'center']
                      },
                      defaultValue: 'left',
                      setter: [
                        {
                          componentName: 'RadioGroupSetter',
                          props: {
                            options: [
                              { title: 'left', value: 'left' },
                              { title: 'right', value: 'right' },
                              { title: 'center', value: 'center' }
                            ]
                          }
                        },
                        'VariableSetter'
                      ]
                    },
                    {
                      name: 'fixed',
                      title: { label: '列是否固定', tip: 'fixed | 列是否固定' },
                      defaultValue: '',
                      propType: {
                        type: 'oneOf',
                        value: ['', 'left', 'right']
                      },
                      setter: [
                        {
                          componentName: 'RadioGroupSetter',
                          props: {
                            options: [
                              { title: '不固定', value: '' },
                              { title: '固定在左侧', value: 'left' },
                              { title: '固定在右侧', value: 'right' }
                            ]
                          }
                        },
                        'VariableSetter'
                      ]
                    }
                  ]
                }
              },
              initialValue: { title: '标题' }
            }
          }
        }
      },
      {
        title: '导入导出',
        display: 'block',
        type: 'group',
        extraProps: {
          display: 'accordion',
          defaultCollapsed: false,
        },
        items: [
          {
            name: 'exportButton',
            title: {
              label: '导出按钮',
              tip: 'exportButton | 是否展示导出按钮'
            },
            propType: 'bool',
            setter: 'BoolSetter'
          },
          {
            name: 'importButton',
            title: {
              label: '导入按钮',
              tip: 'importButton | 是否展示导入按钮'
            },
            propType: 'bool',
            setter: 'BoolSetter'
          },
          {
            name: 'importTemplateList',
            title: {
              label: '上传导入模板',
              tip: 'Upload Template | 上传导入模板'
            },
            propType: 'string',
            setter: 'FileUpload',
            condition: {
              type: 'JSFunction',
              value:
                'target => !!target.getProps().getPropValue("importButton")'
            }
          },
        ]
      },
      {
        title: '表格样式',
        display: 'block',
        type: 'group',
        extraProps: {
          display: 'accordion',
          defaultCollapsed: false,
        },
        items: [
          {
            title: {
              label: {
                type: 'i18n',
                'en-US': 'headerTitle',
                'zh-CN': '表格标题'
              }
            },
            name: 'headerTitle',
            setter: {
              componentName: 'StringSetter',
              isRequired: false
            }
          },
          {
            name: 'bordered',
            title: {
              label: '显示边框',
              tip: 'bordered | 是否展示外边框和列边框'
            },
            propType: 'bool',
            setter: 'BoolSetter'
          },
          {
            name: 'showHeader',
            title: { label: '显示表头', tip: 'showHeader | 是否显示表头' },
            propType: 'bool',
            setter: 'BoolSetter',
            defaultValue: true
          },
          {
            name: 'tableHeaderBold',
            title: { label: '表头加粗', tip: 'tableHeaderBold | 是否表头字体加粗' },
            propType: 'bool',
            setter: 'BoolSetter',
            defaultValue: false
          },
          {
            name: 'tableHeaderSize',
            title: { label: '表头字号', tip: 'tableHeaderSize | 表头字号大小' },
            propType: {
              type: 'oneOf',
              value: ['default', 'middle', 'large']
            },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    {
                      title: '默认',
                      value: 'default'
                    },
                    {
                      title: '中',
                      value: 'middle'
                    },
                    {
                      title: '大',
                      value: 'large'
                    }
                  ]
                }
              },
              'VariableSetter'
            ],
            defaultValue: 'default'
          },
        ]
      },
      {
        title: '分页',
        display: 'block',
        type: 'group',
        extraProps: {
          display: 'accordion',
          defaultCollapsed: false,
        },
        items: [
          {
            name: 'pagination',
            title: { label: '显示分页', tip: 'pagination | 显示分页' },
            propType: 'bool',
            setter: 'BoolSetter',
            extraProps: {
              setValue: (target, value) => {
                if (value) {
                  target.parent.setPropValue('pagination', {
                    defaultPageSize: 10,
                    showSizeChanger: true,
                    showQuickJumper: true,
                  })
                }
              }
            }
          },
          {
            name: 'pagination.pageSize',
            title: { label: '每页条数', tip: 'pagination.pageSize | 每页条数' },
            propType: 'number',
            setter: 'NumberSetter',
            condition: {
              type: 'JSFunction',
              value: 'target => !!target.getProps().getPropValue("pagination")'
            }
          },
          {
            name: 'pagination.showSizeChanger',
            title: {
              label: '页数切换',
              tip: 'pagination.showSizeChanger | 是否展示 pageSize 切换器'
            },
            propType: 'bool',
            setter: 'BoolSetter',
            defaultValue: true,
            condition: {
              type: 'JSFunction',
              value: 'target => !!target.getProps().getPropValue("pagination")'
            }
          },
          {
            name: 'pagination.showQuickJumper',
            title: {
              label: '快速跳转',
              tip: 'pagination.showQuickJumper | 是否可以快速跳转至某页'
            },
            propType: 'bool',
            setter: 'BoolSetter',
            defaultValue: true,
            condition: {
              type: 'JSFunction',
              value: 'target => !!target.getProps().getPropValue("pagination")'
            }
          }
        ]
      },
      {
        title: '滚动',
        display: 'block',
        type: 'group',
        extraProps: {
          display: 'accordion',
          defaultCollapsed: false,
        },
        items: [
          {
            name: 'scroll.x',
            title: {
              label: '横向滚动',
              tip: 'scroll.x | 设置横向滚动，也可用于指定滚动区域的宽'
            },
            propType: { type: 'oneOfType', value: ['number', 'bool'] },
            setter: ['NumberSetter', 'BoolSetter', 'VariableSetter']
          },
          {
            name: 'scroll.y',
            title: {
              label: '纵向滚动',
              tip: 'scroll.y | 设置纵向滚动，也可用于指定滚动区域的高'
            },
            propType: 'number',
            setter: ['NumberSetter', 'VariableSetter']
          }
        ]
      }
    ],
    "supports": {
      events: [
        {
          name: 'onLoad',
          description: '数据加载完成后触发'
        }
      ],
      "style": false
    },
    "component": {}
  }
};

export default {
  ...ProTableMeta,
  snippets
};