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

const DataVDecorationMeta: IPublicTypeComponentMetadata = {
  componentName: 'DataVDecoration',
  title: '装饰',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  group: '云仓大屏',
  category: '装饰',
  npm: {
    package: '@ztocwst/datav-materials',
    version: '0.1.0',
    exportName: 'DataVDecoration',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'color',
            'zh-CN': '自定义颜色， 属性支',
          },
          tip: 'color | 自定义颜色， 属性支持配置两个颜色，一主一副。',
        },
        name: 'color',
        description: '自定义颜色， 属性支持配置两个颜色，一主一副。',
        setter: {
          componentName: 'ArraySetter',
          props: {
            itemSetter: {
              componentName: 'ColorSetter',
              isRequired: false,
              initialValue: '',
            },
          },
          isRequired: true,
          initialValue: [],
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': '装饰类型',
            'zh-CN': '装饰类型',
          },
        },
        name: 'decorationType',
        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',
              },
              {
                label: '8',
                value: '8',
              },
              {
                label: '9',
                value: '9',
              },
              {
                label: '10',
                value: '10',
              },
              {
                label: '11',
                value: '11',
              },
            ],
          },
          initialValue: '1',
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'dur',
            'zh-CN': '单次动画时长',
          },
          tip: 'dur | 单次动画时长，默认值3',
        },
        name: 'dur',
        description: '单次动画时长，默认值3',
        setter: {
          componentName: 'NumberSetter',
          isRequired: false,
          initialValue: 3,
        },
        // condition(target) {
        //   return target.parent.getPropValue('decorationType') === '9';
        // },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'reverse',
            'zh-CN': '翻转',
          },
          tip: 'reverse | 翻转',
        },
        name: 'reverse',
        description: '翻转',
        setter: {
          componentName: 'BoolSetter',
          isRequired: false,
          initialValue: false,
        },
        // condition(target) {
        //   return ['2', '4', '8'].includes(target.parent.getPropValue('decorationType'));
        // },
      },
      {
        title: '内容',
        name: 'children',
        setter: {
          componentName: 'MixedSetter',
          props: {
            setters: [
              {
                componentName: 'I18nSetter',
              },
              {
                componentName: 'SlotSetter',
              },
            ],
          },
        },
        condition(target) {
          return ['7', '9', '11'].includes(target.parent.getPropValue('decorationType'));
        },
      },
    ],
    supports: {
      style: true,
    },
    component: {
      isContainer: true,
    },
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '装饰1',
    screenshot: 'https://files.ztocwst.com/download/271f9295e5864c02aebdcf39f33268ed?isShow=true',
    schema: {
      componentName: 'DataVDecoration',
      props: {
        decorationType: '1',
        style: {
          width: '200px',
          height: '50px',
        },
      },
    },
  },
  {
    title: '装饰2',
    screenshot: 'https://files.ztocwst.com/download/61926ffe2493456e8be3529e35a7cbeb?isShow=true',
    schema: {
      componentName: 'DataVDecoration',
      props: {
        decorationType: '2',
        style: {
          width: '200px',
          height: '50px',
        },
      },
    },
  },
  {
    title: '装饰3',
    screenshot: 'https://files.ztocwst.com/download/f737d37661ae4155b62beff4799a0c9e?isShow=true',
    schema: {
      componentName: 'DataVDecoration',
      props: {
        decorationType: '3',
        style: {
          width: '200px',
          height: '30px',
        },
      },
    },
  },
  {
    title: '装饰4',
    screenshot: 'https://files.ztocwst.com/download/59dbae829f48413389920e3d4ed5711d?isShow=true',
    schema: {
      componentName: 'DataVDecoration',
      props: {
        decorationType: '4',
        style: {
          width: '50px',
          height: '150px',
        },
      },
    },
  },
  {
    title: '装饰5',
    screenshot: 'https://files.ztocwst.com/download/1f0a5502e94d443881c1c44577d630a3?isShow=true',
    schema: {
      componentName: 'DataVDecoration',
      props: {
        decorationType: '5',
        style: {
          width: '300px',
          height: '40px',
        },
      },
    },
  },
  {
    title: '装饰6',
    screenshot: 'https://files.ztocwst.com/download/33e2cd1149f74c24bb3a3beb060c0560?isShow=true',
    schema: {
      componentName: 'DataVDecoration',
      props: {
        decorationType: '6',
        style: {
          width: '300px',
          height: '30px',
        },
      },
    },
  },
  {
    title: '装饰7',
    screenshot: 'https://files.ztocwst.com/download/37f4642f8b014a2488fee4f6400fa52d?isShow=true',
    schema: {
      componentName: 'DataVDecoration',
      props: {
        decorationType: '7',
        style: {
          width: '150px',
          height: '30px',
        },
        children: 'Decoration7',
      },
    },
  },
  {
    title: '装饰8',
    screenshot: 'https://files.ztocwst.com/download/86b3c8f85583469b856063a3b0fe0cab?isShow=true',
    schema: {
      componentName: 'DataVDecoration',
      props: {
        decorationType: '8',
        style: {
          width: '300px',
          height: '50px',
        },
      },
    },
  },
  {
    title: '装饰9',
    screenshot: 'https://files.ztocwst.com/download/678d73ce0e984627a9b997ce850b82a1?isShow=true',
    schema: {
      componentName: 'DataVDecoration',
      props: {
        decorationType: '9',
        style: {
          width: '150px',
          height: '150px',
        },
        children: 'Decoration9',
      },
    },
  },
  {
    title: '装饰10',
    screenshot: 'https://files.ztocwst.com/download/7141c7820da84a1682c1c75bf3f62144?isShow=true',
    schema: {
      componentName: 'DataVDecoration',
      props: {
        decorationType: '10',
        style: {
          width: '90%',
          height: '50px',
        },
      },
    },
  },
  {
    title: '装饰11',
    screenshot: 'https://files.ztocwst.com/download/fd11de65065c49c193007925fc2c047c?isShow=true',
    schema: {
      componentName: 'DataVDecoration',
      props: {
        decorationType: '11',
        style: {
          width: '200px',
          height: '60px',
        },
        children: 'Decoration11',
      },
    },
  },
];

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