import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
import Api from './api';

const IndicatorCardMeta: IPublicTypeComponentMetadata = {
  componentName: 'IndicatorCard',
  title: '指标卡',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  category: '图表',
  group: '精选组件',
  npm: {
    package: 'temp-materials',

    exportName: 'IndicatorCard',
    main: 'src\\index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      // 标题
      {
        title: {
          label:'标题',
          tip:'指标卡标题'
        },
        name: 'title',
        setter: {
          componentName: 'StringSetter',
          initialValue: '指标卡标题',
        },
      },
      // 标题颜色
      {
        title: {
          label:'标题颜色',
          tip:"指标卡标题颜色"
        },
        name: 'titleColor',
        setter: {
          componentName: 'ColorSetter',
          initialValue: '#000000',
        },
      },
      // 指标
      {
        title: {
          label:"指标",
          tip:'指标数值'
        },
        name: 'value',
        setter: {
          componentName: 'NumberSetter',
          initialValue: 1,
        },
      },
      // 指标颜色
      {
        title: {
          label:'指标颜色',
          tip:'指标文本颜色'
        },
        name: 'valueColor',
        setter: {
          componentName: 'ColorSetter',
          initialValue: '#000000',
        },
      },
      // 指标卡风格
      {
        title: {
          label:'指标卡风格',
          tip:"选择指标卡风格"
        },
        name: 'type',
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                label: '带侧边条',
                value: 'sider',
              },
              {
                label: '背景填充',
                value: 'full',
              },
              {
                label: '无',
                value: 'null',
              },
            ],
          },
          isRequired: true,
          initialValue: 'sider',
        },
      },
      // 边条颜色
      {
        title: {
          label:'边条颜色',
          tip:"指标卡风格设置为带侧边条时,指标卡侧边条颜色"
        },
        name: 'siderColor',
        condition: (target) => {
          return target.parent.getPropValue('type') === 'sider';
        },
        setter: {
          componentName: 'ColorSetter',
          initialValue: '#0089FF',
        },
      },
      // 背景色值
      {
        title: {
          label:'背景色值',
          tip:"指标卡风格为背景填充时,指标卡背景颜色"
        },
        name: 'singleColor',
        condition: (target) => {
          return target.parent.getPropValue('type') === 'full';
        },
        setter: {
          componentName: 'ColorSetter',
          initialValue: '#F1F2F3',
        },
      },
      // 宽度
      {
        title: {
          label:"宽度",
          tip:"指标卡占宽度百分比,范围20-100"
        },
        name: 'width',
        setter: {
          componentName: 'NumberSetter',
          props: {
            min: 20,
            max: 100,
          },
          initialValue: 100,
        },
      },
      // 位置
      {
        title: {
          label:'位置',
          tip:"指标卡宽度占比小于100时设置有效"
        },
        name: 'position',
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                label: '左侧',
                value: 'flex-start',
              },
              {
                label: '中间',
                value: 'center',
              },
              {
                label: '右侧',
                value: 'flex-end',
              },
            ],
          },
          isRequired: true,
          initialValue: 'center',
        },
      },
      // 尺寸
      {
        title: {
          label:'尺寸',
          tip:"设置指标卡尺寸"
        },
        name: 'size',
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                label: '大指标卡',
                value: 'big',
              },
              {
                label: '小指标卡',
                value: 'small',
              },
            ],
          },
          isRequired: true,
          initialValue: 'big',
        },
      },
      // 指标字号
      {
        title: {
          label:'指标字号',
          tip:'设置指标卡指标文本大小'
        },
        name: 'fontSize',
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                label: '大',
                value: 'big',
              },
              {
                label: '小',
                value: 'small',
              },
            ],
          },
          isRequired: true,
          initialValue: 'small',
        },
      },
    ],
    supports: {
      style: true,
    },
    component: {},
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '指标卡',
    screenshot: '',
    schema: {
      componentName: 'IndicatorCard',
      props: {
        data: Api.defalutData,
      },
    },
  },
];

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