/**
 * @file 图表组件对接编辑器的描述文件
 */
export class CmpPlugin {
  /**
   * rendererName 为自定义组件名称，用于标识组件的唯一性
   * 在构建时根据当前组件目录名称自动生成
   */
  // rendererName: string = 'chart-widget';

  // 组件名称，用于设置在编辑器左侧组件面板中展示的名称
  name: string = '酷炫图表组件';

  // 组件描述，用于设置在编辑器左侧组件面板中展示的描述
  description: string =
    '支持多种图表类型切换的专业图表组件，支持丰富的配置选项';

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

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

  // 初次插入页面的默认属性数据
  scaffold = {
    chartType: 'line',
    title: '销售趋势分析',
    subtitle: '2025年数据统计',
    width: 800,
    height: 400,
    theme: 'default',
    showLegend: true,
    showTooltip: true,
    showDataZoom: false,
    showGrid: true,
    backgroundColor: 'transparent',
    textColor: '#333',
    mockData: {
      xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
      series: [
        {
          name: '销售额',
          data: [120, 200, 150, 80, 70, 110],
        },
      ],
    },
    dataConfig: {
      enableMock: true,
      dataSource: 'mock',
    },
  };

  // 设计器端预览时展示的默认数据
  previewSchema = {
    label: '酷炫图表组件',
    chartType: 'bar',
    title: '预览图表',
    width: 400,
    height: 300,
  };

  panelTitle = '配置';

  /**
   * 组件面板配置，用于生成编辑器右侧属性配置面板内容
   * 使用 JSON AMIS 表单配置
   */
  panelBodyCreator = () => [
      {
        type: 'select',
        name: 'chartType',
        label: '图表类型',
        value: 'line',
        options: [
          { label: '折线图', value: 'line' },
          { label: '柱状图', value: 'bar' },
          { label: '饼图', value: 'pie' },
          { label: '散点图', value: 'scatter' },
          { label: '雷达图', value: 'radar' },
          { label: '仪表盘', value: 'gauge' },
          { label: '漏斗图', value: 'funnel' },
          { label: '桑基图', value: 'sankey' },
        ],
        clearable: false,
      },
      {
        type: 'input-text',
        name: 'title',
        label: '主标题',
        value: '销售趋势分析',
        placeholder: '请输入图表标题',
      },
      {
        type: 'input-text',
        name: 'subtitle',
        label: '副标题',
        value: '2025年数据统计',
        placeholder: '请输入图表副标题',
      },
      {
        type: 'input-number',
        name: 'width',
        label: '宽度',
        value: 800,
        min: 200,
        max: 2000,
        step: 10,
      },
      {
        type: 'input-number',
        name: 'height',
        label: '高度',
        value: 400,
        min: 200,
        max: 1000,
        step: 10,
      },
      {
        type: 'switch',
        name: 'showLegend',
        label: '显示图例',
        value: true,
      },
      {
        type: 'switch',
        name: 'showTooltip',
        label: '显示提示框',
        value: true,
      },
    ];
}

export default CmpPlugin;