import snippets from './snippets';
import {
  border,
  color,
  stringProp,
  width,
} from '../_utils/css';

export default {
  componentName: 'AMCenterPopup',
  docUrl: 'https://mobile.ant.design/zh/components/popup#centerpopup',
  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: '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'),
        color('background','弹层背景色'),
        border('radius','弹层边框圆角'),
        width('max','弹层最大宽度'),
        width('min','弹层最大宽度'),
      ],
    },
  ],
  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,
};