import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
import { plotConfigure } from '../utils/chart-plot';

const RoseChartMeta: IPublicTypeComponentMetadata = {
  componentName: 'RoseChart',
  title: 'RoseChart',
  docUrl: '',
  screenshot: '',
  group: '图形',
  category: '图表',
  devMode: 'proCode',
  npm: {
    package: 'yl-ssa-lowcode-antd-comps',
    version: '0.1.121',
    exportName: 'RoseChart',
    main: 'src\\index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      // 图例
      {
        name: 'legend',
        type: 'group',
        display: 'accordion',
        title: {
          label: '图例',
        },
        items: [
          {
            name: 'legend.position',
            title: '位置',
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  { title: '左', value: 'left' },
                  { title: '左上', value: 'left-top' },
                  { title: '左下', value: 'left-bottom' },
                  { title: '右', value: 'right' },
                  { title: '右上', value: 'right-top' },
                  { title: '右下', value: 'right-bottom' },
                  { title: '上', value: 'top' },
                  { title: '上左', value: 'top-left' },
                  { title: '上右', value: 'top-right' },
                  { title: '下', value: 'bottom' },
                  { title: '下左', value: 'bottom-left' },
                  { title: '下右', value: 'bottom-right' },
                ],
              },
            },
          },
        ],
      },
      // 数据
      {
        name: 'data',
        type: 'group',
        display: 'accordion',
        title: {
          label: '数据',
        },
        items: [
          {
            name: 'data',
            title: '图表数据',
            setter: 'JsonSetter',
          },
          {
            name: 'angleField',
            title: {
              label: '值字段名',
              tip: '扇形切片大小（弧度）所对应的数据字段名',
            },
            setter: 'StringSetter',
          },
          {
            name: 'colorField',
            title: {
              label: '分类字段名',
              tip: '扇形颜色映射对应的数据字段名',
            },
            setter: 'StringSetter',
          },
          {
            name: 'autoTitle',
            title: '启用文字',
            display: 'block',
            defaultValue: false,
            setter: 'BoolSetter',
          },
          {
            name: 'dataTitle',
            title: {
              label: '分类字段名',
              tip: '扇形颜色映射对应的数据字段名',
            },
            setter: 'StringSetter',
          },
        ],
      },
      // 图形属性
      {
        name: '',
        type: 'group',
        display: 'accordion',
        title: {
          label: '图形属性',
        },
        items: [
          {
            name: 'color',
            title: '颜色',
            setter: {
              componentName: 'ArraySetter',
              props: {
                itemSetter: {
                  componentName: 'ColorSetter',
                  initialValue: '#0079f2',
                },
              },
            },
          },
          {
            name: 'offset',
            title: '文字位置',
            display: 'block',
            defaultValue: -25,
            setter: {
              componentName: 'NumberSetter',
            },
          },
          {
            name: 'titleFontSize',
            title: '文字大小',
            display: 'block',
            defaultValue: 12,
            setter: {
              componentName: 'NumberSetter',
            },
          },
          {
            name: 'innerRadius',
            title: '内圈半径',
            display: 'block',
            defaultValue: 0.4,
            setter: {
              componentName: 'NumberSetter',
              props: {
                precision: 2,
                max: 1,
                min: 0,
              },
            },
          },
          {
            name: 'centreFontSize',
            title: '居中文字大小',
            display: 'block',
            defaultValue: 24,
            setter: {
              componentName: 'NumberSetter',
            },
          },
          {
            name: 'centreTitle',
            title: {
              label: '居中文字',
              tip: '居中文字的展示内容',
            },
            defaultValue: '总数',
            setter: 'StringSetter',
          },
          {
            name: '居中颜色',
            description: '颜色',
            propType: 'string',
            defaultValue: '#000000',
            setter: 'ColorSetter',
          },
        ],
      },
      ...plotConfigure,
      // ...actionConfigure,
    ],
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '玫瑰图',
    screenshot: '',
    schema: {
      componentName: 'RoseChart',
      props: {
        legend: {
          position: 'top-left',
        },
        data: [
          { year: '2001', value: 41.8 },
          { year: '2002', value: 38 },
          { year: '2003', value: 33.7 },
          { year: '2004', value: 30.7 },
          { year: '2005', value: 25.8 },
          { year: '2006', value: 31.7 },
          { year: '2007', value: 33 },
          { year: '2008', value: 46 },
          { year: '2009', value: 38.3 },
          { year: '2010', value: 28 },
          { year: '2011', value: 42.5 },
          { year: '2012', value: 30.3 },
        ],
        angleField: 'value',
        colorField: 'year',
        // label: {
        //   visible: true,
        //   type: 'spider',
        // },
        color: ['#3BCBD1', '#47A4FE', '#EDBA42', '#F4704E', '#ED6899', '#7F62C3', '#6E7BC9'],
        offset: -25,
        innerRadius: 0.4,
      },
    },
  },
];

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