import snippets from './snippets';

export default {
  snippets,
  componentName: 'AMTable',
  docUrl: 'https://nutui.jd.com/h5/react/2x/#/zh-CN/component/table',
  title: '表格',
  category: '数据展示',
  group: '基础组件',
  props: [
    {
      name: 'data',
      title: { label: '表格数据', tip: 'data | 表格数据' },
      propType: 'object',
      setter: 'JsonSetter',
      supportVariable: true,
    },
    {
      name: 'bordered',
      title: { label: '是否显示边框', tip: 'bordered' },
      propType: 'bool',
      setter: 'BoolSetter',
    },
    {
      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: 'key',
                    title: { label: '数据字段', tip: 'key | 数据字段' },
                    propType: 'string',
                    setter: 'StringSetter',
                    isRequired: 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: '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: '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: '标题' },
          },
        },
      },
    },
    {
      name: 'summary',
      title: { label: '简介', tip: 'summary | 简介' },
      propType: 'string',
      setter: 'StringSetter',
    },
    {
      name: 'striped',
      title: { label: '条纹是否明暗交替', tip: 'striped | 条纹是否明暗交替' },
      propType: 'bool',
      setter: 'BoolSetter',
    },
    {
      name: 'showHeader',
      title: { label: '是否显示表头	', tip: 'showHeader | 是否显示表头' },
      propType: 'bool',
      defaultValue: true,
      setter: 'BoolSetter',
    },
  ],
  configure: {
    supports: {
      style: true,
      events: [
        {
          name: 'onChange',
          description: '开关变化时的回调',
          template:
            "\tonChange(value,${extParams}){\n\t\t// 开关变化时的回调\n\t\tconsole.log('onChange',value);\n\t}\n",
        },
      ],
    },
  },
};