import snippets from './snippets';
import { stringProp } from '../_utils/css';

export default {
  snippets,
  componentName: 'AMImageUploader',
  docUrl: 'https://mobile.ant.design/zh/components/image-uploader',
  title: '图片上传',
  category: '表单',
  group: '基础组件',
  props: [
    {
      title: '基本',
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'defaultValue',
          title: {
            label: '默认文件列表',
            tip: 'defaultValue | 默认已上传的文件列表\t',
          },
          propType: 'object',
        },
        {
          name: 'value',
          title: {
            label: '当前文件列表',
            tip: 'value | 默认已上传的文件列表',
          },
          propType: 'object',
        },
        {
          name: '文件地址前缀',
          title: {
            label: '当前文件地址的前缀',
            tip: 'prefixUrl',
          },
          propType: 'string',
          setter: 'StringSetter',
        },
        {
          name: 'accept',
          title: {
            label: '文件类型',
            tip: 'accept | 接受上传的文件类型, 例如 image/gif image/jpeg image/jpg image/png',
          },
          propType: 'string',
          setter: 'StringSetter',
        },
        {
          name: 'capture',
          title: {
            label: '图片选取模式',
            tip: 'capture | 图片选取模式，可选值为 camera（直接调起摄像头）',
          },
          propType: 'string',
          setter: 'StringSetter',
        },
        {
          name: 'multiple',
          title: {
            label: '支持多选',
            tip: 'multiple | 是否支持多选，是否支持选择多张图片',
          },
          propType: 'bool',
          defaultValue: false,
          setter: 'BoolSetter',
        },
        {
          name: 'columns',
          title: {
            label: '列数',
            tip: 'columns | 列数',
          },
          propType: 'number',
          setter: 'NumberSetter',
        },
        {
          name: 'maxCount',
          title: {
            label: '上传数量限制',
            tip: 'maxCount | 最多上传几张图片，超出数量会自动隐藏上传按钮，0 表示不做限制',
          },
          propType: 'number',
          setter: 'NumberSetter',
        },
        {
          name: 'imageFit',
          title: {
            label: '填充模式',
            tip: 'imageFit | 填充模式',
          },
          propType: {
            type: 'oneOf',
            value: ['contain', 'cover', 'fill', 'none', 'scale-down'],
          },
          setter: [
            {
              componentName: 'SelectSetter',
              props: {
                options: [
                  {
                    title: 'contain',
                    value: 'contain',
                  },
                  {
                    title: 'cover',
                    value: 'cover',
                  },
                  {
                    title: 'fill',
                    value: 'fill',
                  },
                  {
                    title: 'none',
                    value: 'none',
                  },
                  {
                    title: 'scale-down',
                    value: 'scale-down',
                  },
                ],
              },
            },
            'VariableSetter',
          ],
          defaultValue: 'cover',
        },
        {
          name: 'disableUpload',
          title: {
            label: '禁用上传按钮',
            tip: 'disableUpload | 是否禁用上传按钮',
          },
          propType: 'bool',
          defaultValue: false,
          setter: 'BoolSetter',
        },
        {
          name: 'showUpload',
          title: {
            label: '展示上传按钮',
            tip: 'showUpload | 是否展示上传按钮',
          },
          propType: 'bool',
          defaultValue: true,
          setter: 'BoolSetter',
        },
        {
          name: 'preview',
          title: {
            label: '支持预览',
            tip: 'preview | 支持预览',
          },
          propType: 'bool',
          defaultValue: true,
          setter: 'BoolSetter',
        },
        {
          name: 'deletable',
          title: {
            label: '展示删除按钮',
            tip: 'deletable | 是否展示删除按钮',
          },
          propType: 'bool',
          defaultValue: true,
          setter: 'BoolSetter',
        },
      ],
    },
    {
      title: '上传参数',
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'action',
          title: { label: '上传地址', tip: 'action | 上传的地址或方法' },
          propType: { type: 'oneOfType', value: ['string', 'func'] },
          setter: ['StringSetter', 'FunctionSetter', 'VariableSetter'],
        },
        {
          name: 'headers',
          title: {
            label: '上传请求头',
            tip: 'headers | 设置上传的请求头部',
          },
          propType: 'object',
          setter: 'JsonSetter',
        },
        {
          name: 'fileName',
          title: { label: '文件参数名', tip: 'fileName | 发到后台的文件参数名' },
          propType: 'string',
          setter: 'StringSetter',
          defaultValue: 'files',
        },
      ],
    },
    {
      title: '高级',
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'imgSizeLimit',
          title: {
            label: '图片大小限制',
            tip: 'imgSizeLimit | 图片大小限制',
          },
          propType: 'string',
          setter: [
            {
              componentName: 'StringSetter',
              props: {
                suffix: 'MB',
              },
            },
          ],
        },
        {
          name: 'videoSizeLimit',
          title: {
            label: '视频大小限制',
            tip: 'videoSizeLimit | 视频大小限制',
          },
          propType: 'string',
          setter: [
            {
              componentName: 'StringSetter',
              props: {
                suffix: 'MB',
              },
            },
          ],
        },
        {
          name: 'showFailed',
          title: {
            label: '展示失败状态图片',
            tip: 'showFailed | 是否展示上传失败状态下的图片',
          },
          propType: 'bool',
          defaultValue: true,
          setter: 'BoolSetter',
        },
        {
          name: 'showUpload',
          title: {
            label: '是否展示上传按钮',
            tip: 'showUpload | 是否展示上传按钮',
          },
          propType: 'bool',
          defaultValue: true,
          setter: 'BoolSetter',
        },
        {
          name: 'renderItem',
          title: {
            label: '自定义列表项',
            tip: 'renderItem | 自定义上传列表项',
          },
          propType: 'func',
          setter: {
            componentName: 'SlotSetter',
            title: '自定义列表项插槽',
            initialValue: {
              type: 'JSSlot',
              params: ['originNode', 'item', 'items'],
              value: [],
            },
          },
        },
      ],
    },
    {
      title: '回调函数',
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'beforeUpload',
          title: {
            label: '上传前回调',
            tip: 'beforeUpload | 上传文件之前的回调函数',
          },
          propType: 'func',
          setter: {
            componentName: 'FunctionSetter',
            props: {
              template:
                'beforeUpload(file,fileList,${extParams}){\n// 上传文件之前的钩子\nreturn false;\n}',
            },
          },
        },
        {
          name: 'upload',
          title: {
            label: '上传函数',
            tip: 'upload | 上传方法，入参是需要被上传的文件对象，经过异步处理之后，返回上传结果',
          },
          propType: 'func',
          setter: {
            componentName: 'FunctionSetter',
            props: {
              template:
                'async upload(file,${extParams}){\n// 上传方法，入参是需要被上传的文件对象，经过异步处理之后，返回上传结果,\nreturn {url: ""} ;\n}',
            },
          },
        },
      ],
    },
    {
      title: 'CSS变量',
      display: 'block',
      type: 'group',
      items: [
        stringProp(
          'cell-size',
          '图片和上传按钮的大小',
          '图片和上传按钮的大小（仅在非 columns 模式下有效）',
        ),
        stringProp('gap', '间距大小', '间距大小'),
        stringProp('gap-horizontal', '水平间距'),
        stringProp('gap-vertical', '垂直间距'),
      ],
    },
  ],
  configure: {
    supports: {
      style: true,
      events: [
        {
          name: 'onChange',
          template:
            "onChange(items,${extParams}){\n// 上传文件改变时的回调\nconsole.log('onChange',items);}",
        },
        {
          name: 'onCountExceed',
          template:
            "onCountExceed(file,${extParams}){\n// 用户选择的图片数量超出最大限制时触发\t\nconsole.log('onCountExceed',file);}",
        },
        {
          name: 'onDelete',
          template:
            "onDelete(file,${extParams}){\n// 点击移除文件时的回调\nconsole.log('onDelete',file);}",
        },
        {
          name: 'onPreview',
          template:
            "onPreview(index, item,${extParams}){\n// 点击预览图片\nconsole.log('onPreview',index, item);}",
        },
        {
          name: 'onUploadQueueChange',
          template:
            "onUploadQueueChange(tasks,${extParams}){\n// 点击预览图片\nconsole.log('onUploadQueueChange',tasks);}",
        },
      ],
    },
  },
};