import snippets from './snippets';
import {FileSetter} from "../_setters";

export default {
  snippets,
  componentName: 'Image',
  title: '图片',
  category: '数据展示',
  group: '基础组件',
  props: [
    {
      name: 'src',
      title: { label: '图片地址', tip: 'src | 图片地址' },
      propType: { type: 'string', isRequired: true },
      setter: [FileSetter],
    },
    {
      name: 'alt',
      title: { label: '替换文本', tip: 'alt | 图片加载失败时显示的文本' },
      propType: 'string',
    },
    {
      name: 'preview',
      title: { label: '支持预览', tip: 'preview | 预览参数，为 false 时禁用' },
      // defaultValue: false,
      setter: {
        componentName: 'MixedSetter',
        props: {
          setters: [
            {
              componentName: 'BoolSetter',
              isRequired: true,
              initialValue: true
            },
            {
              componentName: 'JsonSetter',
            }
          ]
        }
      }
    },
    {
      name: 'fallback',
      title: { label: '失败地址', tip: 'fallback | 加载失败容错地址' },
      propType: 'string',
    },
    {
      name: 'width',
      title: { label: '宽度', tip: 'width | 宽度' },
      propType: 'number',
    },
    {
      name: 'height',
      title: { label: '高度', tip: 'height | 高度' },
      propType: 'number',
    },
    {
      name: 'autoSize',
      title: { label: '默认尺寸', tip: 'autoSize | 按默认纵横比扩展' },
      propType: 'bool',
      defaultValue: false,
    },
    {
      name: 'borderRadius',
      title: { label: '圆角', tip: 'borderRadius | 设置图片边框圆角' },
      propType: 'string',
    },
    {
      name: 'objectFit',
      title: {
        label: '摆放方式',
        tip: 'objectFit | 设置图片的摆放方式',
      },
      propType: {
        type: 'oneOf',
        value: ['cover', 'contain', 'fill', 'none'],
      },
      setter: [
        {
          componentName: 'SelectSetter',
          props: {
            options: [
              {
                title: 'cover',
                value: 'cover',
              },
              {
                title: 'contain',
                value: 'contain',
              },
              {
                title: 'fill',
                value: 'fill',
              },
              {
                title: 'none',
                value: 'none',
              },
            ],
          },
        },
      ],
    },
  ],
  configure: { supports: { style: true } },
};