import snippets from './snippets';
import {uuid} from "../_utils/utils";

export default {
  group: '精选组件',
  snippets,
  componentName: 'ProTable',
  title: '高级表格',
  category: '数据展示',
  props: [
    {
      title: '数据源',
      display: 'block',
      type: 'group',
      items: [
        {
          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: 'ref',
      title: {
        label: 'ref',
        tip: 'ref | 通过 this.$(\'xxx\') 获取到表格组件实例',
      },
      defaultValue: () => {
        return `tabel_ref_${uuid()}`
      },
      setter: 'StringSetter',
      supportVariable: true
    },
    {
      name: 'request',
      propType: 'func',
      description: '列表请求',
    },
    {
      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: [],
                        },
                      },
                    ],
                  },
                  {
                    name: 'dataIndex',
                    title: { label: '数据字段', tip: 'dataIndex | 数据字段' },
                    propType: 'string',
                    setter: 'StringSetter',
                    isRequired: true,
                  },
                  {
                    name: 'tooltip',
                    title: { label: '提示信息', tip: 'tooltip | 会在 title 之后展示一个 icon，hover 之后提示一些信息' },
                    propType: 'string',
                    setter: 'StringSetter',
                  },
                  {
                    name: 'ellipsis',
                    title: { label: '是否自动缩略', tip: 'ellipsis | 是否自动缩略' },
                    propType: 'bool',
                    setter: 'BoolSetter',
                    defaultValue: true,
                  },
                  {
                    name: 'copyable',
                    title: { label: '是否支持复制', tip: 'copyable | 是否支持复制' },
                    propType: 'bool',
                    setter: 'BoolSetter',
                    defaultValue: false,
                  },
                  {
                    name: 'hideInSearch',
                    title: { label: '是否在搜索隐藏', tip: 'hideInSearch | 是否在搜索隐藏' },
                    propType: 'string',
                    setter: 'BoolSetter',
                    defaultValue: false,
                  },
                  {
                    name: 'hideInTable',
                    title: { label: '是否在列表隐藏', tip: 'hideInTable | 是否在列表隐藏' },
                    propType: 'string',
                    setter: 'BoolSetter',
                    defaultValue: false,
                  },
                  {
                    name: 'valueEnum',
                    title: { label: '值的枚举', tip: 'valueEnum | 值的枚举' },
                    propType: 'string',
                    setter: 'StringSetter',
                    supportVariable:true
                  },
                  {
                    name: 'valueType',
                    title: { label: '值的类型', tip: 'valueType | 值的类型,会生成不同的渲染器' },
                    propType: {
                      type: 'oneOf',
                      value: ['treeSelect', 'cascader', 'checkbox','radioButton','radio','index','indexBorder','code','avatar','image','money','digit','second','percent'],
                    },

                    setter: [
                      {
                        componentName: 'SelectSetter',
                        props: {
                          options: [
                            {
                              title:'文本',
                              value: 'text'
                            },{
                              title:'树选择器',
                              value: 'treeSelect'
                            },{
                              title:'级联选择器',
                              value: 'cascader'
                            },{
                              title:'checkbox',
                              value: 'checkbox'
                            },{
                              title:'单选按钮组',
                              value: 'radioButton'
                            },{
                              title:'单选',
                              value: 'radio'
                            },{
                              title:'序号',
                              value: 'index'
                            },{
                              title:'indexBorder',
                              value: 'indexBorder'
                            },{
                              title:'code',
                              value: 'code'
                            },{
                              title:'头像',
                              value: 'avatar'
                            },{
                              title:'图片',
                              value: 'image'
                            },{
                              title:'金额',
                              value: 'money'
                            },{
                              title:'数字',
                              value: 'digit'
                            },{
                              title:'second',
                              value: 'second'
                            },{
                              title:'percent',
                              value: 'percent'
                            },
                          ]}
                      }
                    ],
                    defaultValue: 'text',
                  },
                  {
                    name: 'key',
                    title: { label: 'React key', tip: 'key | React需要的key' },
                    propType: 'object',
                    setter: 'StringSetter',
                  },
                  {
                    name: 'fieldProps',
                    title: { label: 'React key', tip: 'key | React需要的key' },
                    propType: 'string',
                    setter: 'StringSetter',
                    supportVariable: true
                  },
                  {
                    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 | 列是否固定' },
                    description: '（IE 下无效）列是否固定，可选 true (等效于 left) left right',
                    defaultValue: '',
                    propType: {
                      type: 'oneOf',
                      value: ['', 'left', 'right'],
                    },
                    setter: [
                      {
                        componentName: 'RadioGroupSetter',
                        props: {
                          options: [
                            {
                              title: '不固定',
                              value: '',
                            },
                            {
                              title: '固定在左侧',
                              value: 'left',
                            },
                            {
                              title: '固定在右侧',
                              value: 'right',
                            },
                          ],
                        },
                      },
                      'VariableSetter',
                    ],
                  },
                  {
                    name: 'className',
                    title: {
                      label: '列样式类名',
                      tip: 'className | 列样式类名',
                    },
                    propType: 'string',
                    setter: 'StringSetter',
                  },
                  {
                    name: 'width',
                    title: { label: '宽度', tip: 'width | 宽度' },
                    propType: {
                      type: 'oneOfType',
                      value: ['number', 'string'],
                    },
                    setter: ['NumberSetter', 'StringSetter', 'VariableSetter'],
                  },
                  {
                    name: 'sorter',
                    title: {
                      label: '排序规则',
                      tip: 'sorter | 排序函数，本地排序使用一个函数，需要服务端排序可设为 true',
                    },
                    propType: { type: 'oneOfType', value: ['bool', 'func'] },
                    setter: ['BoolSetter', 'FunctionSetter', 'VariableSetter'],
                  },
                  {
                    name: 'hidden',
                    title: {
                      label: '是否隐藏',
                      tip: 'hidden | 是否隐藏当前列',
                    },
                    propType: 'bool',
                    setter: 'BoolSetter',
                  },
                  {
                    name: 'filters',
                    title: {
                      label: '筛选菜单项',
                      tip: 'filters | 表头的筛选菜单项',
                    },
                    propType: 'object',
                    setter: 'JsonSetter',
                  },
                  {
                    name: 'render',
                    title: {
                      label: '自定义渲染',
                      tip:
                        'render | 插槽内的物料表达式可通过this.record获取当前行数据，this.index获取索引',
                    },
                    propType: 'func',
                    setter: [
                      {
                        componentName: 'SlotSetter',
                        title: '单元格插槽',
                        initialValue: {
                          type: 'JSSlot',
                          params: ['text', 'record', 'index'],
                          value: [],
                        },
                      },
                      'VariableSetter',
                    ],
                  },
                ],
              },
            },
            initialValue: { title: '标题' },
          },
        },
      },
    },
    {
      title: '外观',
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'showHeader',
          title: { label: '显示表头', tip: 'showHeader | 是否显示表头' },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: true,
        },
        {
          name: 'search',
          title: { label: '显示搜索', tip: 'search | 是否显示搜索' },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: true,
        },
        {
          name: 'cardBordered',
          title: { label: 'Card边框', tip: 'cardBordered | Table 和 Search 外围 Card 组件的边框' },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: true,
        },
        {
          name: 'bordered',
          title: {
            label: '显示边框',
            tip: 'bordered | 是否展示外边框和列边框',
          },
          propType: 'bool',
          setter: 'BoolSetter',
        },
        {
          name: 'headerTitle',
          title: { label: '表格汇总', tip: 'headerTitle | 表格汇总' },
          propType: 'node',
          setter: 'SlotSetter',
        },
        {
          name: 'toolBarRender',
          title: { label: '操作区域', tip: 'toolBarRender | 操作区域' },
          propType: 'node',
          setter: 'SlotSetter',
        },
        {
          name: 'tableAlertRender',
          title: {
            label: '选择汇总渲染',
            tip:
              'tableAlertRender | 自定义批量操作工具栏左侧信息区域,',
          },
          propType: 'func',
          setter: [
            {
              componentName: 'SlotSetter',
              title: '单元格插槽',
              initialValue: {
                type: 'JSSlot',
                params: ['selectedRowKeys', 'selectedRows'],
                value: [],
              },
            },
            'VariableSetter',
          ],
        },
        {
          name: 'tableAlertOptionRender',
          title: {
            label: '选择操作',
            tip:
              'tableAlertOptionRender | 自定义批量操作工具栏左侧信息区域,',
          },
          propType: 'func',
          setter: [
            {
              componentName: 'SlotSetter',
              title: '单元格插槽',
              initialValue: {
                type: 'JSSlot',
                params: ['selectedRowKeys', 'selectedRows'],
                value: [],
              },
            },
            'VariableSetter',
          ],
        },
        {
          name: 'footerExtra',
          propType: { type: 'oneOfType', value: ['string', 'func'] },
          setter: [
            'StringSetter',
            'SlotSetter'
          ],
        },
        {
          name: 'size',
          title: { label: '表格大小', 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: '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: '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: 'bool',
          setter: 'BoolSetter',
          defaultValue: false,
          extraProps: {
            setValue: (target, value) => {
              if (value) {
                target.parent.setPropValue('rowSelection', {
                  type: 'radio',
                });
              }
            },
          },
        },
        {
          name: 'rowSelection.alwaysShowAlert',
          title: {
            label: '总是显示alert',
            tip:
              'alwaysShowAlert | 总是展示 alert，默认无选择不展示',
          },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: false
        },
        {
          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',
            'VariableSetter',
          ],
          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',
          ],
        },
      ],
    },
    {
      title: '扩展',
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'onHeaderRow',
          title: { label: '头部行属性', tip: 'onHeaderRow | 设置头部行属性' },
          propType: 'func',
          setter: [
            {
              componentName: 'FunctionSetter',
              props: {
                template:
                  'onHeaderRow(columns,index,${extParams}){\n// 设置头部行属性\nreturn {onClick:()=>{}};\n}',
              },
            },
            'VariableSetter',
          ],
        },
        {
          name: 'onRow',
          title: { label: '行属性', tip: 'onRow | 设置行属性' },
          propType: 'func',
          setter: [
            {
              componentName: 'FunctionSetter',
              props: {
                template:
                  'onRow(record,index,${extParams}){\n// 设置行属性\nreturn {onClick:event=>{}};\n}',
              },
            },
            'VariableSetter',
          ],
        },
        {
          name: 'rowClassName',
          title: { label: '行类名', tip: 'rowClassName | 表格行的类名' },
          propType: 'func',
          setter: [
            {
              componentName: 'FunctionSetter',
              props: {
                template:
                  'rowClassName(record,index,${extParams}){\n// 表格行的类名\nreturn `className-${record.type}`;\n}',
              },
            },
            'VariableSetter',
          ],
        },
      ],
    },
  ],
  configure: {
    supports: {
      // style: true,
      events: [
        {
          name: 'onChange',
          template:
            "onChange(pagination,filters,sorter,extra,${extParams}){\n// 表格翻页事件\nconsole.log('onChange', pagination);}",
        },
        {
          name: 'rowSelection.onChange',
          template:
            "onRowSelectionChange(selectedRowKeys,selectedRows,${extParams}){\n// 选中项发生变化时的回调\nconsole.log('onRowSelectionChange', selectedRowKeys, selectedRows);}",
        },
      ],
    },
  },
};