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

const YwAreaChartMeta: IPublicTypeComponentMetadata = {
  componentName: 'YwAreaChart',
  title: 'YwAreaChart',
  // group: '可视化组件',
  group: '基础组件',
  category: '可视化组件',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@ywfe/materials-charts',
    version: '0.1.1-beta2',
    exportName: 'YwAreaChart',
    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: 'area-chart',
        },
      },
      {
        title: {
          label: 'x轴字段',
          tip: 'xField ｜ x轴字段',
        },
        name: 'xField',
        isRequired: false,
        setter: {
          componentName: 'StringSetter',
          initialValue: 'timePeriod',
        },
      },
      {
        title: {
          label: 'y轴字段',
          tip: 'yField ｜ y轴字段',
        },
        name: 'yField',
        isRequired: false,
        setter: {
          componentName: 'StringSetter',
          initialValue: 'value',
        },
      },
      {
        title: {
          label: '数据的类型和展示方式',
          tip: 'meta | 全局化配置图表数据元信息，以字段为单位进行配置，来定义数据的类型和展示方式',
        },
        name: 'meta',
        isRequired: false,
        supportVariable: false,
        setter: {
          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: '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: 'xAxis',
                  title: { label: 'x轴配置', tip: 'xAxis | x轴配置' },
                  display: 'inline',
                  important: true,
                  setter: () => {
                    return {
                      componentName: 'VariableSetter',
                    };
                  },
                },
              ],
            },
          },
        },
      },
    ],
    supports: {
      className: true,
      style: true,
    },
    component: {},
  },
};
const snippets: IPublicTypeSnippetMore[] = [
  {
    title: '面积图',
    svgId: 'icon-mianjitu',
    screenshot: 'https://yw-fed-static.oss-cn-hangzhou.aliyuncs.com/lowcode/areaChart',
    schema: {
      componentName: 'YwAreaChart',
      props: {
        dataSource: [
          {
            timePeriod: '2006 Q3',
            value: 1,
          },
          {
            timePeriod: '2006 Q4',
            value: 1.08,
          },
          {
            timePeriod: '2007 Q1',
            value: 1.17,
          },
        ],
      },
    },
  },
];

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