/**
 * @file 数据仪表板组件对接编辑器的描述文件
 */
export class CmpPlugin {
  // 组件名称，用于设置在编辑器左侧组件面板中展示的名称
  name: string = '数据仪表板';

  // 组件描述，用于设置在编辑器左侧组件面板中展示的描述
  description: string = '酷炫的数据展示仪表板，支持动态数据更新和动画效果';

  // 分类标签，用于设置在编辑器左侧组件面板哪个分类中展示（可设置多个分类标签）
  tags: string[] = ['仪表板'];

  // 组件图标，用于设置在编辑器左侧组件面板中展示的图标
  iconSrc: string = 'https://neo-widgets.bj.bcebos.com/custom-widget.svg';

  // 初次插入页面的默认属性数据
  scaffold = {
    title: '数据仪表板',
    theme: 'gradient',
    showAnimations: true,
    label: '数据仪表板',
  };

  // 设计器端预览时展示的默认数据
  previewSchema = {
    label: '数据仪表板',
    title: '数据仪表板预览',
    theme: 'light',
    showAnimations: false,
  };

  panelTitle = '配置';

  /**
   * 组件面板配置，用于生成编辑器右侧属性配置面板内容
   */
  panelBodyCreator = () => [
    {
      type: 'input-text',
      name: 'title',
      label: '仪表板标题',
      value: '数据仪表板',
    },
    {
      type: 'select',
      name: 'theme',
      label: '主题样式',
      value: 'gradient',
      options: [
        { label: '渐变主题', value: 'gradient' },
        { label: '深色主题', value: 'dark' },
        { label: '浅色主题', value: 'light' },
      ],
    },
    {
      type: 'switch',
      name: 'showAnimations',
      label: '启用动画效果',
      value: true,
    },
  ];
}

export default CmpPlugin;