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

const YwDualAxesChartMeta: IPublicTypeComponentMetadata = {
  componentName: 'YwDualAxesChart',
  title: 'YwDualAxesChart',
  // group: '可视化组件',
  group: '基础组件',
  category: '可视化组件',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@ywfe/materials-charts',
    version: '0.1.1-beta2',
    exportName: 'YwDualAxesChart',
    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: 'autoFit ｜ 是否自适应',
        },
        name: 'autoFit',
        isRequired: false,
        setter: {
          componentName: 'BoolSetter',
          initialValue: true,
        },
      },
      {
        title: {
          label: '左边数据字段名',
          tip: 'leftName ｜ 左边数据字段名',
        },
        name: 'leftName',
        isRequired: false,
        setter: {
          componentName: 'MixedSetter',
          props: {
            setters: [
              {
                componentName: 'StringSetter',
                initialValue: ['payAmtList', 'dealAmtList'],
                title: '自定义字段',
              },
              {
                componentName: 'VariableSetter',
                title: '绑定变量',
              },
            ],
          },
        },
      },
      {
        title: {
          label: '左边数据字段别名',
          tip: 'leftAlias ｜ 左边数据字段别名',
        },
        name: 'leftAlias',
        isRequired: false,
        setter: {
          componentName: 'VariableSetter',
        },
      },
      {
        title: {
          label: '右边数据字段名',
          tip: 'rightName ｜ 右边数据字段名',
        },
        name: 'rightName',
        isRequired: false,
        setter: {
          componentName: 'MixedSetter',
          props: {
            setters: [
              {
                componentName: 'StringSetter',
                initialValue: ['rfdRateList'],
                title: '自定义字段',
              },
              {
                componentName: 'VariableSetter',
                title: '绑定变量',
              },
            ],
          },
        },
      },
      {
        title: {
          label: '右边数据字段别名',
          tip: 'rightAlias ｜ 右边数据字段别名',
        },
        name: 'rightAlias',
        isRequired: false,
        setter: {
          componentName: 'VariableSetter',
        },
      },
      {
        title: {
          label: '自定义样式名',
          tip: 'className ｜ 自定义样式名',
        },
        name: 'className',
        isRequired: false,
        setter: {
          componentName: 'StringSetter',
          initialValue: 'dual-axes-chart',
        },
      },
      {
        title: {
          label: 'x轴设置',
          tip: 'xAxis ｜ x轴设置',
        },
        name: 'xAxis',
        isRequired: false,
        setter: {
          componentName: 'CustomJsonSetter',
        },
      },
      {
        title: {
          label: 'y轴设置',
          tip: 'yAxis ｜ y轴设置',
        },
        name: 'yAxis',
        isRequired: false,
        setter: {
          componentName: 'CustomJsonSetter',
        },
      },
      {
        title: {
          label: 'x轴字段',
          tip: 'xField ｜ x轴字段',
        },
        name: 'xField',
        isRequired: false,
        setter: {
          componentName: 'StringSetter',
          initialValue: 'dayId',
        },
      },
      {
        title: {
          label: '左y轴字段',
          tip: 'yLeftField ｜ y左轴字段',
        },
        name: 'yLeftField',
        isRequired: false,
        setter: {
          componentName: 'StringSetter',
          initialValue: 'data',
        },
      },
      {
        title: {
          label: '右y轴字段',
          tip: 'yRightField ｜ y右轴字段',
        },
        name: 'yRightField',
        isRequired: false,
        setter: {
          componentName: 'StringSetter',
          initialValue: 'data',
        },
      },
      {
        title: {
          label: '双轴对应的图形配置',
          tip: 'geometryOptions ｜ 双轴各自对应的图形配置',
        },
        name: 'geometryOptions',
        isRequired: false,
        setter: {
          componentName: 'VariableSetter',
        },
      },
      {
        title: {
          label: '左边数据格式化类型',
          tip: 'leftType ｜ 左边数据格式化类型',
        },
        name: 'leftType',
        isRequired: false,
        setter: {
          componentName: 'StringSetter',
          initialValue: 'yuanOnlyW',
        },
      },
      {
        title: {
          label: '右边数据格式化类型',
          tip: 'rightType ｜ 右边数据格式化类型',
        },
        name: 'rightType',
        isRequired: false,
        setter: {
          componentName: 'StringSetter',
          initialValue: 'decimalToPercentSave2Decimal',
        },
      },
      {
        title: {
          label: '周边间距',
          tip: 'padding ｜ 图表在上右下左的间距',
        },
        name: 'padding',
        isRequired: false,
      },
      {
        title: {
          label: '图例配置',
          tip: 'legend ｜ 图例配置',
        },
        name: 'legend',
        isRequired: false,
        setter: {
          componentName: 'CustomJsonSetter',
        },
      },
      {
        title: {
          label: '更多配置',
          tip: 'originalProps ｜ 原始配置',
        },
        name: 'originalProps',
        isRequired: false,
        setter: {
          componentName: 'CustomJsonSetter',
        },
      },
    ],
    supports: {
      className: true,
      style: true,
    },
    component: {},
  },
};
const snippets: IPublicTypeSnippetMore[] = [
  {
    title: '双轴-折线图',
    svgId: 'icon-shuangzhouzhexiantu',
    screenshot: 'https://yw-fed-static.oss-cn-hangzhou.aliyuncs.com/lowcode/dualAxes',
    schema: {
      componentName: 'YwDualAxesChart',
      props: {
        mockData: {
          // mock数据
          payAmtList: [
            {
              dayId: '2020-01-01',
              data: 10
            },
            {
              dayId: '2020-03-02',
              data: 30
            },
            {
              dayId: '2020-03-02',
              data: 50
            }
          ],
          payOrderNumList: [
            {
              dayId: '2020-01-01',
              data: 100
            },
            {
              dayId: '2020-03-02',
              data: 30
            },
            {
              dayId: '2020-03-02',
              data: 50
            }
          ]
        },
      },
    },
  },
];

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