import { snippets } from './snippets';
import { uuid } from '../_utils/utils';

const ProModalMeta = {
  componentName: 'ProModal',
  title: '高级对话框',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  group: '基础组件',
  category: '高级组件',
  npm: {
    package: 'cu-lowcode-material-antd',
    version: 'latest',
    exportName: 'ProModal',
    main: '',
    destructuring: true,
    subName: '',
  },
  props: [
    {
      name: 'ref',
      title: {
        label: 'ref',
        tip: "ref | 通过 this.$('xxx') 获取到组件实例",
      },
      defaultValue: () => {
        return `pro_modal_${uuid()}`;
      },
      setter: ['StringSetter', 'VariableSetter'],
    },
    {
      name: 'title',
      title: '标题',
      propType: 'string',
      setter: ['StringSetter', 'VariableSetter'],
    },

    {
      name: 'width',
      title: { label: '宽度', tip: 'width | 宽度' },
      propType: { type: 'oneOfType', value: ['string', 'number'] },
      setter: ['NumberSetter', 'StringSetter', 'VariableSetter'],
      defaultValue: 520,
    },
    {
      name: 'height',
      title: { label: '高度', tip: 'width | 高度' },
      propType: { type: 'oneOfType', value: ['string', 'number'] },
      setter: ['NumberSetter', 'StringSetter', 'VariableSetter'],
    },
    {
      name: 'mask',
      title: { label: '显示遮罩', tip: 'mask | 显示遮罩' },
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: true,
    },
    {
      name: 'visible',
      title: { label: '是否可见', tip: 'visible | 对话框是否可见' },
      propType: 'bool',
      setter: 'BoolSetter',
    },
    {
      name: 'centered',
      title: { label: '垂直居中', tip: 'centered | 垂直居中展示 Modal' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
    },
    {
      name: 'closable',
      title: { label: '显示关闭按钮', tip: 'closable | 是否显示右上角的关闭按钮' },
      propType: 'bool',
      defaultValue: true,
      setter: 'BoolSetter',
    },
    {
      name: 'confirmLoading',
      title: { label: '确定按钮loading', tip: 'confirmLoading| 确定按钮loading' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
    },
    {
      name: 'destroyOnClose',
      title: { label: '销毁子元素', tip: 'destroyOnClose | 关闭时销毁 Modal 里的子元素' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
    },
    {
      name: 'forceRender',
      title: { label: '强制渲染Modal', tip: 'forceRender | 强制渲染Modal' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
    },
    {
      name: 'keyboard',
      title: { label: 'esc关闭', tip: 'keyboard | 是否支持键盘 esc 关闭' },
      propType: 'bool',
      defaultValue: true,
      setter: 'BoolSetter',
    },
    {
      name: 'maskClosable',
      title: { label: '点击蒙层关闭', tip: 'maskClosable | 点击蒙层是否允许关闭' },
      propType: 'bool',
      defaultValue: true,
      setter: 'BoolSetter',
    },
    {
      name: 'zIndex',
      title: { label: 'z-index', tip: 'zIndex | 设置 Modal 的 `z-index`' },
      propType: 'number',
      setter: 'NumberSetter',
    },
    {
      name: 'wrapClassName',
      title: { label: '外层容器类名', tip: 'wrapClassName | 对话框外层容器的类名' },
      propType: 'string',
      setter: 'StringSetter',
    },
    {
      name: 'getContainer',
      title: {
        label: '指定挂载节点',
        tip: 'getContainer | 指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom',
      },
      propType: { type: 'oneOfType', value: ['node', 'func'] },
    },
    {
      name: 'operations',
      title: { label: '操作项', tip: 'operations | 操作项的配置描述，具体项见下表' },
      setter: {
        componentName: 'ArraySetter',
        props: {
          itemSetter: {
            componentName: 'ObjectSetter',
            props: {
              config: {
                items: [
                  {
                    name: 'content',
                    title: { label: '文本', tip: 'content | 文本' },
                    propType: 'string',
                    setter: 'StringSetter',
                    isRequired: true,
                  },
                  {
                    name: 'action',
                    title: { label: '操作', tip: 'action | 操作' },
                    propType: 'string',
                    setter: {
                      componentName: 'SelectSetter',
                      props: {
                        options: [
                          {
                            title: '提交',
                            value: 'submit',
                          },
                          {
                            title: '取消',
                            value: 'cancel',
                          },
                          {
                            title: '自定义',
                            value: 'custom',
                          },
                        ],
                      },
                    },
                    isRequired: true,
                  },
                  {
                    name: 'type',
                    title: { label: '类型', tip: 'type | 按钮类型' },
                    propType: {
                      type: 'oneOf',
                      value: ['primary', 'default'],
                    },
                    setter: {
                      componentName: 'SelectSetter',
                      props: {
                        options: [
                          {
                            title: 'primary',
                            value: 'primary',
                          },
                          {
                            title: 'default',
                            value: 'default',
                          },
                        ],
                      },
                    },
                    isRequired: true,
                  },
                ],
              },
            },
          },
        },
      },
    },
    {
      name: 'onCancel',
      title: {
        label: '取消按钮回调',
        tip: 'onCancel | 点击遮罩层或右上角叉或取消按钮的回调',
      },
      propType: 'func',
    },
    {
      name: 'onOk',
      title: { label: '点击确定回调', tip: 'onOk | 点击确定回调' },
      propType: 'func',
    },
  ],
  configure: {
    component: {
      isContainer: true,
      isModal: true,
      rootSelector: '.ant-modal-content',
      nestingRule: {
        parentWhitelist: ['Page', 'Component'],
      },
    },
    supports: {
      style: true,
      events: [
        {
          name: 'afterClose',
          description: 'Modal 完全关闭后的回调',
          template:
            "\tonCancel(${extParams}){\n\t\t// 完全关闭后的回调\n\t\tconsole.log('afterClose');\n\t}\n",
        },
        {
          name: 'onCancel',
          description: '点击遮罩层或右上角叉或取消按钮的回调',
          template:
            "\tonCancel(${extParams}){\n\t\t// 点击遮罩层或右上角叉或取消按钮的回调\n\t\tconsole.log('onCancel');\n\t}\n",
        },
        {
          name: 'onOk',
          description: '点击确定回调',
          template: "\tonOk(${extParams}){\n\t\t// 点击确定回调\n\t\tconsole.log('onOk');\n\t}\n",
        },
      ],
    },
  },
};

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