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

const PieChartMeta: IPublicTypeComponentMetadata = {
  componentName: 'PieChart',
  title: '饼图',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  category: '图表',
  group: '精选组件',
  npm: {
    package: 'temp-materials',

    exportName: 'PieChart',
    main: 'src\\index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      // 常用配置
      {
        title: '常用配置',
        type: 'group',
        display: 'accordion',
        items: [
          {
            title: {
              label: '尺寸(%)',
              tip: '设置饼图所占尺寸百分比,范围0-100',
            },
            name: 'radius',
            setter: {
              componentName: 'NumberSetter',
              isRequired: true,
              props: {
                min: 0,
                max: 100,
              },
            },
            defaultValue: 80,
          },
          {
            title: {
              label: '环形图',
              tip: '开启后,饼图切换为环形图',
            },
            name: 'isRing',
            setter: {
              componentName: 'BoolSetter',
              isRequired: true,
            },
            defaultValue: false,
          },
          {
            title: {
              label: '背景圆环',
              tip: '开启后,背景后面会出现背景圆环',
            },
            name: 'backRing',
            setter: {
              componentName: 'BoolSetter',
              isRequired: true,
            },
            defaultValue: true,
          },
          {
            title: {
              label: '圆环尺寸',
              tip: '设置圆环的尺寸',
            },
            condition: (target) => {
              return target.parent.getPropValue('backRing');
            },
            name: 'backRingoffset',
            setter: {
              componentName: 'NumberSetter',
              props: {
                min: 0,
              },
            },
            defaultValue: 5,
          },
          {
            title: {
              label: '内外径比',
              tip: '环形图状态时,可以设置圆环内径比,内径尺寸需小于外径尺寸,范围0-1',
            },
            name: 'innerRadius',
            condition: (target) => {
              return target.parent.getPropValue('isRing');
            },
            setter: {
              componentName: 'NumberSetter',
              initialValue: 0.75,
              props: {
                min: 0,
                max: 1,
                step: 0.05,
              },
            },
          },
          {
            name: 'color',
            title: {
              label: '图表套色',
              tip: '设置图表的系列颜色,按系列顺序一一对应',
            },
            setter: {
              componentName: ColorArraySetter,
              initialValue:
                '#5894FF,#394B76,#F7B900,#E55F24,#80D5F5,#9849B0,#3BC88A,#0E869D,#F4A49E,#80563C',
            },
          },
          // 标题
          {
            title: {
              label: '显示标题',
              tip: '是否显示标题',
            },
            name: 'hasTitle',
            setter: {
              componentName: 'BoolSetter',
              isRequired: true,
              initialValue: true,
            },
          },
          // 标题文本
          {
            title: {
              label: '标题文本',
              tip: '需要展示的标题文本,不填时,取所选数据集为标题',
            },
            name: 'titleText',
            setter: {
              componentName: 'StringSetter',
              initialValue: '',
            },
          },
        ],
      },
      // 标签
      {
        title: '标签',
        name: 'label',
        display: 'accordion',
        setter: {
          componentName: 'ObjectSetter',
          props: {
            config: {
              items: [
                {
                  title: {
                    label: '显示标签',
                    tip: '是否在图表中显示标签',
                  },
                  name: 'visible',
                  setter: {
                    componentName: 'BoolSetter',
                    isRequired: true,
                  },
                },
                {
                  title: {
                    label: '位置偏移',
                    tip: '标签水平方向偏移量',
                  },
                  condition: (target) => {
                    return target.parent.getPropValue('visible');
                  },
                  name: 'labelOffset',
                  setter: {
                    componentName: 'NumberSetter',
                    props: {
                      min: 0,
                    },
                  },
                },
                {
                  title: {
                    label: '标签大小',
                    tip: '设置标签文本字号',
                  },
                  condition: (target) => {
                    return target.parent.getPropValue('visible');
                  },
                  name: 'size',
                  setter: 'NumberSetter',
                  defaultValue: 14,
                },
                {
                  title: {
                    label: '标签颜色',
                    tip: '设置标签文本样式',
                  },
                  condition: (target) => {
                    return target.parent.getPropValue('visible');
                  },
                  name: 'color',
                  setter: 'ColorSetter',
                  defaultValue: '#666666',
                },
              ],
              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,
                  },
                  defaultValue: true,
                },
                // 图例类型
                {
                  title: {
                    label: '图例类型',
                    tip: '图例类型,可使用图例项和指标卡类型',
                  },
                  name: 'type',
                  condition: (target) => {
                    return target.parent.getPropValue('visible');
                  },
                  propType: {
                    type: 'oneOf',
                    value: ['native', 'card'],
                  },
                  setter: [
                    {
                      componentName: 'RadioGroupSetter',
                      props: {
                        options: [
                          { title: '图例项', value: 'native' },
                          { title: '指标卡', value: 'card' },
                        ],
                      },
                    },
                  ],
                  defaultValue: 'native',
                },
                // 显示位置
                {
                  title: {
                    label: '显示位置',
                    tip: '图例显示位置',
                  },
                  name: 'position',
                  condition: (target) => {
                    return (
                      target.parent.getPropValue('visible') &&
                      target.parent.getPropValue('type') === 'native'
                    );
                  },
                  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',
                },
                // 图例宽度
                {
                  title: {
                    label: '图例宽度',
                    tip: '图例为指标卡类型时,可设置图例宽度',
                  },
                  name: 'legendWidth',
                  condition: (target) => {
                    return (
                      target.parent.getPropValue('visible') &&
                      target.parent.getPropValue('type') === 'card'
                    );
                  },
                  setter: 'NumberSetter',
                  defaultValue: 100,
                },
                // 两栏比例
                {
                  title: {
                    label: '两栏比例',
                    tip: '图例为指标卡类型时,可设置指标卡内两栏比例',
                  },
                  name: 'ratio',
                  condition: (target) => {
                    return (
                      target.parent.getPropValue('visible') &&
                      target.parent.getPropValue('type') === 'card'
                    );
                  },
                  setter: 'NumberSetter',
                  defaultValue: 65,
                },
                // 图例布局
                {
                  title: {
                    label: '图例布局',
                    tip: '图例为指标卡类型时,可设置图例布局方式',
                  },
                  name: 'display',
                  condition: (target) => {
                    return (
                      target.parent.getPropValue('visible') &&
                      target.parent.getPropValue('type') === 'card'
                    );
                  },
                  propType: {
                    type: 'oneOf',
                    value: ['horizontal', 'vertical'],
                  },
                  setter: [
                    {
                      componentName: 'RadioGroupSetter',
                      props: {
                        options: [
                          { title: '水平', value: 'horizontal' },
                          { title: '垂直', value: 'vertical' },
                        ],
                      },
                    },
                  ],
                  defaultValue: 'vertical',
                },
              ],
            },
          },
          isRequired: true,
        },
      },
      // 提示信息
      {
        title: '提示信息',
        name: 'tooltip',
        display: 'accordion',
        setter: {
          componentName: 'ObjectSetter',
          props: {
            config: {
              items: [
                {
                  title: {
                    label: '开启',
                    tip: '是否开启提示信息',
                  },
                  name: 'visible',
                  setter: {
                    componentName: 'BoolSetter',
                    isRequired: true,
                  },
                  defaultValue: true,
                },
                {
                  title: {
                    label: '内容',
                    tip: '设置图例展示内容',
                  },
                  name: 'content',
                  setter: [
                    {
                      componentName: 'SelectSetter',
                      props: {
                        options: [
                          { title: '百分比', value: 'p' },
                          { title: '值(百分比)', value: 'vp' },
                          { title: '标题', value: 't' },
                          { title: '值', value: 'v' },
                        ],
                      },
                    },
                  ],
                  defaultValue: 't',
                },
              ],
              extraSetter: {
                componentName: 'MixedSetter',
                isRequired: false,
                props: {},
              },
            },
          },
          isRequired: true,
        },
      },
      // 百分比小数位
      {
        title: {
          label: '百分比小数位数',
          tip: '设置百分比值精确小数点位数',
        },
        name: 'decimal',
        display: 'block',
        setter: {
          componentName: 'NumberSetter',
          isRequired: true,
        },
        defaultValue: 2,
      },
      //标题配置
      // {
      //   title: '标题配置',
      //   name: 'title',
      //   display: 'accordion',
      //   setter: {
      //     componentName: 'ObjectSetter',
      //     props: {
      //       config: {
      //         items: [
      //           {
      //             title: '显示标题',
      //             name: 'visible',
      //             setter: {
      //               componentName: 'BoolSetter',
      //               isRequired: true,
      //             },
      //           },
      //           {
      //             title: '标题内容',
      //             name: 'text',
      //             setter: 'StringSetter',
      //             defaultValue: '默认标题',
      //           },
      //         ],
      //         extraSetter: {
      //           componentName: 'MixedSetter',
      //           isRequired: false,
      //           props: {},
      //         },
      //       },
      //     },
      //     isRequired: true,
      //   },
      // },
      //描述配置
      // {
      //   "title": '描述配置',
      //   "name": "description",
      //   "display":"accordion",
      //   "setter": {
      //     "componentName": "ObjectSetter",
      //     "props": {
      //       "config": {
      //         "items": [
      //           {
      //             "title": '显示标题',
      //             "name": "visible",
      //             "setter": {
      //               "componentName": "BoolSetter",
      //               "isRequired": true,
      //             }
      //           },
      //           {
      //             title:'标题内容',
      //             name:'text',
      //             setter:'StringSetter',
      //             defaultValue:'默认标题'
      //           },
      //         ],
      //         "extraSetter": {
      //           "componentName": "MixedSetter",
      //           "isRequired": false,
      //           "props": {}
      //         }
      //       }
      //     },
      //     "isRequired": true
      //   }
      // },
    ],
    supports: {
      style: true,
    },
    component: {},
    advanced: {
      context: {
        dataSourceProps: [
          { label: '分类字段', props: 'group', limit: 1 },
          { label: '数值字段', props: 'value', limit: 1 },
        ],
        datasetProps: [
          { label: '条件过滤', props: 'filter', type: 'filter_btn' },
          { label: '显示前', props: 'limit', type: 'num_limit' },
        ],
      },
    },
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '饼图',
    screenshot: '',
    schema: {
      componentName: 'PieChart',
      props: {
        data: Api.defalutData,
        isRing: true,
        title: {
          visible: false,
        },
        label: {
          color: '#666666',
          contenttag: 'tp',
          size: 14,
          style: { fontSize: 14, fill: '#666666' },
          type: 'spider',
          visible: true,
          labelOffset: 80,
        },
        color: '#5894FF,#394B76,#F7B900,#E55F24,#80D5F5,#9849B0,#3BC88A,#0E869D,#F4A49E,#80563C',
        radius: 80,
        tooltip: {
          visible: true,
          content: 't',
        },
        innerRadius: 0.75,
        decimal: 2,
        legend: {
          visible: true,
          type: 'native',
          position: 'bottom',
          legendWidth: 100,
          ratio: 65,
          display: 'vertical',
        },
        backRing: true,
        backRingoffset: 5,
        hasTitle: true,
        titleText: '',
      },
    },
  },
];

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