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

const YwColumnChartMeta: IPublicTypeComponentMetadata = {
  componentName: 'YwColumnChart',
  title: 'YwColumnChart',
  // group: '可视化组件',
  group: '基础组件',
  category: '可视化组件',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@ywfe/materials-charts',
    version: '0.1.1-beta2',
    exportName: 'YwColumnChart',
    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: 'column-chart',
        },
      },
      {
        title: {
          label: 'x轴字段',
          tip: 'xField ｜ x轴字段',
        },
        name: 'xField',
        isRequired: false,
        setter: {
          componentName: 'StringSetter',
          initialValue: 'type',
        },
      },
      {
        title: {
          label: 'y轴字段',
          tip: 'yField ｜ y轴字段',
        },
        name: 'yField',
        isRequired: false,
        setter: {
          componentName: 'StringSetter',
          initialValue: 'sales',
        },
      },
      {
        title: {
          label: '数据的类型和展示方式',
          tip: 'meta | 全局化配置图表数据元信息，以字段为单位进行配置，来定义数据的类型和展示方式',
        },
        name: 'meta',
        isRequired: false,
      },
      {
        title: {
          label: '周边间距',
          tip: 'padding ｜ 图表在上右下左的间距',
        },
        name: 'padding',
        isRequired: false,
        setter: {
          componentName: 'StringSetter',
        },
      },
      {
        title: {
          label: '是否分组',
          tip: 'isGroup ｜ 是否分组',
        },
        name: 'isGroup',
        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: 'isPercent',
                  title: { label: '是否百分比', tip: 'isPercent | 是否百分比' },
                  display: 'inline',
                  important: true,
                  setter: () => {
                    return {
                      componentName: 'BoolSetter',
                      initialValue: false,
                    };
                  },
                },
                {
                  name: 'isStack',
                  title: { label: '是否堆叠', tip: 'isStack | 是否堆叠' },
                  display: 'inline',
                  important: true,
                  setter: () => {
                    return {
                      componentName: 'BoolSetter',
                      initialValue: false,
                    };
                  },
                },
                {
                  name: 'columnWidthRatio',
                  title: { label: '柱状图宽度比例', tip: 'columnWidthRatio | 柱状图宽度比例' },
                  display: 'inline',
                  important: true,
                  setter: () => {
                    return {
                      componentName: 'StringSetter',
                    };
                  },
                },
                {
                  name: 'slider',
                  title: { label: '缩略轴', tip: 'slider | 缩略轴' },
                  display: 'inline',
                  important: true,
                },
              ],
            },
          },
        },
      },
    ],
    supports: {
      className: true,
      style: true,
    },
    component: {},
  },
};
const snippets: IPublicTypeSnippetMore[] = [
  {
    title: '柱状图',
    svgId: 'icon-zhuzhuangtu',
    screenshot: 'https://yw-fed-static.oss-cn-hangzhou.aliyuncs.com/lowcode/bar',
    schema: {
      componentName: 'YwColumnChart',
      props: {
        dataSource: [
          {
            type: '家具家电',
            sales: 38,
          },
          {
            type: '粮油副食',
            sales: 52,
          },
          {
            type: '生鲜水果',
            sales: 61,
          },
          {
            type: '美容洗护',
            sales: 145,
          },
          {
            type: '母婴用品',
            sales: 48,
          },
          {
            type: '进口食品',
            sales: 38,
          },
          {
            type: '食品饮料',
            sales: 38,
          },
          {
            type: '家庭清洁',
            sales: 38,
          },
        ],
      },
    },
  },
];

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