import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
import { columnsField } from './columns-field';
import { actionColumnField, actionColumnButtonField } from './action-columns-field';
import { search } from './search';
import { toolbar } from './toolbar';
import { dataSource } from '../mockData';

const ProTableMeta: IPublicTypeComponentMetadata = {
  'componentName': 'ProTable',
  'title': '高级表格',
  'docUrl': '',
  'screenshot': '',
  'devMode': 'proCode',
  'npm': {
    'package': 'pro-material',
    'version': '0.1.0',
    'exportName': 'ProTable',
    'main': 'src/index.tsx',
    'destructuring': true,
    'subName': ''
  },

  'configure': {
    'props': [
      columnsField,
      actionColumnField,
      actionColumnButtonField,
      // {
      //   type: 'field',
      //   name: 'actionColumn',
      //   title: '操作列',
      //   extraProps: {
      //     display: 'accordion',
      //   },
      //   setter: {
      //     componentName: 'ArraySetter',
      //     props: {
      //       itemSetter: {
      //         componentName: 'ObjectSetter',
      //         props: {
      //           config: {
      //             items: [
      //               {
      //                 name: 'key',
      //                 title: { label: 'key', tip: '唯一键' },
      //                 display: 'inline',
      //                 props: 'string',
      //                 setter: 'StringSetter',
      //                 isRequired: true
      //               },
      //               {
      //                 name: 'name',
      //                 title: { label: 'name', tip: '文本内容' },
      //                 display: 'inline',
      //                 props: 'string',
      //                 setter: 'StringSetter',
      //                 isRequired: true
      //               },
      //               {
      //                 name: 'type',
      //                 title: { label: 'type', tip: '按钮类型' },
      //                 display: 'inline',
      //                 props: { type: 'oneOf', value: ['primary', 'dashed', 'link', 'text', 'default'] },
      //                 setter: {
      //                   componentName: 'SelectSetter',
      //                   props: {
      //                     options: [
      //                       {
      //                         title: 'primary',
      //                         value: 'primary',
      //                       },
      //                       {
      //                         title: 'dashed',
      //                         value: 'dashed',
      //                       },
      //                       {
      //                         title: 'link',
      //                         value: 'link',
      //                       },
      //                       {
      //                         title: 'text',
      //                         value: 'text',
      //                       },
      //                       {
      //                         title: 'default',
      //                         value: 'default',
      //                       },
      //                     ],
      //                   },
      //                   initialValue: 'link',
      //                 }
      //               },
      //               {
      //                 name: 'onClick',
      //                 title: { label: 'onClick', tip: '点击事件' },
      //                 propType: 'func',
      //                 setter: [
      //                   {
      //                     componentName: 'FunctionSetter',
      //                     props: {
      //                       emplate: '(text, record, _, action){\n return action?.startEditable?.(record.id);}',
      //                     },
      //                   },
      //                   'VariableSetter',
      //                 ],
      //               },
      //             ],
      //           },
      //         },
      //       },
      //     },
      //   },
      // },
      {
        name: 'params',
        title: { label: 'params', tip: '用于request查询的额外参数' },
        propType: 'object',
        setter: 'JsonSetter',
        supportVariable: true,
      },
      {
        name: 'defaultData',
        title: { label: 'defaultData', tip: '默认数据' },
        propType: 'object',
        setter: 'JsonSetter',
        supportVariable: true,
      },
      {
        name: 'dataSource',
        title: { label: 'dataSource', tip: '表格数据' },
        propType: 'object',
        setter: 'JsonSetter',
        supportVariable: true,
      },
      {
        name: 'toolBarRender',
        title: { label: 'toolBarRender', tip: '渲染工具栏，返回一个dom数组' },
        propType: 'array',
        setter: [{
          componentName: 'ArraySetter',
          props: {
            itemSetter: {
              componentName: 'SlotSetter',
              title: '渲染工具栏',
              initialValue: {
                type: 'JSSlot',
                params: ['action'],
                value: [],
              },
            }
          }
        }, 'VariableSetter'],
      },
      {
        name: 'tableClassName',
        title: { label: 'tableClassName', tip: '封装的table的className' },
        setter: ['ClassNameSetter', 'VariableSetter'],
      },
      {
        name: 'tableStyle',
        title: { label: 'tableStyle', tip: '封装的table的style' },
        setter: 'styleSetter',
      },
      search,
      {
        name: 'defaultSize',
        title: { label: 'defaultSize', tip: '默认的size' },
        propType: {
          type: 'oneOf',
          value: ['default', 'middle', 'small'],
        },
        setter: [
          {
            componentName: 'RadioGroupSetter',
            props: {
              options: [
                {
                  title: '默认',
                  value: 'default',
                },
                {
                  title: '中',
                  value: 'middle',
                },
                {
                  title: '小',
                  value: 'small',
                },
              ],
            },
          },
          'VariableSetter',
        ],
        defaultValue: 'default',
      },
      {
        name: 'cardBordered',
        title: {
          label: 'cardBordered',
          tip: 'Table和Search外围Card的边框',
        },
        propType: {
          type: 'oneOfType',
          value: ['bool', 'object'],
        },
        setter: ['BoolSetter', 'ObjectSetter', 'VariableSetter'],
        defaultValue: false
      },
      {
        name: 'dateFormatter',
        title: {
          label: 'dateFormatter',
          tip: '转化moment格式数据为特定类型',
        },
        propType: {
          type: 'oneOfType',
          value: ['string', 'number', 'func'],
        },
        setter: ['StringSetter', 'NumberSetter', 'FunctionSetter', 'VariableSetter'],
        defaultValue: false
      },
      {
        name: 'columnEmptyText',
        title: {
          label: 'columnEmptyText',
          tip: '空值显示',
        },
        propType: {
          type: 'oneOfType',
          value: ['string', 'bool'],
        },
        setter: ['StringSetter', 'BoolSetter'],
        defaultValue: false
      },
      {
        name: 'tableRender',
        title: {
          label: 'tableRender',
          tip: '自定义渲染表格函数',
        },
        propType: 'func',
        setter: [
          {
            componentName: 'SlotSetter',
            title: '自定义渲染表格函数',
            initialValue: {
              type: 'JSSlot',
              params: ['props', 'dom', 'domList'],
              value: [],
            },
          },
          {
            componentName: 'FunctionSetter',
            props: {
              template:
                'tableRender(props,dom,domList:{toolbar, alert, table},${extParams}){\n// 收起按钮的render`}',
            },
          },
          'VariableSetter',
        ],
      },
      toolbar,
      {
        name: 'tableExtraRender',
        title: {
          label: 'tableExtraRender',
          tip: '自定义表格的主体函数',
        },
        propType: 'func',
        setter: [
          {
            componentName: 'SlotSetter',
            title: '自定义渲染表格函数',
            initialValue: {
              type: 'JSSlot',
              params: ['props', 'dataSource'],
              value: [],
            },
          },
          {
            componentName: 'FunctionSetter',
            props: {
              template:
                'tableExtraRender(props,dataSource,${extParams}){\n// 自定义表格的主体函数`}',
            },
          },
          'VariableSetter',
        ],
      },
      {
        name: 'manualRequest',
        title: {
          label: 'manualRequest',
          tip: '是否需要手动触发首次请求',
        },
        propType: 'bool',
        setter: 'BoolSetter',
        initialValue: false,
      },
      {
        name: 'ghost',
        title: {
          label: 'ghost',
          tip: '幽灵模式',
        },
        propType: 'bool',
        setter: 'BoolSetter',
        initialValue: false,
      },
      {
        name: 'debounceTime',
        title: {
          label: 'debounceTime',
          tip: '防抖时间',
        },
        propType: 'number',
        setter: 'Number',
        initialValue: 10,
      }, {
        name: 'revalidateOnFocus',
        title: {
          label: 'revalidateOnFocus',
          tip: '窗口聚焦自动重新请求',
        },
        propType: 'bool',
        setter: 'BoolSetter',
        initialValue: true,
      },

      {
        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',
      },
      {
        type: 'field',
        name: 'RecordCreator',
        title: 'RecordCreator',
        extraProps: {
          display: 'accordion',
        },
        setter: [{
          componentName: 'ObjectSetter',
          props: {
            config: {
              items: [
                {
                  name: 'record',
                  title: { label: 'record', tip: '需要新增的行数据' },

                  propType: 'object',
                  setter: [
                    'JsonSetter',
                    'VariableSetter',
                  ],

                },
                {
                  name: 'position',
                  title: { label: 'position', tip: '行加在哪里' },
                  ppropType: {
                    type: 'oneOf',
                    value: ['top', 'bottom'],
                  },
                  setter: [
                    {
                      componentName: 'RadioGroupSetter',
                      props: {
                        options: [
                          {
                            title: 'top',
                            value: 'top',
                          },
                          {
                            title: 'bottom',
                            value: 'bottom',
                          },
                        ],
                      },
                    },
                    'VariableSetter',
                  ],
                  defaultValue: 'bottom',
                },
              ]
            },
          },
        }],

      },

      {
        title: '外观',
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'showHeader',
            title: { label: '显示表头', tip: 'showHeader | 是否显示表头' },
            propType: 'bool',
            setter: 'BoolSetter',
            defaultValue: true,
          },
          {
            name: 'tableLayout',
            title: { label: '表格布局', tip: 'tableLayout | 表格布局' },
            defaultValue: '',
            propType: {
              type: 'oneOf',
              value: ['', 'auto', 'fixed'],
            },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    {
                      title: '默认',
                      value: '',
                    },
                    {
                      title: '自动',
                      value: 'auto',
                    },
                    {
                      title: '固定',
                      value: 'fixed',
                    },
                  ],
                },
              },
              'VariableSetter',
            ],
          },
        ],
      },
      {
        title: '分页',
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'pagination',
            title: { label: '显示分页', tip: 'pagination | 显示分页' },
            propType: 'object',
            setter: 'BoolSetter',
            extraProps: {
              setValue: (target, value) => {
                if (value) {
                  target.parent.setPropValue('pagination', {
                    pageSize: 10,
                    size: 'default'
                  });
                }
              },
            },
          },
          {
            name: 'pagination.pageSize',
            title: { label: '每页条数', tip: 'pagination.pageSize | 每页条数' },
            propType: 'number',
            setter: 'NumberSetter',
            condition: {
              type: 'JSFunction',
              value: 'target => !!target.getProps().getPropValue("pagination")',
            },
          },
          {
            name: 'pagination.total',
            title: { label: '数据总数', tip: 'pagination.total | 数据总数' },
            propType: 'number',
            setter: 'NumberSetter',
            condition: {
              type: 'JSFunction',
              value: 'target => !!target.getProps().getPropValue("pagination")',
            },
          },
          {
            name: 'pagination.defaultCurrent',
            title: {
              label: '默认当前页',
              tip: 'pagination.defaultCurrent | 默认的当前页数',
            },
            propType: 'number',
            setter: 'NumberSetter',
            condition: {
              type: 'JSFunction',
              value: 'target => !!target.getProps().getPropValue("pagination")',
            },
          },
          {
            name: 'pagination.current',
            title: { label: '当前页数', tip: 'pagination.current | 当前页数' },
            propType: 'number',
            setter: 'NumberSetter',
            condition: {
              type: 'JSFunction',
              value: 'target => !!target.getProps().getPropValue("pagination")',
            },
          },
          {
            name: 'pagination.showTotal',
            title: {
              label: '显示总数',
              tip: 'pagination.showTotal | 用于显示数据总量和当前数据顺序',
            },
            propType: 'func',
            setter: [
              {
                componentName: 'FunctionSetter',
                props: {
                  template:
                    'showTotal(total,range,${extParams}){\n// 用于格式化显示表格数据总量\nreturn `共 ${total} 条`;\n}',
                },
              },
              'VariableSetter',
            ],
            condition: {
              type: 'JSFunction',
              value: 'target => !!target.getProps().getPropValue("pagination")',
            },
          },
          {
            name: 'pagination.showSizeChanger',
            title: {
              label: '页数切换',
              tip: 'pagination.showSizeChanger | 是否展示 pageSize 切换器',
            },
            propType: 'bool',
            setter: 'BoolSetter',
            condition: {
              type: 'JSFunction',
              value: 'target => !!target.getProps().getPropValue("pagination")',
            },
          },
          {
            name: 'pagination.showQuickJumper',
            title: {
              label: '快速跳转',
              tip: 'pagination.showQuickJumper | 是否可以快速跳转至某页',
            },
            propType: 'bool',
            setter: 'BoolSetter',
            condition: {
              type: 'JSFunction',
              value: 'target => !!target.getProps().getPropValue("pagination")',
            },
          },
          {
            name: 'pagination.simple',
            title: { label: '简单分页', tip: 'pagination.simple | 简单分页' },
            propType: 'bool',
            setter: 'BoolSetter',
            condition: {
              type: 'JSFunction',
              value: 'target => !!target.getProps().getPropValue("pagination")',
            },
          },
          {
            name: 'pagination.size',
            title: { label: '分页尺寸', tip: 'pagination.size | 分页尺寸' },
            propType: {
              type: 'oneOf',
              value: ['default', 'small'],
            },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    {
                      title: '默认',
                      value: 'default',
                    },
                    {
                      title: '小',
                      value: 'small',
                    },
                  ],
                },
              },
              'VariableSetter',
            ],
            condition: {
              type: 'JSFunction',
              value: 'target => !!target.getProps().getPropValue("pagination")',
            },
          },
          {
            name: 'pagination.position',
            title: { label: '分页位置', tip: 'pagination.position | 分页位置' },
            setter: {
              componentName: 'ArraySetter',
              props: {
                itemSetter: {
                  componentName: 'SelectSetter',
                  props: {
                    options: [
                      {
                        title: '上左',
                        value: 'topLeft',
                      },
                      {
                        title: '上中',
                        value: 'topCenter',
                      },
                      {
                        title: '上右',
                        value: 'topRight',
                      },
                      {
                        title: '下左',
                        value: 'bottomLeft',
                      },
                      {
                        title: '下中',
                        value: 'bottomCenter',
                      },
                      {
                        title: '下右',
                        value: 'bottomRight',
                      },
                    ],
                  },
                  initialValue: 'bottomRight',
                },
              },
            },
            condition: {
              type: 'JSFunction',
              value: 'target => !!target.getProps().getPropValue("pagination")',
            },
          },
        ],
      },
      {
        title: '滚动',
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'scroll.scrollToFirstRowOnChange',
            title: {
              label: '自动滚动',
              tip: 'scroll.scrollToFirstRowOnChange | 是否自动滚动到表格顶部',
            },
            propType: 'bool',
            setter: 'BoolSetter',
            defaultValue: true,
          },
          {
            name: 'scroll.x',
            title: {
              label: '横向滚动',
              tip:
                'scroll.x | 	设置横向滚动，也可用于指定滚动区域的宽，可以设置为像素值，百分比，true 和 max-content',
            },
            propType: { type: 'oneOfType', value: ['number', 'bool'] },
            setter: ['NumberSetter', 'BoolSetter', 'VariableSetter'],
          },
          {
            name: 'scroll.y',
            title: {
              label: '纵向滚动',
              tip: 'scroll.y | 	设置纵向滚动，也可用于指定滚动区域的高，可以设置为像素值',
            },
            propType: 'number',
            setter: ['NumberSetter', 'VariableSetter'],
          },
        ],
      },
      {
        title: '行选择器',
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'rowSelection',
            title: { label: '行选择', tip: 'rowSelection | 行选择' },
            propType: 'object',
            setter: 'BoolSetter',
            extraProps: {
              setValue: (target, value) => {
                if (value) {
                  target.parent.setPropValue('rowSelection', {
                    type: 'radio',
                  });
                }
              },
            },
          },
          {
            name: 'rowSelection.type',
            title: { label: '行选择类型', tip: 'rowSelection.type | 多选/单选' },
            propType: {
              type: 'oneOf',
              value: ['checkbox', 'radio'],
            },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    {
                      title: '多选',
                      value: 'checkbox',
                    },
                    {
                      title: '单选',
                      value: 'radio',
                    },
                  ],
                },
              },
              'VariableSetter',
            ],
            condition: {
              type: 'JSFunction',
              value: 'target => !!target.getProps().getPropValue("rowSelection")',
            },
          },
          {
            name: 'rowSelection.fixed',
            title: {
              label: '固定左边',
              tip: 'rowSelection.fixed | 把选择框列固定在左边',
            },
            propType: 'bool',
            setter: 'BoolSetter',
            condition: {
              type: 'JSFunction',
              value: 'target => !!target.getProps().getPropValue("rowSelection")',
            },
          },
          {
            name: 'rowSelection.selectedRowKeys',
            title: {
              label: '选中行Key',
              tip: 'rowSelection.selectedRowKeys | 指定选中项的 key 数组',
            },
            propType: 'object',
            setter: 'JsonSetter',
            condition: {
              type: 'JSFunction',
              value: 'target => !!target.getProps().getPropValue("rowSelection")',
            },
          },
          {
            name: 'rowSelection.preserveSelectedRowKeys',
            title: { label: '保留选项', tip: 'rowSelection.preserveSelectedRowKeys | 当数据被删除时仍然保留选项' },
            propType: 'bool',
            setter: 'BoolSetter',
            condition: {
              type: 'JSFunction',
              value: 'target => !!target.getProps().getPropValue("rowSelection")',
            },
          },
          {
            name: 'rowSelection.getCheckboxProps',
            title: {
              label: '默认属性',
              tip: 'rowSelection.getCheckboxProps | 选择框的默认属性配置',
            },
            propType: 'func',
            setter: [
              {
                componentName: 'FunctionSetter',
                props: {
                  template:
                    'getCheckboxProps(record,${extParams}){\n// 选择框的默认属性配置\nreturn { disabled: false };\n}',
                },
              },
              'VariableSetter',
            ],
            condition: {
              type: 'JSFunction',
              value: 'target => !!target.getProps().getPropValue("rowSelection")',
            },
          },
        ],
      },
      {
        title: '行展开',
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'expandable.expandedRowRender',
            title: {
              label: '展开行渲染',
              tip: 'expandable.expandedRowRender | 额外的展开行',
            },
            propType: 'func',
            setter: [
              {
                componentName: 'SlotSetter',
                title: '展开行插槽',
                initialValue: {
                  type: 'JSSlot',
                  params: ['record', 'index', 'indent', 'expanded'],
                  value: [],
                },
              },
              {
                componentName: 'FunctionSetter',
                props: {
                  template:
                    'expandedRowRender(record,index,indent,expanded,${extParams}){\n// 展开行渲染\nreturn `${record.id}`}',
                },
              },
              'VariableSetter',
            ],
          },
          {
            name: 'expandable.rowExpandable',
            title: {
              label: '是否可展开',
              tip: 'expandable.rowExpandable | 行是否可展开',
            },
            propType: 'func',
            setter: [
              {
                componentName: 'FunctionSetter',
                props: {
                  template: 'rowExpandable(record,${extParams}){\n// 行是否可展开\nreturn true;\n}',
                },
              },
              'VariableSetter',
            ],
          },
        ],
      },
    ],
    'supports': {
      'style': true,
      events: [
        {
          name: 'request',
          template: 'async request(params, sort, filter){\n//这里需要返回一个Promise\nconst msg = await myQuery({\npage: params.current,\npageSize:params.pageSize});\nreturn {data: msg.result,\nsuccess:boolean,\ntotal:number};}'
        },
        {
          name: 'postData',
          template: 'postData(data){\n //对通过request获取的数据进行处理\n}'
        },
        {
          name: 'onDataSourceChange',
          template: 'onDataSourceChange(dataSource){}'
        },
        {
          name: 'onLoad',
          template:
            'onLoad(dataSource){}',
        },
        {
          name: 'onLoadingChange',
          template:
            'onLoading(loading){}',
        },
        {
          name: 'onRequestError',
          template:
            'onRequestError(error){}',
        },
        {
          name: 'beforeSearchSubmit',
          template:
            'beforeSearchSubmit(params){}',
        },
        {
          name: 'onSizeChange',
          template:
            'onSizeChange(size:"default" | "middle" | "small" ){}',
        },
        {
          name: 'onSubmit',
          template:
            'onSubmit(params){}',
        },
        {
          name: 'onReset',
          template:
            'onReset(){}',
        },
        {
          name: 'rowSelection.onChange',
          template:
            'onRowSelectionChange(selectedRowKeys,selectedRows,${extParams}){\n// 选中项发生变化时的回调\nconsole.log("onRowSelectionChange", selectedRowKeys, selectedRows);}',
        },
        {
          name: 'expandable.onExpand',
          template:
            'onExpandableExpand(expanded,record){\n// 点击展开图标时触发\nconsole.log("onRowSelectionChange", expanded, record);}',
        },
      ],
    },
    'component': {},
  },
  category: '数据展示',
  group: '精选组件',
  utils: [{
    name: '@sindresorhus/is',
    npm: {
      package: '@sindresorhus/is'
    }
  }],
  packages: [
    {
      package: '@sindresorhus/is',
      version: '6.1.0',
      urls: [
        "https://registry.npmmirror.com/@sindresorhus/is/-/is-6.1.0.tgz",
      ]
    }
  ]
};
const snippets: IPublicTypeSnippet[] = [
  {
    'title': 'ProTable',
    'screenshot': '',
    'schema': {
      'componentName': 'ProTable',
      'props': {
        columns: [
          {
            title: 'ID',
            dataIndex: 'title',
            copyable: true,
            ellipsis: true,
            tooltip: '标题过长会自动收缩',
            formItemProps: {
              rules: [
                {
                  required: true,
                  message: '此项为必填项',
                },
              ],
            },
          },
          {
            disable: true,
            title: '状态',
            dataIndex: 'state',
            filters: true,
            onFilter: true,
            ellipsis: true,
            valueType: 'text',
          },
          {
            disable: true,
            title: '标签',
            dataIndex: 'labels',
            valueType: 'text'
          },
          {
            title: '创建时间',
            key: 'showTime',
            dataIndex: 'created_at',
            valueType: 'date',
            sorter: true,
            hideInSearch: true,
          },
        ],
        actionColumn: {
          title: '操作',
          fixed: 'right',
          width: 120
        },
        actionColumnButtons: {
          dataSource: [
            {
              key: 'editable',
              name: '绑定权限',
              //disabled: true,
            },
            // {
            //   key: 'view',
            //   name: '查看',
            // },
            // {
            //   key: 'delete',
            //   name: '删除',
            // },
            // {
            //   key: 'copy',
            //   name: '复制',
            // }
          ],
          visibleButtonCount: 2
        },
        dataSource,
        editable: {
          type: 'multiple',
        },
        rowKey: "id",
        search: {
          labelWidth: 'auto',
        },
        pagination: {
          pageSize: 5,
          onChange: (page) => console.log(page),
        },
        dateFormatter: "string",
        headerTitle: "高级表格",
      }
    }
  }
];

export default {
  ...ProTableMeta,
  snippets
};