import snippets from './snippets';
import { project } from '@alilc/lowcode-engine';
import { BLBehaviorSetter, BLPageData } from '../_setters';

export default {
  snippets,
  componentName: 'BLProTable',
  title: '超级表格',
  category: '页面展示',
  group: '精选组件',
  props: [
    {
      title: '数据源',
      display: 'accordion',
      type: 'group',
      items: [
        {
          name: 'onVisibleChange',
          title: { label: '变化时回调函数', tip: '变化时回调函数' },
          propType: 'func',
          condition: () => false,
        },
        {
          name: 'dataSourceLoad',
          title: { label: '变化时回调函数', tip: '变化时回调函数' },
          propType: 'func',
          setter:{
            componentName: 'FunctionSetter',
          },
          condition: () => false,
        },
        {
          name: 'getState',
          title: { label: '变化时回调函数', tip: '变化时回调函数' },
          propType: 'func',
          setter:{
            componentName: 'FunctionSetter',
          },
          condition: () => false,
        },
        {
          name: 'dataSourceId',
          condition: () => false,
          setter: {
            componentName: 'StringSetter',
          },
        },
        {
          name: 'tableData',
          title: { label: '表格数据', tip: 'dataSource | 表格数据' },
          setter: ['JsonSetter', 'VariableSetter'],
          extraProps: {
            setValue(target: any, value: any) {
              console.log('tableData:', value);
              const { node } = target;
              node.setPropValue('dataSourceId', value.value);
            },
          },
        },
      ],
    },
    {
      title: {
        label: {
          type: 'i18n',
          'en-US': 'style',
          'zh-CN': 'style',
        },
      },
      name: 'style',
      setter: {
        componentName: 'RadioGroupSetter',
        props: {
          dataSource: [
            {
              label: 'object',
              value: 'object',
            },
          ],
          options: [
            {
              label: 'object',
              value: 'object',
            },
          ],
        },
        initialValue: 'object',
      },
    },
    {
      name: 'columns',
      display: 'accordion',
      title: { label: '表格列', tip: '表格列的配置描述，具体项见下表' },
      setter: {
        componentName: 'ArraySetter',
        props: {
          itemSetter: {
            componentName: 'ObjectSetter',
            props: {
              config: {
                items: [
                  {
                    name: 'fieldName',
                    title: { label: '标题', tip: 'fieldName | 标题' },
                    propType: 'string',
                    setter: 'StringSetter',
                    isRequired: true,
                  },
                  {
                    name: 'columnName',
                    title: { label: '数据字段', tip: 'columnName | 数据字段' },
                    propType: 'string',
                    setter: 'StringSetter',
                    isRequired: true,
                  },
                  {
                    name: 'businessFieldType',
                    title: { label: '数据字段', tip: 'columnName | 数据字段' },
                    propType: 'string',
                    setter: {
                      componentName: 'SelectSetter',
                      props: {
                        options: [
                          {
                            label: '文本',
                            value: 'string',
                          },
                          {
                            label: '图片',
                            value: 'image',
                          },
                          {
                            label: '文件',
                            value: 3,
                          },
                        ],
                      },
                    },
                    initialValue: 'string',
                  },
                  {
                    name: 'align',
                    title: '对齐方式',
                    description: '对齐方式',
                    setter: {
                      componentName: 'RadioGroupSetter',
                      props: {
                        options: [
                          {
                            label: '居左',
                            value: 'left',
                          },
                          {
                            label: '居中',
                            value: 'center',
                          },
                          {
                            label: '居右',
                            value: 'right',
                          },
                        ],
                      },
                      initialValue: 'left',
                    },
                  },
                  {
                    name: 'fixed',
                    title: '锁列',
                    description: '锁列',
                    setter: {
                      componentName: 'RadioGroupSetter',
                      props: {
                        options: [
                          {
                            label: '不固定',
                            value: 'none',
                          },
                          {
                            label: '居左',
                            value: 'left',
                          },
                          {
                            label: '居右',
                            value: 'right',
                          },
                        ],
                      },
                      initialValue: 'none',
                    },
                  },
                  {
                    name: 'isSorter',
                    title: { label: '是否排序' },
                    setter: 'BoolSetter',
                  },
                  {
                    name: 'fieldWidth',
                    title: { label: '宽度' },
                    setter: 'NumberSetter',
                  },
                  {
                    name: 'remark',
                    title: { label: '备注' },
                    setter: 'StringSetter',
                  },
                ],
              },
            },
            initialValue: () => {
              return {
                fieldName: '标题',
                columnName: 'title',
                businessFieldType: 'string',
              };
            },
          },
        },
      },
    },
    {
      title: '操作列',
      display: 'accordion',
      extraProps: {
        display: 'accordion',
        defaultCollapsed: true,
      },
      type: 'group',
      items: [
        {
          name: 'columnActionName',
          title: { label: '标题' },
          setter: {
            componentName: 'StringSetter',
          },
          initialValue: '操作',
        },
        {
          name: 'columnActionButtonWidth',
          title: { label: '宽度' },
          setter: {
            componentName: 'NumberSetter',
            props: {
              units: 'px',
              defaultValue: 120,
            },
          },
        },
        {
          name: 'lockRowType',
          title: { label: '锁列' },
          setter: {
            componentName: 'RadioGroupSetter',
            props: {
              options: [
                {
                  label: '不固定',
                  value: 'none',
                },
                {
                  label: '居左',
                  value: 'left',
                },
                {
                  label: '居右',
                  value: 'right',
                },
              ],
            },
            defaultValue: 'right',
          },
        },
      ],
    },
    {
      title: '操作列按钮',
      display: 'accordion',
      extraProps: {
        display: 'accordion',
        defaultCollapsed: true,
      },
      type: 'group',
      items: [
        {
          name: 'columnButtonNum',
          title: { label: '可见数量' },
          setter: {
            componentName: 'NumberSetter',
          },
        },
        {
          name: 'columnButtonWidth',
          title: { label: '宽度' },
          setter: {
            componentName: 'NumberSetter',
            props: {
              units: 'px',
              defaultValue: 120,
            },
          },
        },
        {
          name: 'columnButtons',
          title: { label: '按钮组' },
          extraProps: {
            display: 'plain',
          },
          setter: {
            componentName: 'ArraySetter',
            props: {
              hideDescription: true,
              itemSetter: {
                componentName: 'ObjectSetter',
                props: {
                  config: {
                    items: [
                      {
                        name: 'btnName',
                        title: { label: '按钮名' },
                        propType: 'string',
                        setter: 'StringSetter',
                        isRequired: true,
                        initialValue: {
                          value: '操作',
                        },
                      },
                      {
                        name: 'btnType',
                        title: { label: '按钮类型' },
                        propType: 'string',
                        mode: 'single',
                        setter: {
                          componentName: 'SelectSetter',
                          props: {
                            options: [
                              {
                                label: '编辑类',
                                value: 1,
                              },
                              {
                                label: '审核类',
                                value: 2,
                              },
                              {
                                label: '删除类',
                                value: 3,
                              },
                              {
                                label: '打印类',
                                value: 4,
                              },
                            ],
                          },

                          extraProps: {
                            setValue(target: any, value: any) {
                              // const { node } = target;
                              // let behavior = target.parent.getPropValue("behavior")
                              // behavior["btnType"] = value
                              // target.parent.setPropValue("behavior", behavior);
                            },
                          },
                          condition: (field: any) => {
                            let behavior = field.parent.getPropValue('behavior');
                            behavior['btnType'] = field.getValue();
                            console.log(234, 423234, behavior);
                            field.parent.setPropValue('behavior', behavior);
                          },
                        },
                        defaultValue: 1,
                        isRequired: true,
                      },
                      {
                        name: 'behavior',
                        title: '交互设置',
                        display: 'block',
                        setter: BLBehaviorSetter,
                        props: {
                          actions: ['onclick'],
                        },
                      },
                      {
                        name: 'parmsData', 
                        display: 'block',
                        setter: BLPageData,
                        props: {
                          actions: ['onclick'],
                        },
                      },
                    ],
                  },
                },
                initialValue: () => {
                  return {
                    btnName: '操作',
                    btnType: 1,
                  };
                },
              },
            },
          },
        },
      ],
    },
    {
      title: '操作栏按钮',
      display: 'accordion',
      extraProps: {
        display: 'accordion',
        defaultCollapsed: true,
      },
      type: 'group',
      items: [
        {
          name: 'tableControlButtonNum',
          title: { label: '可见数量' },
          setter: {
            componentName: 'NumberSetter',
          },
        },
        {
          name: 'tableControlButtonWidth',
          title: { label: '宽度' },
          setter: {
            componentName: 'NumberSetter',
            props: {
              units: 'px',
              defaultValue: 120,
            },
          },
        },
        {
          name: 'tableControlButtons',
          title: { label: '按钮组' },
          extraProps: {
            display: 'plain',
          },
          setter: {
            componentName: 'ArraySetter',
            props: {
              hideDescription: true,
              itemSetter: {
                componentName: 'ObjectSetter',
                props: {
                  config: {
                    items: [
                      {
                        name: 'btnName',
                        title: { label: '按钮名称' },
                        propType: 'string',
                        setter: 'StringSetter',
                        isRequired: true,
                        initialValue: {
                          value: '操作',
                        },
                      },
                      {
                        name: 'btnType',
                        title: { label: '按钮类型' },
                        propType: 'string',
                        mode: 'single',
                        setter: {
                          componentName: 'SelectSetter',
                          props: {
                            options: [
                              {
                                label: '新增类',
                                value: 5,
                              },
                              {
                                label: '导入类',
                                value: 6,
                              },
                              {
                                label: '导出类',
                                value: 7,
                              },
                              {
                                label: '批量编辑',
                                value: 8,
                              },
                              {
                                label: '批量审核',
                                value: 9,
                              },
                              {
                                label: '批量删除',
                                value: 10,
                              },
                              // {
                              //   label: '刷新类',
                              //   value: 11,
                              // },
                              {
                                label: '打印类',
                                value: 12,
                              },
                            ],
                          },
                          extraProps: {
                            setValue(target: any, value: any) {
                              // const { node } = target;
                              // let behavior = target.parent.getPropValue("behavior")
                              // behavior["btnType"] = value
                              // target.parent.setPropValue("behavior", behavior);
                            },
                          },
                          condition: (field: any) => {
                            let behavior = field.parent.getPropValue('behavior');
                            behavior['btnType'] = field.getValue();
                            console.log(234, 423234, behavior);
                            field.parent.setPropValue('behavior', behavior);
                          }
                        },
                        defaultValue: 5,
                        isRequired: true,
                      },
                      {
                        name: 'behavior',
                        title: '交互设置',
                        display: 'block',
                        setter: BLBehaviorSetter,
                        props: {
                          actions: ['onclick'],
                        },
                      }, 
                      {
                        name: 'parmsData', 
                        display: 'block',
                        setter: BLPageData,
                        props: {
                          actions: ['onclick'],
                        },
                      },
                    ],
                  },
                },
                initialValue: () => {
                  return {
                    btnName: '操作',
                    btnType: 1,
                  };
                },
              },
            },
          },
        },
      ],
    },
    {
      title: '分页设置',
      display: 'accordion',
      extraProps: {
        display: 'accordion',
        defaultCollapsed: true,
      },
      type: 'group',
      items: [
        {
          name: 'isPage',
          title: { label: '是否分页' },
          setter: {
            componentName: 'BoolSetter',
          },
        },
        {
          name: 'pageSize',
          title: { label: '每页条数' },
          setter: {
            componentName: 'NumberSetter',
            props: {
              min: 5,
              max: 20,
              step: 5,
              defaultValue: 10,
            },
          },
        },
      ],
    },
    {
      title: '高级',
      display: 'accordion',
      extraProps: {
        display: 'accordion',
        defaultCollapsed: true,
      },
      type: 'group',
      items: [
        {
          title: '选择模式',
          name: 'chooseType',
          description: '选择模式',
          setter: {
            componentName: 'RadioGroupSetter',
            props: {
              dataSource: [
                {
                  label: '默认',
                  value: 'none',
                },
                {
                  label: '多选',
                  value: 'checkbox',
                },
                {
                  label: '单选',
                  value: 'radio',
                },
              ],
              options: [
                {
                  label: '默认',
                  value: 'none',
                },
                {
                  label: '多选',
                  value: 'checkbox',
                },
                {
                  label: '单选',
                  value: 'radio',
                },
              ],
            },
            initialValue: 'none',
          },
        },
        {
          title: '开启序号',
          name: 'openSerialNumber',
          description: '开启序号',
          setter: {
            componentName: 'BoolSetter',
            initialValue: false,
          },
        },
        {
          title: '开启设置按钮',
          name: 'openSetterButton',
          description: '开启设置按钮',
          setter: {
            componentName: 'BoolSetter',
            initialValue: true,
          },
        },
      ],
    },
    {
      title: '全局样式',
      display: 'accordion',
      extraProps: {
        display: 'accordion',
        defaultCollapsed: true,
      },
      type: 'group',
      items: [
        {
          name: 'isBordered',
          title: { label: '列分隔线' },
          setter: {
            componentName: 'BoolSetter',
          },
        },
        {
          name: 'isZebra',
          title: { label: '斑马线' },
          setter: {
            componentName: 'BoolSetter',
          },
        },
        {
          name: 'isScroll',
          title: { label: '固定表头' },
          setter: {
            componentName: 'BoolSetter',
          },
        },
        {
          title: '密度',
          name: 'size',
          description: '选择模式',
          setter: {
            componentName: 'RadioGroupSetter',
            props: {
              dataSource: [
                {
                  label: '紧凑',
                  value: 'small',
                },
                {
                  label: '正常',
                  value: 'Middle',
                },
              ],
              options: [
                {
                  label: '紧凑',
                  value: 'small',
                },
                {
                  label: '正常',
                  value: 'Middle',
                },
              ],
            },
            initialValue: 'small',
          },
        },
      ],
    },
  ],
  configure: {
    component: {
      isContainer: true,
    },
    supports: {
      style: true,
      events: [
        {
          name: 'onVisibleChange',
          template:
            "onVisibleChange(visible,${extParams}){\n// 显示隐藏的回调\nconsole.log('onVisibleChange',visible);}",
        },

      ],
    },
  },
};