import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
import { IPublicTypeSnippetMore } from '../../../materials-design/lowcode/_base';

const YwPieChartMeta: IPublicTypeComponentMetadata = {
  componentName: 'YwPieChart',
  title: 'YwPieChart',
  // group: '可视化组件',
  group: '基础组件',
  category: '可视化组件',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@ywfe/materials-charts',
    version: '0.1.1-beta2',
    exportName: 'YwPieChart',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      // {
      //   title: {
      //     label: '动态数据源',
      //     tip: 'data ｜ 动态数据源',
      //   },
      //   name: 'data',
      //   supportVariable: false,
      //   setter: {
      //       componentName: 'MixedSetter',
      //       props: {
      //         setters: [
      //           {
      //             componentName: 'VariableSetter',
      //           },
      //         ],
      //       },
      //     },
      // },
      {
        title: {
          label: '数据请求',
          tip: 'getDataSource ｜ 数据请求',
        },
        name: 'getDataSource',
        supportVariable: false,
        setter: {
          componentName: 'SchemaFunctionSetter',
          props: {
            title: 'getDataSource',
            async: true,
            properties: {
              input: {
                type: 'object',
                properties: {
                  values: {
                    type: 'object',
                  },
                },
                required: ['values'],
              },
              body: {
                type: 'array',
                items: [
                  {
                    type: 'Function',
                    properties: {
                      template: 'RequestFunction',
                      variable: 'result',
                      extraProps: {
                        apiId: 'API_88_59658_323217f643c3e3f1fe7532e72ac01bb0748c97be',
                        params: '{{values}}',
                        apiType: 5,
                      },
                    },
                  },
                ],
              },
              output: 'result',
            },
            required: ['input', 'body', 'output'],
          },
        },
      },
      {
        name: 'filterProps',
        title: '查询参数',
        supportVariable: false,
        setter: {
          componentName: 'MixedSetter',
          props: {
            setters: ['VariableSetter'],
          },
        },
        defaultValue: {
          type: 'JSExpression',
          value: 'this.state.filterProps',
        },
      },
      {
        title: {
          label: '数据字段',
          tip: 'fieldName ｜ 数据字段名',
        },
        name: 'fieldName',
        isRequired: false,
        setter: {
          componentName: 'StringSetter',
          initialValue: 'list',
        },
      },
      {
        title: {
          label: '数据的类型和展示方式',
          tip: 'meta | 全局化配置图表数据元信息，以字段为单位进行配置，来定义数据的类型和展示方式',
        },
        name: 'meta',
        isRequired: false,
        setter: {
          componentName: 'VariableSetter',
        },
      },
      {
        title: {
          label: '环形图',
          tip: 'donut ｜ 是否展示环形图',
        },
        name: 'donut',
        isRequired: false,
        setter: {
          componentName: 'BoolSetter',
          initialValue: false,
        },
      },
      {
        title: {
          label: '周边间距',
          tip: 'padding ｜ 图表在上右下左的间距',
        },
        name: 'padding',
        isRequired: false,
      },
      {
        title: {
          label: '显示图例',
          tip: 'legend ｜ 是否显示图例',
        },
        name: 'legend',
        isRequired: false,
        setter: {
          componentName: 'CustomJsonSetter',
        },
      },
      {
        title: {
          label: '扇形切片大小对应的数据字段名',
          tip: 'angleField ｜ 扇形切片大小（弧度）所对应的数据字段名',
        },
        name: 'angleField',
        isRequired: false,
        setter: {
          componentName: 'StringSetter',
          initialValue: 'dealData',
        },
      },
      {
        title: {
          label: '扇形颜色对应数据字段名',
          tip: 'colorField ｜ 扇形颜色映射对应的数据字段名',
        },
        name: 'colorField',
        isRequired: false,
        setter: {
          componentName: 'StringSetter',
          initialValue: 'name',
        },
      },
      // {
      //   title: {
      //     label: '饼图的半径',
      //     tip: 'radius ｜ 饼图的半径(0-1)',
      //   },
      //   name: 'radius',
      //   isRequired: false,
      //   setter: {
      //     componentName: 'StringSetter',
      //     initialValue: '0.52',
      //   },
      // },
      {
        title: {
          label: '饼图尺寸',
          tip: 'size ｜ 饼图尺寸',
        },
        name: 'size',
        isRequired: false,
        setter: {
          componentName: 'SelectSetter',
          props: {
            options: [
              {
                label: 'small',
                value: 'small'
              },
              {
                label: 'middle',
                value: 'middle'
              },
              {
                label: 'large',
                value: 'large'
              }
            ]
          },
          defaultValue: 'middle'
        },
      },
      {
        title: {
          label: '图例',
          tip: 'legend ｜ 图例',
        },
        name: 'legend',
        isRequired: false,
        setter: {
          componentName: 'CustomJsonSetter',
        },
      },
      {
        title: {
          label: '标题(title)格式化函数',
          tip: 'formatTitle ｜ 标题格式化函数',
        },
        name: 'formatTitle',
        isRequired: false,
        setter: {
          componentName: 'FunctionSetter',
        },
      },
      {
        title: {
          label: '值(value)格式化函数',
          tip: 'formatValue ｜ 值格式化函数',
        },
        name: 'formatValue',
        isRequired: false,
        setter: {
          componentName: 'FunctionSetter',
        },
      },
      {
        title: {
          label: '自定义样式名',
          tip: 'className ｜ 自定义样式名',
        },
        name: 'className',
        isRequired: false,
        setter: {
          componentName: 'StringSetter',
          initialValue: 'pie-chart',
        },
      },
      // {
      //   title: {
      //     label: '显示统计信息',
      //     tip: 'hasStatistic ｜ 是否显示统计信息',
      //   },
      //   name: 'hasStatistic',
      //   isRequired: false,
      //   setter: {
      //     componentName: 'BoolSetter',
      //     initialValue: false,
      //   },
      // },
      {
        title: {
          label: '统计信息设置',
          tip: 'statistic ｜ 统计信息设置',
        },
        name: 'statistic',
        isRequired: false,
        setter: {
          componentName: 'CustomJsonSetter',
        },
      },
      // {
      //   title: {
      //     label: '统计信息标题函数',
      //     tip: 'statisticTitle ｜ 统计信息标题函数',
      //   },
      //   name: 'statisticTitle',
      //   isRequired: false,
      //   setter: {
      //     componentName: 'FunctionSetter',
      //   },
      // },
      // {
      //   title: {
      //     label: '统计信息内容函数',
      //     tip: 'statisticContent ｜ 统计信息内容函数',
      //   },
      //   name: 'statisticContent',
      //   isRequired: false,
      //   setter: {
      //     componentName: 'FunctionSetter',
      //   },
      // },
      {
        title: {
          label: '原始配置',
          tip: 'originalProps ｜ 原始配置',
        },
        name: 'originalProps',
        isRequired: false,
        setter: {
          componentName: 'ObjectSetter',
          props: {
            descriptor: 'title',
            config: {
              items: [
                {
                  name: 'innerRadius',
                  title: { label: '饼图的内半径', tip: 'innerRadius | 饼图的内半径' },
                  display: 'inline',
                  important: true,
                  supportVariable: false,
                  setter: () => {
                    return {
                      componentName: 'StringSetter',
                    };
                  },
                },
                {
                  name: 'startAngle',
                  title: { label: '配置坐标系的起始角度', tip: 'startAngle | 配置坐标系的起始角度' },
                  display: 'inline',
                  important: true,
                  supportVariable: false,
                  setter: () => {
                    return {
                      componentName: 'StringSetter',
                    };
                  },
                },
                {
                  name: 'endAngle',
                  title: { label: '配置坐标系的结束角度', tip: 'endAngle | 配置坐标系的结束角度' },
                  display: 'inline',
                  important: true,
                  supportVariable: false,
                  setter: () => {
                    return {
                      componentName: 'StringSetter',
                    };
                  },
                },
              ],
            },
          },
        },
      },
    ],
    supports: {
      className: true,
      style: true,
    },
    component: {},
  },
};
const snippets: IPublicTypeSnippetMore[] = [
  {
    title: '饼图',
    svgId: 'icon-bingtu',
    screenshot: 'https://yw-fed-static.oss-cn-hangzhou.aliyuncs.com/lowcode/pie',
    schema: {
      componentName: 'YwPieChart',
      props: {
        dataSource: {
          dealOrderNumList: [
            {
              type: '分类一',
              value: 27,
            },
            {
              type: '分类二',
              value: 25,
            },
            {
              type: '分类三',
              value: 18,
            },
            {
              type: '分类四',
              value: 15,
            },
            {
              type: '分类五',
              value: 10,
            },
            {
              type: '其他',
              value: 5,
            },
          ],
        }
      },
    },
  },
];

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