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

export default {
  componentName: 'AMPopup',
  docUrl: 'https://mobile.ant.design/zh/components/popup',
  title: '弹出层',
  category: '反馈',
  group: '基础组件',
  props: [
    {
      name: 'content',
      title: {
        label: '弹出内容',
        tip: 'content | 弹出内容',
      },
      propType: {
        type: 'oneOfType',
        value: ['node', 'string'],
      },
      setter: ['SlotSetter', 'StringSetter', 'VariableSetter'],
    },
    {
      name: 'bodyStyle',
      title: {
        label: '内容区域样式',
        tip: 'bodyStyle | 内容区域样式',
      },
      propType: 'object',
      setter: 'JsonSetter',
      supportVariable: true,
    },
    {
      name: 'maskStyle',
      title: {
        label: '遮罩样式',
        tip: 'maskStyle | 遮罩样式',
      },
      propType: 'object',
      setter: 'JsonSetter',
      supportVariable: true,
    },
    {
      name: 'position',
      title: { label: '位置', tip: 'position | 指定弹出的位置' },
      propType: { type: 'oneOf', value: ['bottom', 'top', 'left', 'right'] },
      setter: [
        {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                title: '底部',
                value: 'bottom',
              },
              {
                title: '顶部',
                value: 'top',
              },
              {
                title: '左侧',
                value: 'left',
              },
              {
                title: '右侧',
                value: 'right',
              },
            ],
          },
        },
        'VariableSetter',
      ],
      defaultValue: 'bottom',
    },
    {
      name: 'closeIcon',
      title: {
        label: '关闭按钮图标',
        tip: 'closeIcon | 自定义关闭按钮图标',
      },
      propType: {
        type: 'oneOfType',
        value: ['node', 'string'],
      },
      setter: ['VariableSetter', 'SlotSetter'],
    },
    {
      name: 'closeOnMaskClick',
      title: { label: '点击背景蒙层关闭', tip: 'closeOnMaskClick | 点击背景蒙层后是否关闭' },
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: false,
    },
    {
      name: 'destroyOnClose',
      title: { label: '不可见时销毁DOM', tip: 'destroyOnClose | 不可见时是否销毁 DOM 结构' },
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: false,
    },
    {
      name: 'forceRender',
      title: { label: '强制渲染', tip: 'forceRender | 强制渲染内容' },
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: false,
    },
    {
      name: 'mask',
      title: { label: '展示蒙层', tip: 'mask | 是否展示蒙层' },
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: true,
    },
    {
      name: 'showCloseButton',
      title: { label: '显示关闭按钮', tip: 'showCloseButton | 是否显示关闭按钮' },
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: false,
    },
    {
      name: 'visible',
      title: { label: '是否可见', tip: 'visible | 是否可见' },
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: true,
    },
    {
      name: 'closeOnSwipe',
      title: { label: '滑动关闭', tip: 'closeOnSwipe | 是否支持向上/下滑动关闭' },
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: false,
    },

    {
      title: 'CSS变量',
      display: 'block',
      type: 'group',
      items: [stringProp('z-index', '元素的 z-index')],
    },
  ],
  configure: {
    component: {
      isContainer: true,
      isModal: true,
    },
    supports: {
      events: [
        {
          name: 'afterClose',
          description: '完全关闭后触发',
          template: "afterClose(${extParams}){\n// 完全关闭后触发\nconsole.log('afterClose');}",
        },
        {
          name: 'afterShow',
          description: '完全展示后触发',
          template: "afterShow(${extParams}){\n// 完全展示后触发\nconsole.log('afterShow');}",
        },
        {
          name: 'getContainer',
          description: '指定挂载的 HTML 节点',
          template:
            "getContainer(${extParams}){\n// 指定挂载的 HTML 节点，默认为 body，如果为 null 的话，会渲染到当前节点\nconsole.log('getContainer');}",
        },
        {
          name: '点击事件',
          description: '点击时触发，常用于阻止事件冒泡',
          template:
            "onClick(event,${extParams}){\n// 点击时触发，常用于阻止事件冒泡\nconsole.log('onClick');}",
        },
        {
          name: 'onClose',
          description: '关闭事件',
          template: "onClose(${extParams}){\n// 关闭时触发\nconsole.log('onClose');}",
        },
      ],
      style: true,
    },
  },
  snippets,
};