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

export default {
  snippets,
  componentName: "BlEditableProTable",
  title: "可编辑表格",
  category: "页面展示",
  group: "精选组件",
  props: [
    {
      title: "数据源",
      display: "accordion",
      type: "group",
      items: [
          {
            name: "onVisibleChange",
            title: { label: "变化时回调函数", tip: "变化时回调函数" },
            propType: "func",
            condition: () => false
          },
          {
            name: "getroot",
            title: { label: "变化时回调函数", tip: "变化时回调函数" },
            propType: "func",
            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: "link"
                              },
                              {
                                label: "平淡",
                                value: "text"
                              },
                              {
                                label: "重点",
                                value: "danger"
                              }
                            ]
                          }
                        },
                        defaultValue: "link",
                        isRequired: true
                      },
                      {
                        name: "btnbehavior",
                        "title": "交互设置",
                        "display": "block",
                        "setter": BLBehaviorSetter,
                        "props": {
                          actions: ["onclick"]
                        }
                      }
                    ]
                  }
                },
                initialValue: () => {
                  return {
                    btnName: "操作",
                    btnType: "link"
                  };
                }
              }
            }
          }
        }
      ]
    },
    {
      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: 1
                              },
                              {
                                label: "导入",
                                value: 2
                              },
                              {
                                label: "批量审核",
                                value: 3
                              },
                              {
                                label: "批量编辑",
                                value: 4
                              },
                              {
                                label: "刷新",
                                value: 5
                              }
                            ]
                          }
                        },
                        defaultValue: "link",
                        isRequired: true
                      }
                    ]
                  }
                },
                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: "isPage1",
          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);}"
        },
        {
          name: "getroot",
          template:
            "getroot(visible,${extParams}){\n// 显示隐藏的回调\nconsole.log('getroot',visible);}"
        }
      ]
    }
  }
};