import { ComponentMetadata, Snippet } from '@alilc/lowcode-types';
import { defaultDataSource } from './default';

const LoginMeta: ComponentMetadata = {
  componentName: 'SKUOptionsSelection',
  title: 'SKU选择器',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/private-materials',
    version: '1.0.1',
    exportName: 'SKUOptionsSelection',
    main: 'src/index.ts',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        name: 'dataSource',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'DataSource',
            'zh-CN': '数据源',
          },
        },
        setter: 'JsonSetter',
      },
      {
        name: 'value',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Value',
            'zh-CN': '当前值',
          },
        },
        setter: 'JsonSetter',
      },
      {
        name: 'config',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Config',
            'zh-CN': '配置',
          },
        },
        setter: 'JsonSetter',
      },
      {
        name: 'customConfig',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Custom Config',
            'zh-CN': '自定义配置',
          },
        },
        setter: 'JsonSetter',
        defaultValue: {
          modalWidth: '480px',
        },
      },
      {
        name: 'customScrollParent',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Custom Scroll Parent',
            'zh-CN': '自定义滚动容器',
          },
        },
        setter: 'StringSetter',
      },
      {
        name: 'skuCardConfig',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Card Config',
            'zh-CN': 'Card配置',
          },
        },
        setter: {
          componentName: 'ObjectSetter',
          props: {
            config: {
              items: [
                /**
                 * 主标题配置
                 */
                {
                  name: 'title',
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'Title Config',
                      'zh-CN': '主标题配置',
                    },
                  },
                  setter: {
                    componentName: 'ObjectSetter',
                    props: {
                      config: {
                        items: [
                          {
                            name: 'visible',
                            title: {
                              label: {
                                type: 'i18n',
                                'en-US': 'Visible',
                                'zh-CN': '是否显示',
                              },
                            },
                            setter: 'BoolSetter',
                            defaultValue: true,
                          },
                          {
                            name: 'fontSize',
                            title: {
                              label: {
                                type: 'i18n',
                                'en-US': 'Font Size',
                                'zh-CN': '字体大小',
                              },
                            },
                            setter: 'NumberSetter',
                          },
                          {
                            name: 'color',
                            title: {
                              label: {
                                type: 'i18n',
                                'en-US': 'Color',
                                'zh-CN': '颜色',
                              },
                            },
                            setter: 'ColorSetter',
                          },
                          {
                            name: 'fontWeight',
                            title: {
                              label: {
                                type: 'i18n',
                                'en-US': 'Font Weight',
                                'zh-CN': '字体粗细',
                              },
                            },
                            setter: {
                              componentName: 'SelectSetter',
                              props: {
                                options: [
                                  { title: '正常', value: 'normal' },
                                  { title: '粗体', value: 'bold' },
                                  { title: '100', value: 100 },
                                  { title: '200', value: 200 },
                                  { title: '300', value: 300 },
                                  { title: '400', value: 400 },
                                  { title: '500', value: 500 },
                                  { title: '600', value: 600 },
                                  { title: '700', value: 700 },
                                  { title: '800', value: 800 },
                                  { title: '900', value: 900 },
                                ],
                              },
                            },
                          },
                          {
                            name: 'lineClamp',
                            title: {
                              label: {
                                type: 'i18n',
                                'en-US': 'Line Clamp',
                                'zh-CN': '展示行数',
                              },
                            },
                            setter: 'NumberSetter',
                            description: '设置文本最大展示行数，超出部分省略',
                          },
                        ],
                      },
                    },
                  },
                },
                /**
                 * 副标题配置
                 */
                {
                  name: 'subTitle',
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'SubTitle Config',
                      'zh-CN': '副标题配置',
                    },
                  },
                  setter: {
                    componentName: 'ObjectSetter',
                    props: {
                      config: {
                        items: [
                          {
                            name: 'visible',
                            title: {
                              label: {
                                type: 'i18n',
                                'en-US': 'Visible',
                                'zh-CN': '是否显示',
                              },
                            },
                            setter: 'BoolSetter',
                            defaultValue: true,
                          },
                          {
                            name: 'fontSize',
                            title: {
                              label: {
                                type: 'i18n',
                                'en-US': 'Font Size',
                                'zh-CN': '字体大小',
                              },
                            },
                            setter: 'NumberSetter',
                          },
                          {
                            name: 'color',
                            title: {
                              label: {
                                type: 'i18n',
                                'en-US': 'Color',
                                'zh-CN': '颜色',
                              },
                            },
                            setter: 'ColorSetter',
                          },
                          {
                            name: 'fontWeight',
                            title: {
                              label: {
                                type: 'i18n',
                                'en-US': 'Font Weight',
                                'zh-CN': '字体粗细',
                              },
                            },
                            setter: {
                              componentName: 'SelectSetter',
                              props: {
                                options: [
                                  { title: '正常', value: 'normal' },
                                  { title: '粗体', value: 'bold' },
                                  { title: '100', value: 100 },
                                  { title: '200', value: 200 },
                                  { title: '300', value: 300 },
                                  { title: '400', value: 400 },
                                  { title: '500', value: 500 },
                                  { title: '600', value: 600 },
                                  { title: '700', value: 700 },
                                  { title: '800', value: 800 },
                                  { title: '900', value: 900 },
                                ],
                              },
                            },
                          },
                          {
                            name: 'lineClamp',
                            title: {
                              label: {
                                type: 'i18n',
                                'en-US': 'Line Clamp',
                                'zh-CN': '展示行数',
                              },
                            },
                            setter: 'NumberSetter',
                            defaultValue: 2,
                            description:
                              '设置文本最大展示行数，超出部分省略，默认2行',
                          },
                        ],
                      },
                    },
                  },
                },
                /**
                 * 价格配置
                 */
                {
                  name: 'price',
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'Price Config',
                      'zh-CN': '价格配置',
                    },
                  },
                  setter: {
                    componentName: 'ObjectSetter',
                    props: {
                      config: {
                        items: [
                          {
                            name: 'visible',
                            title: {
                              label: {
                                type: 'i18n',
                                'en-US': 'Visible',
                                'zh-CN': '是否显示',
                              },
                            },
                            setter: 'BoolSetter',
                            defaultValue: true,
                          },
                          {
                            name: 'fontSize',
                            title: {
                              label: {
                                type: 'i18n',
                                'en-US': 'Font Size',
                                'zh-CN': '字体大小',
                              },
                            },
                            setter: 'NumberSetter',
                          },
                          {
                            name: 'color',
                            title: {
                              label: {
                                type: 'i18n',
                                'en-US': 'Color',
                                'zh-CN': '颜色',
                              },
                            },
                            setter: 'ColorSetter',
                            defaultValue: '#DC6803',
                          },
                          {
                            name: 'fontWeight',
                            title: {
                              label: {
                                type: 'i18n',
                                'en-US': 'Font Weight',
                                'zh-CN': '字体粗细',
                              },
                            },
                            setter: {
                              componentName: 'SelectSetter',
                              props: {
                                options: [
                                  { title: '正常', value: 'normal' },
                                  { title: '粗体', value: 'bold' },
                                  { title: '100', value: 100 },
                                  { title: '200', value: 200 },
                                  { title: '300', value: 300 },
                                  { title: '400', value: 400 },
                                  { title: '500', value: 500 },
                                  { title: '600', value: 600 },
                                  { title: '700', value: 700 },
                                  { title: '800', value: 800 },
                                  { title: '900', value: 900 },
                                ],
                              },
                            },
                          },
                        ],
                      },
                    },
                  },
                },
                /**
                 * 图片配置
                 */
                {
                  name: 'image',
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'Image Config',
                      'zh-CN': '图片配置',
                    },
                  },
                  setter: {
                    componentName: 'ObjectSetter',
                    props: {
                      config: {
                        items: [
                          {
                            name: 'visible',
                            title: {
                              label: {
                                type: 'i18n',
                                'en-US': 'Visible',
                                'zh-CN': '是否显示',
                              },
                            },
                            setter: 'BoolSetter',
                            defaultValue: true,
                          },
                          {
                            name: 'width',
                            title: {
                              label: {
                                type: 'i18n',
                                'en-US': 'Width',
                                'zh-CN': '宽度',
                              },
                            },
                            setter: 'NumberSetter',
                          },
                          {
                            name: 'height',
                            title: {
                              label: {
                                type: 'i18n',
                                'en-US': 'Height',
                                'zh-CN': '高度',
                              },
                            },
                            setter: 'NumberSetter',
                          },
                          {
                            name: 'borderRadius',
                            title: {
                              label: {
                                type: 'i18n',
                                'en-US': 'Border Radius',
                                'zh-CN': '圆角',
                              },
                            },
                            setter: ['NumberSetter', 'StringSetter'],
                            description: '可输入数字(px)或字符串(如: 50%)',
                          },
                          {
                            name: 'border',
                            title: {
                              label: {
                                type: 'i18n',
                                'en-US': 'Border',
                                'zh-CN': '边框',
                              },
                            },
                            setter: 'StringSetter',
                            description: '如: 1px solid #ccc',
                          },
                        ],
                      },
                    },
                  },
                },
                /**
                 * Disabled文本配置
                 */
                {
                  name: 'disabledText',
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'Disabled Text Config',
                      'zh-CN': 'Disabled文本配置',
                    },
                  },
                  setter: {
                    componentName: 'ObjectSetter',
                    props: {
                      config: {
                        items: [
                          {
                            name: 'visible',
                            title: {
                              label: {
                                type: 'i18n',
                                'en-US': 'Visible',
                                'zh-CN': '是否显示',
                              },
                            },
                            setter: 'BoolSetter',
                          },
                          {
                            name: 'text',
                            title: {
                              label: {
                                type: 'i18n',
                                'en-US': 'Text',
                                'zh-CN': '文本',
                              },
                            },
                            setter: {
                              componentName: 'PisellI18nSetter',
                            },
                          },
                          {
                            name: 'fontSize',
                            title: {
                              label: {
                                type: 'i18n',
                                'en-US': 'Font Size',
                                'zh-CN': '字体大小',
                              },
                            },
                            setter: 'NumberSetter',
                          },
                          {
                            name: 'color',
                            title: {
                              label: {
                                type: 'i18n',
                                'en-US': 'Color',
                                'zh-CN': '颜色',
                              },
                            },
                            setter: 'ColorSetter',
                          },
                          {
                            name: 'fontWeight',
                            title: {
                              label: {
                                type: 'i18n',
                                'en-US': 'Font Weight',
                                'zh-CN': '字体粗细',
                              },
                            },
                            setter: {
                              componentName: 'SelectSetter',
                              props: {
                                options: [
                                  { title: '正常', value: 'normal' },
                                  { title: '粗体', value: 'bold' },
                                  { title: '100', value: 100 },
                                  { title: '200', value: 200 },
                                  { title: '300', value: 300 },
                                  { title: '400', value: 400 },
                                  { title: '500', value: 500 },
                                  { title: '600', value: 600 },
                                  { title: '700', value: 700 },
                                  { title: '800', value: 800 },
                                  { title: '900', value: 900 },
                                ],
                              },
                            },
                          },
                        ],
                      },
                    },
                  },
                },
              ],
            },
          },
        },
      },
    ],
    supports: {
      style: true,
      events: [
        {
          name: 'onChange',
          template:
            "onChange(value, ${extParams}){ console.log('onChange', value); }",
        },
      ],
    },
    component: {},
  },
};
const snippets: Snippet[] = [
  {
    title: 'SKU选择器',
    screenshot: '',
    schema: {
      componentName: 'SKUOptionsSelection',
      props: {
        dataSource: defaultDataSource,
        value: {},
        config: {
          overSold: false,
        },
        customScrollParent: '',
        customConfig: {
          modalWidth: '480px',
        },
        skuCardConfig: {
          title: {
            visible: true,
          },
          subTitle: {
            visible: true,
            lineClamp: 2,
          },
          price: {
            visible: true,
            color: '#DC6803',
          },
          image: {
            visible: true,
          },
          disabledText: {
            visible: true,
            text: '',
            fontSize: 16,
            color: '#000000',
            fontWeight: 700,
          },
        },
      },
    },
  },
];

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