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

const YwLineChartMeta: IPublicTypeComponentMetadata = {
  componentName: 'YwLineChart',
  title: 'YwLineChart',
  // group: '可视化组件',
  group: '基础组件',
  category: '可视化组件',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@ywfe/materials-charts',
    version: '0.1.1-beta2',
    exportName: 'YwLineChart',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        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: 'className ｜ 自定义样式名',
        },
        name: 'className',
        isRequired: false,
        setter: {
          componentName: 'StringSetter',
          initialValue: 'line-chart',
        },
      },
      {
        title: {
          label: 'x轴别名&格式化等配置',
          tip: 'xFieldMeta | x轴别名&格式化等配置',
        },
        name: 'xFieldMeta',
        isRequired: false,
        supportVariable: false,
        setter: {
          componentName: 'MixedSetter',
          props: {
            setters: [
              {
                componentName: 'VariableSetter',
              },
            ],
          },
        },
      },
      {
        title: {
          label: 'y轴别名&格式化等配置',
          tip: 'yFieldMeta | y轴别名&格式化等配置',
        },
        name: 'yFieldMeta',
        isRequired: false,
        supportVariable: false,
        setter: {
          componentName: 'MixedSetter',
          props: {
            setters: [
              {
                componentName: 'VariableSetter',
              },
            ],
          },
        },
      },
      {
        title: {
          label: 'x轴字段',
          tip: 'xField ｜ x轴字段',
        },
        name: 'xField',
        isRequired: false,
        setter: {
          componentName: 'StringSetter',
          initialValue: 'Date',
        },
      },
      {
        title: {
          label: 'y轴字段',
          tip: 'yField ｜ y轴字段',
        },
        name: 'yField',
        isRequired: false,
        setter: {
          componentName: 'StringSetter',
          initialValue: 'scales',
        },
      },
      {
        title: {
          label: 'Y轴字段映射',
          tip: 'yFieldMap ｜ Y轴字段映射',
        },
        name: 'yFieldMap',
        isRequired: false,
        supportVariable: false,
        setter: {
          componentName: 'MixedSetter',
          props: {
            setters: [
              {
                componentName: 'VariableSetter',
              },
            ],
          },
        },
      },
      {
        title: {
          label: '周边间距',
          tip: 'padding ｜ 图表在上右下左的间距',
        },
        name: 'padding',
        isRequired: false,
        setter: {
          componentName: 'StringSetter',
        },
      },
      {
        title: {
          label: '是否是曲线',
          tip: 'smooth ｜ 是否是曲线',
        },
        name: 'smooth',
        isRequired: false,
        setter: {
          componentName: 'BoolSetter',
          initialValue: true,
        },
      },
      {
        title: {
          label: '底部滑块',
          tip: 'showSliderNum | 是否显示底部滑块',
        },
        name: 'showSliderNum',
        isRequired: false,
        setter: {
          componentName: 'NumberSetter',
        },
      },
      {
        title: {
          label: '比例展示模式',
          tip: 'proportionMode | 是否比例展示模式',
        },
        name: 'proportionMode',
        isRequired: false,
        setter: {
          componentName: 'BoolSetter',
          initialValue: false,
        },
      },
      {
        title: {
          label: '分组字段',
          tip: 'seriesField ｜ 分组字段。多条折线时使用',
        },
        name: 'seriesField',
        isRequired: false,
        setter: {
          componentName: 'StringSetter',
        },
      },
      // {
      //   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-zhexiantu',
    screenshot: 'https://yw-fed-static.oss-cn-hangzhou.aliyuncs.com/lowcode/lineChart',
    schema: {
      componentName: 'YwLineChart',
      props: {
        dataSource: [
          {
            Date: '2010-01',
            scales: 1998,
          },
          {
            Date: '2010-02',
            scales: 1850,
          },
          {
            Date: '2010-03',
            scales: 1720,
          }],
      },
    },
  },
];

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