import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
import { default as ColorArraySetter } from '../setter/ColorArraySetter';
import Api from './api';

const RadarChartMeta: IPublicTypeComponentMetadata = {
  componentName: 'RadarChart',
  title: '雷达图',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  category: '图表',
  group: '精选组件',
  npm: {
    package: 'temp-materials',

    exportName: 'RadarChart',
    main: 'src\\index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      //常用配置
      {
        title: '常用配置',
        type: 'group',
        display: 'accordion',
        items: [
          // 曲线
          {
            title: {
              label: '曲线',
              tip: '开启后线条变为平滑曲线,默认为折线段',
            },
            name: 'smooth',
            setter: {
              componentName: 'BoolSetter',
              initialValue: false,
            },
          },
          //填充色配置
          {
            title: '填充色配置',
            name: 'area',
            display: 'plain',
            setter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      title: {
                        label: '填充',
                        tip: '路径内部开启颜色填充',
                      },
                      name: 'visible',
                      setter: {
                        componentName: 'BoolSetter',
                        isRequired: true,
                        initialValue: false,
                      },
                    },
                  ],
                  extraSetter: {
                    componentName: 'MixedSetter',
                    isRequired: false,
                    props: {},
                  },
                },
              },
              isRequired: true,
            },
          },
          //系列颜色
          {
            name: 'colors',
            title: {
              label: '图表套色',
              tip: '设置图表的系列颜色,按系列顺序一一对应',
            },
            setter: {
              componentName: ColorArraySetter,
              isRequired: false,
              initialValue:
                '#2A8BFF,#F99300,#2DA84F,#FCD000,#7367EE,#72C4EC,#6D748F,#F9785A,#1F7D9A,#FBAAA6',
            },
          },
          // 标题
          {
            title: {
              label: '显示标题',
              tip: '是否显示标题',
            },
            name: 'hasTitle',
            setter: {
              componentName: 'BoolSetter',
              isRequired: true,
              initialValue: true,
            },
          },
          // 标题文本
          {
            title: {
              label: '标题文本',
              tip: '需要展示的标题文本,不填时,取所选数据集为标题',
            },
            name: 'titleText',
            setter: {
              componentName: 'StringSetter',
              initialValue: '',
            },
          },
        ],
      },
      //点配置
      {
        title: '点配置',
        name: 'point',
        display: 'accordion',
        setter: {
          componentName: 'ObjectSetter',
          props: {
            config: {
              items: [
                {
                  title: {
                    label: '显示点',
                    tip: '线段上是否展示数据点',
                  },
                  name: 'visible',
                  setter: {
                    componentName: 'BoolSetter',
                    isRequired: true,
                    initialValue: false,
                  },
                },
                {
                  title: {
                    label: '形状',
                    tip: '设置点形状',
                  },
                  name: 'shape',
                  condition: (target) => {
                    return target.parent.getPropValue('visible');
                  },
                  setter: [
                    {
                      componentName: 'RadioGroupSetter',
                      props: {
                        options: [
                          { title: '圆形', value: 'circle' },
                          { title: '空心圆', value: 'hollow-circle' },
                          { title: '正方形', value: 'square' },
                          { title: '三角形', value: 'triangle' },
                        ],
                      },
                    },
                  ],
                  defaultValue: 'circle',
                },
                {
                  title: {
                    label: '点大小',
                    tip: '设置点尺寸,范围0-20',
                  },
                  name: 'size',
                  condition: (target) => {
                    return target.parent.getPropValue('visible');
                  },
                  setter: 'NumberSetter',
                  defaultValue: 4,
                  props: {
                    min: 0,
                    max: 20,
                  },
                },
              ],
              extraSetter: {
                componentName: 'MixedSetter',
                isRequired: false,
                props: {},
              },
            },
          },
          isRequired: true,
        },
      },
      //折线配置
      {
        title: '折线配置',
        name: 'line',
        display: 'accordion',
        setter: {
          componentName: 'ObjectSetter',
          props: {
            config: {
              items: [
                {
                  title: {
                    label: '显示折线',
                    tip: '是否显示折线',
                  },
                  name: 'visible',
                  setter: {
                    componentName: 'BoolSetter',
                    isRequired: true,
                    initialValue: true,
                  },
                },
                {
                  title: {
                    label: '折线宽度',
                    tip: '设置折线宽度,范围0-20',
                  },
                  name: 'size',
                  condition: (target) => {
                    return target.parent.getPropValue('visible');
                  },
                  setter: 'NumberSetter',
                  defaultValue: 2,
                  props: {
                    min: 0,
                    max: 20,
                  },
                },
              ],
              extraSetter: {
                componentName: 'MixedSetter',
                isRequired: false,
                props: {},
              },
            },
          },
          isRequired: true,
        },
      },
      //标题及描述
      {
        title: '标题及描述',
        type: 'group',
        display: 'accordion',
        items: [
          // 标题配置
          {
            title: '标题配置',
            name: 'title',
            display: 'plain',
            setter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      title: {
                        label: '显示标题',
                        tip: '是否显示标题',
                      },
                      name: 'visible',
                      setter: {
                        componentName: 'BoolSetter',
                        isRequired: true,
                        initialValue: false,
                      },
                    },
                    {
                      title: {
                        label: '标题文本',
                        tip: '标题内的文本',
                      },
                      name: 'text',
                      condition: (target) => {
                        return target.parent.getPropValue('visible');
                      },
                      setter: 'StringSetter',
                      defaultValue: '',
                    },
                  ],
                  extraSetter: {
                    componentName: 'MixedSetter',
                    isRequired: false,
                    props: {},
                  },
                },
              },
              isRequired: true,
            },
          },
          // 描述配置
          {
            title: '描述配置',
            name: 'description',
            display: 'plain',
            setter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      title: {
                        label: '显示描述',
                        tip: '是否显示描述',
                      },
                      name: 'visible',
                      setter: {
                        componentName: 'BoolSetter',
                        isRequired: true,
                        initialValue: false,
                      },
                    },
                    {
                      title: {
                        label: '描述文本',
                        tip: '描述文本内容',
                      },
                      name: 'text',
                      condition: (target) => {
                        return target.parent.getPropValue('visible');
                      },
                      setter: 'StringSetter',
                      defaultValue: '',
                    },
                  ],
                  extraSetter: {
                    componentName: 'MixedSetter',
                    isRequired: false,
                    props: {},
                  },
                },
              },
              isRequired: true,
            },
          },
        ],
      },
      // 轴线配置
      {
        title: '轴线配置',
        type: 'group',
        display: 'accordion',
        items: [
          // 角度轴配置
          {
            title: '角度轴配置',
            name: 'angleAxis',
            display: 'accordion',
            setter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      title: {
                        label: '显示',
                        tip: '是否显示角度轴',
                      },
                      name: 'visible',
                      setter: {
                        componentName: 'BoolSetter',
                        isRequired: true,
                        initialValue: true,
                      },
                    },
                    // 标签
                    {
                      title: '标签',
                      name: 'label',
                      display: 'plain',
                      condition: (target) => {
                        return target.parent.getPropValue('visible');
                      },
                      setter: {
                        componentName: 'ObjectSetter',
                        props: {
                          config: {
                            items: [
                              {
                                title: {
                                  label: '标签显示',
                                  tip: '是否显示角度轴标签',
                                },
                                name: 'visible',
                                setter: {
                                  componentName: 'BoolSetter',
                                  isRequired: true,
                                  initialValue: true,
                                },
                              },
                              // 样式
                              {
                                title: '样式',
                                name: 'style',
                                display: 'plain',
                                condition: (target) => {
                                  return target.parent.getPropValue('visible');
                                },
                                setter: {
                                  componentName: 'ObjectSetter',
                                  props: {
                                    config: {
                                      items: [
                                        {
                                          title: {
                                            label: '颜色',
                                            tip: '角度轴标签文本颜色',
                                          },
                                          name: 'fill',
                                          setter: {
                                            componentName: 'ColorSetter',
                                            isRequired: true,
                                            initialValue: null,
                                          },
                                        },
                                        {
                                          title: {
                                            label: '大小',
                                            tip: '角度轴标签文本大小',
                                          },
                                          name: 'fontSize',
                                          setter: {
                                            componentName: 'NumberSetter',
                                            isRequired: true,
                                            initialValue: 14,
                                            props: {
                                              min: 0,
                                            },
                                          },
                                        },
                                      ],
                                    },
                                  },
                                },
                              },
                            ],
                          },
                        },
                      },
                    },
                    // 刻度线
                    {
                      title: '刻度线',
                      name: 'tickLine',
                      display: 'plain',
                      condition: (target) => {
                        return target.parent.getPropValue('visible');
                      },
                      setter: {
                        componentName: 'ObjectSetter',
                        props: {
                          config: {
                            items: [
                              {
                                title: {
                                  label: '刻度线显示',
                                  tip: '是否显示刻度线',
                                },
                                name: 'visible',
                                setter: {
                                  componentName: 'BoolSetter',
                                  isRequired: true,
                                  initialValue: false,
                                },
                              },
                            ],
                          },
                        },
                      },
                    },
                    // 网格线
                    {
                      title: '网格线',
                      name: 'grid',
                      display: 'plain',
                      condition: (target) => {
                        return target.parent.getPropValue('visible');
                      },
                      setter: {
                        componentName: 'ObjectSetter',
                        props: {
                          config: {
                            items: [
                              {
                                title: {
                                  label: '网格线显示',
                                  tip: '开启后显示网格线',
                                },
                                name: 'visible',
                                setter: {
                                  componentName: 'BoolSetter',
                                  isRequired: true,
                                  initialValue: false,
                                },
                              },
                            ],
                          },
                        },
                      },
                    },
                  ],
                  extraSetter: {
                    componentName: 'MixedSetter',
                    isRequired: false,
                    props: {},
                  },
                },
              },
              isRequired: true,
            },
          },
          // 径向轴配置
          {
            title: '径向轴配置',
            name: 'radiusAxis',
            display: 'accordion',
            setter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      title: {
                        label: '显示',
                        tip: '是否显示径向轴',
                      },
                      name: 'visible',
                      setter: {
                        componentName: 'BoolSetter',
                        isRequired: true,
                        initialValue: false,
                      },
                    },
                    // 最小值
                    {
                      title: {
                        label: '最小值',
                        tip: '设置径向轴最小值',
                      },
                      name: 'min',
                      condition: (target) => {
                        return target.parent.getPropValue('visible');
                      },
                      setter: {
                        componentName: 'NumberSetter',
                        initialValue: null,
                      },
                    },
                    // 最大值
                    {
                      title: {
                        label: '最大值',
                        tip: '设置径向轴最大值',
                      },
                      name: 'max',
                      condition: (target) => {
                        return target.parent.getPropValue('visible');
                      },
                      setter: {
                        componentName: 'NumberSetter',
                        initialValue: null,
                      },
                    },
                    // 标签
                    {
                      title: '标签',
                      name: 'label',
                      display: 'plain',
                      condition: (target) => {
                        return target.parent.getPropValue('visible');
                      },
                      setter: {
                        componentName: 'ObjectSetter',
                        props: {
                          config: {
                            items: [
                              {
                                title: {
                                  label: '标签显示',
                                  tip: '是否显示径向轴标签',
                                },
                                name: 'visible',
                                setter: {
                                  componentName: 'BoolSetter',
                                  isRequired: true,
                                  initialValue: false,
                                },
                              },
                            ],
                          },
                        },
                      },
                    },
                    // 刻度线
                    {
                      title: '刻度线',
                      name: 'tickLine',
                      display: 'plain',
                      condition: (target) => {
                        return (
                          target.parent.getPropValue('visible') &&
                          target.parent.getPropValue('label')?.visible
                        );
                      },
                      setter: {
                        componentName: 'ObjectSetter',
                        props: {
                          config: {
                            items: [
                              {
                                title: {
                                  label: '刻度线显示',
                                  tip: '是否显示刻度线',
                                },
                                name: 'visible',
                                setter: {
                                  componentName: 'BoolSetter',
                                  isRequired: true,
                                  initialValue: false,
                                },
                              },
                            ],
                          },
                        },
                      },
                    },
                    // 刻度线数量
                    {
                      title: {
                        label: '刻度线数量',
                        tip: '设置刻度线数量',
                      },
                      name: 'tickCount',
                      condition: (target) => {
                        return (
                          target.parent.getPropValue('visible') &&
                          target.parent.getPropValue('tickLine')?.visible &&
                          target.parent.getPropValue('label')?.visible
                        );
                      },
                      setter: {
                        componentName: 'NumberSetter',
                        initialValue: null,
                        prop: {
                          min: 0,
                        },
                      },
                    },
                    // 刻度间隔
                    {
                      title: {
                        label: '刻度间隔',
                        tip: '设置刻度线间的刻度间隔',
                      },
                      name: 'tickInterval',
                      condition: (target) => {
                        return (
                          target.parent.getPropValue('visible') &&
                          target.parent.getPropValue('tickLine')?.visible &&
                          target.parent.getPropValue('label')?.visible
                        );
                      },
                      setter: {
                        componentName: 'NumberSetter',
                        initialValue: null,
                        prop: {
                          min: 0,
                        },
                      },
                    },
                    // 网格线
                    {
                      title: '网格线',
                      name: 'grid',
                      display: 'plain',
                      condition: (target) => {
                        return target.parent.getPropValue('visible');
                      },
                      setter: {
                        componentName: 'ObjectSetter',
                        props: {
                          config: {
                            items: [
                              {
                                title: {
                                  label: '网格线显示',
                                  tip: '是否显示网格线',
                                },
                                name: 'visible',
                                setter: {
                                  componentName: 'BoolSetter',
                                  isRequired: true,
                                  initialValue: true,
                                },
                              },
                              {
                                title: '线条类型',
                                name: 'line',
                                display: 'plain',
                                setter: {
                                  componentName: 'ObjectSetter',
                                  props: {
                                    config: {
                                      items: [
                                        {
                                          title: {
                                            label: '类型',
                                            tip: '设置网格线刻度类型',
                                          },
                                          name: 'type',
                                          condition: (target) => {
                                            return target.parent.getPropValue('visible');
                                          },
                                          setter: [
                                            {
                                              componentName: 'RadioGroupSetter',
                                              props: {
                                                options: [
                                                  { title: '直线', value: 'line' },
                                                  { title: '曲线', value: 'arc' },
                                                ],
                                              },
                                            },
                                          ],
                                          defaultValue: 'line',
                                        },
                                      ],
                                    },
                                  },
                                },
                              },
                            ],
                          },
                        },
                      },
                    },
                  ],
                  extraSetter: {
                    componentName: 'MixedSetter',
                    isRequired: false,
                    props: {},
                  },
                },
              },
              isRequired: true,
            },
          },
        ],
      },
      // 图例
      {
        title: '图例',
        name: 'legend',
        display: 'accordion',
        setter: {
          componentName: 'ObjectSetter',
          props: {
            config: {
              items: [
                {
                  title: {
                    label: '显示',
                    tip: '是否显示图例',
                  },
                  name: 'visible',
                  setter: {
                    componentName: 'BoolSetter',
                    isRequired: true,
                    initialValue: true,
                  },
                },
                // 自动旋转
                {
                  title: {
                    label: '自动旋转',
                    tip: '是否开启自动旋转',
                  },
                  name: 'autoRotate',
                  condition: (target) => {
                    return target.parent.getPropValue('visible');
                  },
                  setter: {
                    componentName: 'BoolSetter',
                    isRequired: true,
                    initialValue: true,
                  },
                },
                // 显示位置
                {
                  title: {
                    label: '显示位置',
                    tip: '图例显示位置',
                  },
                  name: 'position',
                  condition: (target) => {
                    return target.parent.getPropValue('visible');
                  },
                  setter: [
                    {
                      componentName: 'SelectSetter',
                      props: {
                        options: [
                          { title: '上', value: 'top' },
                          { title: '上左', value: 'top-left' },
                          { title: '上右', value: 'top-right' },
                          { title: '左', value: 'left' },
                          { title: '左上', value: 'left-top' },
                          { title: '左下', value: 'left-bottom' },
                          { title: '右', value: 'right' },
                          { title: '右上', value: 'right-top' },
                          { title: '右下', value: 'right-bottom' },
                          { title: '下', value: 'bottom' },
                          { title: '下左', value: 'bottom-left' },
                          { title: '下右', value: 'bottom-right' },
                        ],
                      },
                    },
                  ],
                  defaultValue: 'bottom',
                },
                // x轴偏移
                {
                  title: {
                    label: 'x轴偏移',
                    tip: '设置x轴图例位置偏移数值',
                  },
                  name: 'offsetX',
                  condition: (target) => {
                    return target.parent.getPropValue('visible');
                  },
                  setter: {
                    componentName: 'NumberSetter',
                    isRequired: true,
                    initialValue: 0,
                  },
                },
                // y轴偏移
                {
                  title: {
                    label: 'y轴偏移',
                    tip: '设置y轴图例位置偏移数值',
                  },
                  name: 'offsetY',
                  condition: (target) => {
                    return target.parent.getPropValue('visible');
                  },
                  setter: {
                    componentName: 'NumberSetter',
                    isRequired: true,
                    initialValue: 0,
                  },
                },
              ],
              extraSetter: {
                componentName: 'MixedSetter',
                isRequired: false,
                props: {},
              },
            },
          },
          isRequired: true,
        },
      },
      // 信息提示框
      {
        title: '信息提示框',
        name: 'tooltip',
        display: 'accordion',
        setter: {
          componentName: 'ObjectSetter',
          props: {
            config: {
              items: [
                {
                  title: {
                    label: '显示',
                    tip: '是否显示信息提示框',
                  },
                  name: 'visible',
                  setter: {
                    componentName: 'BoolSetter',
                    isRequired: false,
                    initialValue: true,
                  },
                },
                // 偏移量
                {
                  title: {
                    label: '偏移量',
                    tip: '设置信息提示框偏移量',
                  },
                  name: 'offset',
                  condition: (target) => {
                    return target.parent.getPropValue('visible');
                  },
                  setter: {
                    componentName: 'NumberSetter',
                    isRequired: false,
                    initialValue: 0,
                  },
                },
                // 多条显示
                {
                  title: {
                    label: '多条显示',
                    tip: '信息提示框是显示多条数据还是单条',
                  },
                  name: 'shared',
                  condition: (target) => {
                    return target.parent.getPropValue('visible');
                  },
                  setter: {
                    componentName: 'BoolSetter',
                    isRequired: false,
                    initialValue: false,
                  },
                },
                // 辅助线
                {
                  title: {
                    label: '辅助线',
                    tip: '预览时是否显示辅助线',
                  },
                  name: 'showCrosshairs',
                  condition: (target) => {
                    return target.parent.getPropValue('visible');
                  },
                  setter: {
                    componentName: 'BoolSetter',
                    isRequired: false,
                    initialValue: false,
                  },
                },
              ],
              extraSetter: {
                componentName: 'MixedSetter',
                isRequired: false,
                props: {},
              },
            },
          },
          isRequired: true,
        },
      },
      // 标签文本
      {
        title: '标签文本',
        name: 'label',
        display: 'accordion',
        setter: {
          componentName: 'ObjectSetter',
          props: {
            config: {
              items: [
                {
                  title: {
                    label: '显示',
                    tip: '是否显示标签文本',
                  },
                  name: 'visible',
                  setter: {
                    componentName: 'BoolSetter',
                    isRequired: true,
                    initialValue: false,
                  },
                },
                // 自动旋转
                {
                  title: {
                    label: '自动旋转',
                    tip: '标签文本是否是自动设置旋转角度',
                  },
                  name: 'autoRotate',
                  condition: (target) => {
                    return target.parent.getPropValue('visible');
                  },
                  setter: {
                    componentName: 'BoolSetter',
                    isRequired: true,
                    initialValue: true,
                  },
                },
                // x轴偏移
                {
                  title: {
                    label: 'x轴偏移',
                    tip: '标签文本x轴偏移数值',
                  },
                  name: 'offsetX',
                  condition: (target) => {
                    return target.parent.getPropValue('visible');
                  },
                  setter: {
                    componentName: 'NumberSetter',
                    isRequired: true,
                    initialValue: 0,
                  },
                },
                // y轴偏移
                {
                  title: {
                    label: 'y轴偏移',
                    tip: '标签文本y轴偏移数值',
                  },
                  name: 'offsetY',
                  condition: (target) => {
                    return target.parent.getPropValue('visible');
                  },
                  setter: {
                    componentName: 'NumberSetter',
                    isRequired: true,
                    initialValue: 0,
                  },
                },
                // 样式
                {
                  title: '样式',
                  name: 'style',
                  display: 'plain',
                  condition: (target) => {
                    return target.parent.getPropValue('visible');
                  },
                  setter: {
                    componentName: 'ObjectSetter',
                    props: {
                      config: {
                        items: [
                          {
                            title: {
                              label: '颜色',
                              tip: '标签文本颜色',
                            },
                            name: 'fill',
                            setter: {
                              componentName: 'ColorSetter',
                              isRequired: true,
                              initialValue: null,
                            },
                          },
                          {
                            title: {
                              label: '大小',
                              tip: '标签文本大小',
                            },
                            name: 'fontSize',
                            setter: {
                              componentName: 'NumberSetter',
                              isRequired: true,
                              initialValue: 14,
                              props: {
                                min: 0,
                              },
                            },
                          },
                        ],
                      },
                    },
                  },
                },
              ],
              extraSetter: {
                componentName: 'MixedSetter',
                isRequired: false,
                props: {},
              },
            },
          },
          isRequired: true,
        },
      },
    ],
    supports: {
      style: true,
    },
    component: {},
    advanced: {
      context: {
        dataSourceProps: [
          { label: '角度轴', props: 'angle', limit: 1 },
          { label: '径向轴', props: 'radius', limit: 1 },
          { label: '分组', props: 'group', limit: 1 },
        ],
        datasetProps: [
          { label: '条件过滤', props: 'filter', type: 'filter_btn' },
          { label: '显示前', props: 'limit', type: 'num_limit' },
        ],
      },
    },
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '雷达图',
    screenshot: '',
    schema: {
      componentName: 'RadarChart',
      props: {
        data: Api.defalutData,
        colors: '#2A8BFF,#F99300,#2DA84F,#FCD000,#7367EE,#72C4EC,#6D748F,#F9785A,#1F7D9A,#FBAAA6',
        tooltip: {
          offset: 0,
          shared: false,
          showCrosshairs: false,
          visible: true,
        },
        legend: {
          autoRotate: true,
          offsetX: 0,
          offsetY: 0,
          position: 'bottom',
          visible: true,
        },
        radiusAxis: {
          grid: {
            line: {
              type: 'line',
            },
          },
          visible: true,
        },
        label: {
          autoRotate: true,
          offsetX: 0,
          offsetY: 0,
          style: { fontSize: 14 },
          visible: false,
        },
        hasTitle:true,
        titleText:'',
      },
    },
  },
];

export default {
  ...RadarChartMeta,
  snippets,
};