import snippets from './snippets';

export default {
  snippets,
  componentName: 'PisellMetricCard',
  title: '指标卡片',
  category: '数据展示',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.1',
    exportName: 'PisellMetricCard',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Basic',
            'zh-CN': '基础配置',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'title',
            title: {
              label: '标题',
              tip: 'title | 卡片标题文本',
            },
            propType: { type: 'oneOfType', value: ['string', 'node'] },
            setter: ['PisellI18nSetter', 'StringSetter', 'SlotSetter'],
            isRequired: true,
          },
          {
            name: 'value',
            title: {
              label: '主数值',
              tip: 'value | 显示的核心指标数值',
            },
            propType: { type: 'oneOfType', value: ['number', 'string', 'null'] },
            setter: ['NumberSetter', 'StringSetter', 'VariableSetter'],
            isRequired: true,
          },
          {
            name: 'subtitle',
            title: {
              label: '副标题',
              tip: 'subtitle | 卡片副标题文本',
            },
            propType: { type: 'oneOfType', value: ['string', 'node'] },
            setter: ['PisellI18nSetter', 'StringSetter', 'SlotSetter'],
          },
          {
            name: 'tooltip',
            title: {
              label: '提示信息',
              tip: 'tooltip | 鼠标悬停在标题上时展示的提示内容',
            },
            propType: { type: 'oneOfType', value: ['string', 'node'] },
            setter: ['PisellI18nSetter', 'StringSetter', 'SlotSetter'],
          },
          {
            name: 'tag',
            title: {
              label: '标签内容',
              tip: 'tag | 标签插槽内容',
            },
            propType: 'node',
            setter: 'SlotSetter',
          },
          {
            name: 'loading',
            title: {
              label: '加载状态',
              tip: 'loading | 是否显示加载状态',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
          {
            name: 'hoverable',
            title: {
              label: '悬停效果',
              tip: 'hoverable | 鼠标悬停是否有交互效果',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: true,
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Format',
            'zh-CN': '格式化配置',
          },
          tip: 'format | 数值格式化配置对象',
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'format',
            title: {
              label: '格式化配置',
              tip: 'format | 数值格式化配置对象',
            },
            propType: 'object',
            setter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'precision',
                      title: {
                        label: '小数精度',
                        tip: 'precision | 小数位数',
                      },
                      setter: 'NumberSetter',
                      defaultValue: 0,
                    },
                    {
                      name: 'useGrouping',
                      title: {
                        label: '千分位分隔',
                        tip: 'useGrouping | 是否使用千分位分隔符（1,234,567）',
                      },
                      setter: 'BoolSetter',
                      defaultValue: false,
                    },
                    {
                      name: 'showCurrencySymbol',
                      title: {
                        label: '显示货币符号',
                        tip: 'showCurrencySymbol | 是否显示货币符号',
                      },
                      setter: 'BoolSetter',
                      defaultValue: false,
                    },
                    {
                      name: 'currencySymbol',
                      title: {
                        label: '货币符号',
                        tip: 'currencySymbol | 货币符号，如 $、¥、€',
                      },
                      setter: 'StringSetter',
                      defaultValue: '',
                    },
                    {
                      name: 'hideDecimalForWholeNumbers',
                      title: {
                        label: '整数隐藏小数',
                        tip: 'hideDecimalForWholeNumbers | 整数时是否隐藏小数部分（100.00 显示为 100）',
                      },
                      setter: 'BoolSetter',
                      defaultValue: true,
                    },
                  ],
                },
              },
            },
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Comparison',
            'zh-CN': '环比配置',
          },
          tip: 'comparison | 环比配置对象',
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'comparison',
            title: {
              label: '环比配置',
              tip: 'comparison | 环比配置对象',
            },
            propType: 'object',
            setter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'value',
                      title: {
                        label: '环比数值',
                        tip: 'value | 环比数值（支持正负值）',
                      },
                      setter: ['NumberSetter', 'StringSetter'],
                      isRequired: true,
                    },
                    {
                      name: 'text',
                      title: {
                        label: '环比前缀',
                        tip: 'text | 环比信息的前缀文本',
                      },
                      setter: ['PisellI18nSetter', 'StringSetter'],
                      defaultValue: 'v.s. pre',
                    },
                    {
                      name: 'showTrendIcon',
                      title: {
                        label: '显示趋势箭头',
                        tip: 'showTrendIcon | 是否显示趋势箭头图标',
                      },
                      setter: 'BoolSetter',
                      defaultValue: true,
                    },
                    {
                      name: 'positiveColor',
                      title: {
                        label: '正向趋势颜色',
                        tip: 'positiveColor | 正向趋势的颜色（绿色）',
                      },
                      setter: 'ColorSetter',
                      defaultValue: '#52c41a',
                    },
                    {
                      name: 'negativeColor',
                      title: {
                        label: '负向趋势颜色',
                        tip: 'negativeColor | 负向趋势的颜色（红色）',
                      },
                      setter: 'ColorSetter',
                      defaultValue: '#ff4d4f',
                    },
                    {
                      name: 'size',
                      title: {
                        label: '环比字号',
                        tip: 'size | 环比信息字号大小',
                      },
                      setter: ['NumberSetter', 'StringSetter'],
                      defaultValue: 14,
                    },
                  ],
                },
              },
            },
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Style',
            'zh-CN': '样式配置',
          },
          tip: 'styleConfig | 样式配置对象',
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'styleConfig',
            title: {
              label: '样式配置',
              tip: 'styleConfig | 样式配置对象',
            },
            propType: 'object',
            setter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'card',
                      title: {
                        label: '卡片样式',
                        tip: 'card | 卡片容器样式配置',
                      },
                      setter: {
                        componentName: 'ObjectSetter',
                        props: {
                          config: {
                            items: [
                              {
                                name: 'bordered',
                                title: { label: '显示边框' },
                                setter: 'BoolSetter',
                                defaultValue: true,
                              },
                              {
                                name: 'borderRadius',
                                title: { label: '圆角大小' },
                                setter: 'NumberSetter',
                                defaultValue: 12,
                              },
                              {
                                name: 'padding',
                                title: { label: '内边距' },
                                setter: 'NumberSetter',
                                defaultValue: 16,
                              },
                              {
                                name: 'background',
                                title: { label: '背景色' },
                                setter: 'ColorSetter',
                                defaultValue: '#ffffff',
                              },
                              {
                                name: 'width',
                                title: { label: '卡片宽度' },
                                setter: ['StringSetter', 'NumberSetter'],
                                defaultValue: 'auto',
                              },
                            ],
                          },
                        },
                      },
                    },
                    {
                      name: 'title',
                      title: {
                        label: '标题样式',
                        tip: 'title | 标题样式配置',
                      },
                      setter: {
                        componentName: 'ObjectSetter',
                        props: {
                          config: {
                            items: [
                              {
                                name: 'size',
                                title: { label: '字号' },
                                setter: ['NumberSetter', 'StringSetter'],
                                defaultValue: 14,
                              },
                              {
                                name: 'weight',
                                title: { label: '字重' },
                                setter: ['NumberSetter', 'StringSetter'],
                                defaultValue: 400,
                              },
                              {
                                name: 'color',
                                title: { label: '颜色' },
                                setter: 'ColorSetter',
                                defaultValue: 'rgba(0, 0, 0, 0.45)',
                              },
                            ],
                          },
                        },
                      },
                    },
                    {
                      name: 'value',
                      title: {
                        label: '数值样式',
                        tip: 'value | 数值样式配置',
                      },
                      setter: {
                        componentName: 'ObjectSetter',
                        props: {
                          config: {
                            items: [
                              {
                                name: 'size',
                                title: { label: '字号' },
                                setter: ['NumberSetter', 'StringSetter'],
                                defaultValue: 30,
                              },
                              {
                                name: 'weight',
                                title: { label: '字重' },
                                setter: ['NumberSetter', 'StringSetter'],
                                defaultValue: 600,
                              },
                              {
                                name: 'color',
                                title: { label: '颜色' },
                                setter: 'ColorSetter',
                                defaultValue: 'rgba(0, 0, 0, 0.85)',
                              },
                            ],
                          },
                        },
                      },
                    },
                  ],
                },
              },
            },
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Feature',
            'zh-CN': '功能开关',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'showSubtitle',
            title: {
              label: '显示副标题',
              tip: 'showSubtitle | 是否显示副标题',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
          {
            name: 'showTag',
            title: {
              label: '显示标签',
              tip: 'showTag | 是否显示标签',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
          {
            name: 'showTooltip',
            title: {
              label: '显示提示',
              tip: 'showTooltip | 是否显示提示信息图标',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Common',
            'zh-CN': '通用配置',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'className',
            title: {
              label: '样式类名',
              tip: 'className | 自定义样式类名',
            },
            propType: 'string',
            setter: 'StringSetter',
          },
          {
            name: 'style',
            title: {
              label: '自定义样式',
              tip: 'style | 自定义样式对象',
            },
            propType: 'object',
            setter: 'StyleSetter',
          },
        ],
      },
    ],
    supports: {
      style: true,
      events: [
        {
          name: 'onClick',
          template: "onClick(${extParams}){\n// 点击卡片时的回调\nconsole.log('onClick');}",
        },
      ],
    },
    component: {},
  },
};