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

const DataVIndicatorBaseMeta: IPublicTypeComponentMetadata = {
  componentName: 'DataVIndicatorBase',
  title: '指标底座',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  group: '云仓大屏',
  category: '指标',
  npm: {
    package: '@ztocwst/datav-materials',
    version: '0.1.9',
    exportName: 'DataVIndicatorBase',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'type',
            'zh-CN': '类型',
          },
          tip: 'type | 类型',
        },
        name: 'type',
        description: '类型',
        setter: {
          componentName: 'SelectSetter',
          props: {
            options: [
              {
                label: '1',
                value: '1',
              },
              {
                label: '2',
                value: '2',
              },
              {
                label: '3',
                value: '3',
              },
              {
                label: '4',
                value: '4',
              },
              {
                label: '5',
                value: '5',
              },
              {
                label: '6',
                value: '6',
              },
              {
                label: '7',
                value: '7',
              },
            ],
          },
          isRequired: true,
          initialValue: '1',
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'color',
            'zh-CN': '颜色',
          },
          tip: 'color | 颜色',
        },
        name: 'color',
        description: '颜色',
        setter: {
          componentName: 'SelectSetter',
          props: {
            options: [
              {
                label: '蓝',
                value: 'blue',
              },
              {
                label: '绿',
                value: 'green',
              },
              {
                label: '黄',
                value: 'yellow',
              },
              {
                label: '红',
                value: 'red',
              },
              {
                label: '紫',
                value: 'purple',
              },
            ],
          },
          isRequired: true,
          initialValue: 'blue',
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'width',
            'zh-CN': '宽度',
          },
          tip: 'width | 宽度',
        },
        name: 'width',
        description: '宽度',
        setter: {
          componentName: 'NumberSetter',
          isRequired: false,
          initialValue: 120,
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'height',
            'zh-CN': '高度',
          },
          tip: 'height | 高度',
        },
        name: 'height',
        description: '高度',
        setter: {
          componentName: 'NumberSetter',
          isRequired: false,
          initialValue: 120,
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'content',
            'zh-CN': '内容',
          },
          tip: 'content | 内容',
        },
        name: 'content',
        description: '内容',
        setter: {
          componentName: 'MixedSetter',
          props: {
            setters: [
              {
                componentName: 'I18nSetter',
              },
              {
                componentName: 'SlotSetter',
                props: {
                  mode: 'node',
                },
                isRequired: false,
                initialValue: {
                  type: 'JSSlot',
                  value: [],
                },
              },
            ],
          },
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'footer',
            'zh-CN': '标题',
          },
          tip: 'footer | 标题',
        },
        name: 'footer',
        description: '标题',
        setter: {
          componentName: 'MixedSetter',
          props: {
            setters: [
              {
                componentName: 'I18nSetter',
              },
              {
                componentName: 'SlotSetter',
                props: {
                  mode: 'node',
                },
                isRequired: false,
                initialValue: {
                  type: 'JSSlot',
                  value: [],
                },
              },
            ],
          },
        },
      },
    ],
    supports: {
      style: true,
    },
    component: {
      // isContainer: true,
    },
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '指标底座1',
    screenshot: 'https://files.ztocwst.com/download/213c592e3ec24029b8b039b7cbc5fbd3?isShow=true',
    schema: {
      componentName: 'DataVIndicatorBase',
      props: {
        type: '1',
        color: 'blue',
        width: 120,
        height: 120,
        content: '80%',
        footer: '数据指标',
      },
    },
  },
  {
    title: '指标底座2',
    screenshot: 'https://files.ztocwst.com/download/b48196dfccac4a33b1ba7fae0464a0fb?isShow=true',
    schema: {
      componentName: 'DataVIndicatorBase',
      props: {
        type: '2',
        color: 'blue',
        width: 120,
        height: 120,
        content: '80%',
        footer: '数据指标',
      },
    },
  },
  {
    title: '指标底座3',
    screenshot: 'https://files.ztocwst.com/download/fe3f4fa314bf41a284502b426ff477ff?isShow=true',
    schema: {
      componentName: 'DataVIndicatorBase',
      props: {
        type: '3',
        color: 'blue',
        width: 120,
        height: 120,
        content: '80%',
        footer: '数据指标',
      },
    },
  },
  {
    title: '指标底座4',
    screenshot: 'https://files.ztocwst.com/download/e9e003bb37754a289691ea53f5f83e18?isShow=true',
    schema: {
      componentName: 'DataVIndicatorBase',
      props: {
        type: '4',
        color: 'blue',
        width: 120,
        height: 120,
        content: '80%',
        footer: '数据指标',
      },
    },
  },
  {
    title: '指标底座5',
    screenshot: 'https://files.ztocwst.com/download/94817414e25b4e78a8c032c818e37ff6?isShow=true',
    schema: {
      componentName: 'DataVIndicatorBase',
      props: {
        type: '5',
        color: 'blue',
        width: 120,
        height: 120,
        content: '80%',
        footer: '数据指标',
      },
    },
  },
  {
    title: '指标底座6',
    screenshot: 'https://files.ztocwst.com/download/68eeac77f19c4a6a9d8e51faf678018d?isShow=true',
    schema: {
      componentName: 'DataVIndicatorBase',
      props: {
        type: '6',
        color: 'blue',
        width: 120,
        height: 120,
        content: '80%',
        footer: '数据指标',
      },
    },
  },
  {
    title: '指标底座7',
    screenshot: 'https://files.ztocwst.com/download/619dd90dfe104e4cbfd19817f10f45ed?isShow=true',
    schema: {
      componentName: 'DataVIndicatorBase',
      props: {
        type: '7',
        color: 'blue',
        width: 120,
        height: 120,
        content: {
          type: 'JSSlot',
          value: [
            {
              componentName: 'Typography.Text',
              props: {
                children: '出勤率',
                style: {
                  height: '22px',
                  fontSize: '14px',
                  fontWeight: '400',
                  color: '#595959',
                  lineHeight: '22px',
                  marginTop: '16px',
                },
              },
            },
          ],
        },
        footer: {
          type: 'JSSlot',
          value: [
            {
              componentName: 'Typography.Text',
              props: {
                children: '90%',
                style: {
                  fontSize: '24px',
                  fontWeight: '500',
                  color: '#262626',
                  marginBottom: '28px',
                },
              },
            },
          ],
        },
      },
    },
  },
  // {
  //   title: '指标底座8',
  //   screenshot: '',
  //   schema: {
  //     componentName: 'DataVIndicatorBase',
  //     props: {
  //       type: '7',
  //       color: 'blue',
  //       width: 120,
  //       height: 120,
  //       content: {
  //         type: 'JSSlot',
  //         value: [
  //           {
  //             componentName: 'Icon',
  //             props: {
  //               type: 'icon-shouye',
  //               size: 40,
  //               color: '#6c56e7',
  //               rotate: 0,
  //               spin: false,
  //               style: {
  //                 marginTop: '50px',
  //               },
  //             },
  //           },
  //         ],
  //       },
  //     },
  //   },
  // },
];

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