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

const DataVBorderBoxMeta: IPublicTypeComponentMetadata = {
  componentName: 'DataVBorderBox',
  title: '边框',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  group: '云仓大屏',
  category: '边框',
  npm: {
    package: '@ztocwst/datav-materials',
    version: '0.1.0',
    exportName: 'DataVBorderBox',
    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: '',
            },
          },
          initialValue: [],
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'backgroundColor',
            'zh-CN': '背景色',
          },
          tip: 'backgroundColor | 背景色',
        },
        name: 'backgroundColor',
        description: '背景色',
        setter: {
          componentName: 'ColorSetter',
          isRequired: false,
          initialValue: '',
        },
      },
      {
        title: {
          label: '边框类型',
          tip: '总共11种，可参照官网：http://datav-react.jiaminghi.com/guide/borderBox.html',
        },
        name: 'borderType',
        description: '边框类型',
        setter: {
          componentName: 'SelectSetter',
          props: {
            options: [
              {
                title: '1',
                value: '1',
              },
              {
                title: '2',
                value: '2',
              },
              {
                title: '3',
                value: '3',
              },
              {
                title: '4',
                value: '4',
              },
              {
                title: '5',
                value: '5',
              },
              {
                title: '6',
                value: '6',
              },
              {
                title: '7',
                value: '7',
              },
              {
                title: '8',
                value: '8',
              },
              {
                title: '9',
                value: '9',
              },
              {
                title: '10',
                value: '10',
              },
              {
                title: '11',
                value: '11',
              },
              {
                title: '12',
                value: '12',
              },
              {
                title: '13',
                value: '13',
              },
            ],
          },
          initialValue: '1',
        },
      },
      {
        title: '单次动画时长',
        name: 'dur',
        setter: {
          componentName: 'NumberSetter',
          initialValue: 3,
        },
        condition(target) {
          return target.parent.getPropValue('borderType') === '8';
        },
      },
      {
        title: '翻转',
        name: 'reverse',
        setter: {
          componentName: 'BoolSetter',
        },
        defaultValue: false,
        condition(target) {
          return ['4', '5', '8'].includes(target.parent.getPropValue('borderType'));
        },
      },
      {
        title: '标题',
        name: 'title',
        setter: {
          componentName: 'I18nSetter',
        },
        condition(target) {
          return target.parent.getPropValue('borderType') === '11';
        },
      },
      {
        title: '标题宽度',
        name: 'titleWidth',
        setter: {
          componentName: 'NumberSetter',
          initialValue: 250,
        },
        condition(target) {
          return target.parent.getPropValue('borderType') === '11';
        },
      },
    ],
    supports: {
      style: true,
    },
    component: {
      isContainer: true,
    },
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '边框1',
    screenshot: 'https://files.ztocwst.com/download/f092168bf5f24f8380410b9f3cbc1677?isShow=true',
    schema: {
      componentName: 'DataVBorderBox',
      props: {
        borderType: '1',
        style: {
          width: '300px',
          height: '100px',
        },
      },
    },
  },
  {
    title: '边框2',
    screenshot: 'https://files.ztocwst.com/download/d565c293050945d2a3e02929b5f10bbc?isShow=true',
    schema: {
      componentName: 'DataVBorderBox',
      props: {
        borderType: '2',
        style: {
          width: '300px',
          height: '100px',
        },
      },
    },
  },
  {
    title: '边框3',
    screenshot: 'https://files.ztocwst.com/download/ccd9a2b5254e49deb0ae1d66b96da003?isShow=true',
    schema: {
      componentName: 'DataVBorderBox',
      props: {
        borderType: '3',
        style: {
          width: '300px',
          height: '100px',
        },
      },
    },
  },
  {
    title: '边框4',
    screenshot: 'https://files.ztocwst.com/download/e09159f37ae24c2d966765b67df60c68?isShow=true',
    schema: {
      componentName: 'DataVBorderBox',
      props: {
        borderType: '4',
        style: {
          width: '300px',
          height: '100px',
        },
      },
    },
  },
  {
    title: '边框5',
    screenshot: 'https://files.ztocwst.com/download/da62808ac1a142b1a11216b6b17ca462?isShow=true',
    schema: {
      componentName: 'DataVBorderBox',
      props: {
        borderType: '5',
        style: {
          width: '300px',
          height: '100px',
        },
      },
    },
  },
  {
    title: '边框6',
    screenshot: 'https://files.ztocwst.com/download/c578710c8a1f4001b528575029a58997?isShow=true',
    schema: {
      componentName: 'DataVBorderBox',
      props: {
        borderType: '6',
        style: {
          width: '300px',
          height: '100px',
        },
      },
    },
  },
  {
    title: '边框7',
    screenshot: 'https://files.ztocwst.com/download/32060bbc8c6c4c99901c8f2e9c4a857d?isShow=true',
    schema: {
      componentName: 'DataVBorderBox',
      props: {
        borderType: '7',
        style: {
          width: '300px',
          height: '100px',
        },
      },
    },
  },
  {
    title: '边框8',
    screenshot: 'https://files.ztocwst.com/download/13602a4f85b24451a8b5675abfec053c?isShow=true',
    schema: {
      componentName: 'DataVBorderBox',
      props: {
        borderType: '8',
        style: {
          width: '300px',
          height: '100px',
        },
      },
    },
  },
  {
    title: '边框9',
    screenshot: 'https://files.ztocwst.com/download/a881bae3fa2b4b4e951b8e1ad2df2736?isShow=true',
    schema: {
      componentName: 'DataVBorderBox',
      props: {
        borderType: '9',
        style: {
          width: '300px',
          height: '100px',
        },
      },
    },
  },
  {
    title: '边框10',
    screenshot: 'https://files.ztocwst.com/download/a21ebdf5f44943369e740f2ce753adf6?isShow=true',
    schema: {
      componentName: 'DataVBorderBox',
      props: {
        borderType: '10',
        style: {
          width: '300px',
          height: '100px',
        },
      },
    },
  },
  {
    title: '边框11',
    screenshot: 'https://files.ztocwst.com/download/5569c667f59249b28869805020dd4c66?isShow=true',
    schema: {
      componentName: 'DataVBorderBox',
      props: {
        borderType: '11',
        title: 'BorderBox11',
        titleWidth: 100,
        style: {
          width: '300px',
          height: '100px',
        },
      },
    },
  },
  {
    title: '边框12',
    screenshot: 'https://files.ztocwst.com/download/24e4a3fca8b6481180b18d3254fc3144?isShow=true',
    schema: {
      componentName: 'DataVBorderBox',
      props: {
        borderType: '12',
        style: {
          width: '300px',
          height: '100px',
        },
      },
    },
  },
  {
    title: '边框13',
    screenshot: 'https://files.ztocwst.com/download/7ff253bd95f34870a4324ce881dad8ac?isShow=true',
    schema: {
      componentName: 'DataVBorderBox',
      props: {
        borderType: '13',
        style: {
          width: '300px',
          height: '100px',
        },
      },
    },
  },
];

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