import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
import { default as ColorDialogSetter } from '../setter/ColorDialogSetter';

const GaugeChartMeta: IPublicTypeComponentMetadata = {
  componentName: 'GaugeChart',
  title: '仪表盘',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  category: '图表',
  group: '精选组件',
  npm: {
    package: 'temp-materials',

    exportName: 'GaugeChart',
    main: 'src\\index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: {
          label: '常用配置',
          tip: '仪表盘常用配置选项',
        },
        type: 'group',
        display: 'block',
        items: [
          // 标题
          {
            title: {
              label: '显示标题',
              tip: '是否显示标题',
            },
            name: 'hasTitle',
            setter: {
              componentName: 'BoolSetter',
              isRequired: true,
              initialValue: true,
            },
          },
          // 标题文本
          {
            title: {
              label: '标题文本',
              tip: '需要展示的标题文本,不填时,取所选数据集为标题',
            },
            name: 'titleText',
            setter: {
              componentName: 'StringSetter',
              initialValue: '',
            },
          },
        ],
      },
      // 单值颜色
      {
        title: {
          label: '单值颜色',
          tip: '设置统一颜色',
        },
        type: 'group',
        display: 'block',
        items: [
          {
            name: 'isSingel',
            display: 'plain',
            setter: {
              componentName: 'BoolSetter',
              initialValue: false,
            },
          },
        ],
      },
      // 颜色区间
      {
        title: {
          label: '颜色区间',
          tip: '设置颜色区间后,不同区间有对应颜色,区间采用0-100的百分比划分',
        },
        type: 'group',
        display: 'accordion',
        items: [
          {
            display: 'plain',
            name: 'color',
            condition: (target) => {
              return target.parent.getPropValue('isSingel');
            },
            setter: {
              componentName: 'StringSetter',
              isRequired: true,
              initialValue: '#0B8DFD',
            },
          },
          {
            display: 'plain',
            name: 'colors',
            condition: (target) => {
              return !target.parent.getPropValue('isSingel');
            },
            setter: {
              componentName: ColorDialogSetter,
              isRequired: true,
              initialValue: [],
            },
          },
        ],
      },
      // 刻度
      {
        title: '刻度',
        type: 'group',
        display: 'accordion',
        items: [
          //显示刻度
          {
            title: {
              label: '显示刻度',
              tip: '开启后显示刻度线',
            },
            name: 'showTick',
            setter: {
              componentName: 'BoolSetter',
              initialValue: true,
            },
          },
          // 最小值
          {
            title: {
              label: '最小值',
              tip: '设置仪表盘刻度范围最小值',
            },
            name: 'min',
            condition: (target) => {
              return target.parent.getPropValue('showTick');
            },
            setter: {
              componentName: 'NumberSetter',
              initialValue: null,
              props: {
                min: 0,
              },
            },
          },
          // 最大值
          {
            title: {
              label: '最大值',
              tip: '设置仪表盘刻度范围最大值',
            },
            name: 'max',
            condition: (target) => {
              return target.parent.getPropValue('showTick');
            },
            setter: {
              componentName: 'NumberSetter',
              initialValue: null,
              props: {
                min: 0,
              },
            },
          },
          // 间距
          {
            title: {
              label: '间距',
              tip: '设置仪表盘刻度区间',
            },
            name: 'tickInterval',
            condition: (target) => {
              return target.parent.getPropValue('showTick');
            },
            setter: {
              componentName: 'NumberSetter',
              initialValue: null,
              props: {
                min: 0,
              },
            },
          },
        ],
      },
      // 辅助指标
      {
        title: '辅助指标',
        type: 'group',
        display: 'accordion',
        items: [
          // 打开
          {
            title: {
              label: '打开',
              tip: '打开后,显示当先数值',
            },
            name: 'openAssistvalue',
            setter: {
              componentName: 'BoolSetter',
              initialValue: true,
            },
          },
          {
            title: {
              label: '颜色',
              tip: '设置辅助指标文本颜色',
            },
            name: 'valueColor',
            setter: {
              componentName: 'ColorSetter',
              initialValue: '#000',
            },
          },
          // 显示对比
          // {
          //   title: '显示对比',
          //   name: 'showCompare',
          //   setter: {
          //     componentName: 'BoolSetter',
          //     initialValue: false,
          //   },
          // },
          // 展示位置
          {
            title: {
              label: '展示位置',
              tip: '辅助指标的展示位置',
            },
            name: 'position',
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    { title: '底部', value: 'bottom' },
                    { title: '中间', value: 'center' },
                  ],
                },
              },
            ],
            defaultValue: 'bottom',
          },
        ],
      },
      // 样式配置
      {
        title: '样式配置',
        type: 'group',
        display: 'accordion',
        items: [
          // 圆角形态
          {
            title: {
              label: '圆角形态',
              tip: '区间开启圆角形态',
            },
            name: 'rounded',
            setter: {
              componentName: 'BoolSetter',
              initialValue: true,
            },
          },
          // 显示指针
          {
            title: {
              label: '显示指针',
              tip: '控制指针显隐',
            },
            name: 'pivot',
            setter: {
              componentName: 'BoolSetter',
              initialValue: true,
            },
          },
          {
            title: {
              label: '指针颜色',
              tip: '指针颜色设置',
            },
            name: 'pivotColor',
            condition: (target) => {
              return target.parent.getPropValue('pivot');
            },
            setter: {
              componentName: 'ColorSetter',
              initialValue: '#3152FF',
            },
          },
          // 色条粗细
          {
            title: {
              label: '色条粗细',
              tip: '设置区间色条的粗细',
            },
            name: 'rangeSize',
            condition: (target) => {
              return target.parent.getPropValue('showTitle');
            },
            setter: {
              componentName: 'NumberSetter',
              initialValue: null,
            },
          },
          // 相对半径
          {
            title: {
              label: '相对半径',
              tip: '仪表盘尺寸相较于整体的比例,范围0-1',
            },
            name: 'radius',
            condition: (target) => {
              return target.parent.getPropValue('showTitle');
            },
            setter: {
              componentName: 'NumberSetter',
              initialValue: 0.9,
              props: {
                min: 0,
                max: 1,
                step: 0.05,
              },
            },
          },
          // 相对内半径
          {
            title: {
              label: '刻度半径',
              tip: '刻度线相对半径',
            },
            name: 'innerRadius',
            condition: (target) => {
              return target.parent.getPropValue('showTitle');
            },
            setter: {
              componentName: 'NumberSetter',
              initialValue: null,
              props: {
                min: 0,
              },
            },
          },
        ],
      },
    ],
    supports: {
      style: true,
    },
    component: {},
    advanced: {
      context: {
        dataSourceProps: [{ label: '主指标(必填)', props: 'main', limit: 1 }],
        datasetProps: [{ label: '条件过滤', props: 'filter', type: 'filter_btn' }],
      },
    },
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '仪表盘',
    screenshot: '',
    schema: {
      componentName: 'GaugeChart',
      props: {
        data: 30,
        colors: [
          { start: 0, end: 40, color: '#bf5a5a' },
          { start: 40, end: 80, color: '#6a66a9' },
          { start: 80, end: 100, color: '#2b885f' },
        ],
        isSingel: true,
        color: '#3152FF',
        openAssistvalue: true,
        pivot: true,
        position: 'bottom',
        radius: 0.75,
        rounded: false,
        showTick: true,
        valueColor: '#3152FF',
        pivotColor: '#3152FF',
        rangeSize: 30,
        innerRadius: 10,
        hasTitle:true,
        titleText:'',
      },
    },
  },
];

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