/* entryComponents: NzModalCustomComponent */
import { Component, Input, TemplateRef } from '@angular/core';
import { NzModalRef, NzModalService } from 'ng-zorro-antd';
@Component({
  selector: 'nz-demo-modal-service',
  template: `
    <button nz-button nzType="primary" (click)="createModal()">
      <span>String</span>
    </button>
    <button nz-button nzType="primary" (click)="createTplModal(tplTitle, tplContent, tplFooter)">
      <span>Template</span>
    </button>
    <ng-template #tplTitle>
      <span>Title Template</span>
    </ng-template>
    <ng-template #tplContent>
      <p>some contents...</p>
      <p>some contents...</p>
      <p>some contents...</p>
      <p>some contents...</p>
      <p>some contents...</p>
    </ng-template>
    <ng-template #tplFooter>
      <button nz-button nzType="primary" (click)="destroyTplModal()" [nzLoading]="tplModalButtonLoading">
        Close after submit
      </button>
    </ng-template>
    <br /><br />
    <button nz-button nzType="primary" (click)="createComponentModal()">
      <span>Use Component</span>
    </button>
    <button nz-button nzType="primary" (click)="createCustomButtonModal()">Custom Button</button>
    <br /><br />
    <button nz-button nzType="primary" (click)="openAndCloseAll()">Open more modals then close all after 2s</button>
    <nz-modal [(nzVisible)]="htmlModalVisible" nzMask="false" nzZIndex="1001" nzTitle="Non-service html modal"
      >This is a non-service html modal</nz-modal
    >
  `,
  styles: [
    `
      button {
        margin-right: 8px;
      }
    `
  ]
})
export class NzDemoModalServiceComponent {
  tplModal: NzModalRef;
  tplModalButtonLoading = false;
  htmlModalVisible = false;
  disabled = false;
  constructor(private modalService: NzModalService) {}
  createModal(): void {
    this.modalService.create({
      nzTitle: 'Modal Title',
      nzContent: 'string, will close after 1 sec',
      nzClosable: false,
      nzOnOk: () => new Promise(resolve => setTimeout(resolve, 1000))
    });
  }
  createTplModal(tplTitle: TemplateRef<{}>, tplContent: TemplateRef<{}>, tplFooter: TemplateRef<{}>): void {
    this.tplModal = this.modalService.create({
      nzTitle: tplTitle,
      nzContent: tplContent,
      nzFooter: tplFooter,
      nzMaskClosable: false,
      nzClosable: false,
      nzOnOk: () => console.log('Click ok')
    });
  }
  destroyTplModal(): void {
    this.tplModalButtonLoading = true;
    setTimeout(() => {
      this.tplModalButtonLoading = false;
      this.tplModal.destroy();
    }, 1000);
  }
  createComponentModal(): void {
    const modal = this.modalService.create({
      nzTitle: 'Modal Title',
      nzContent: NzModalCustomComponent,
      nzComponentParams: {
        title: 'title in component',
        subtitle: 'component sub title，will be changed after 2 sec'
      },
      nzFooter: [
        {
          label: 'change component tilte from outside',
          onClick: componentInstance => {
            componentInstance!.title = 'title in inner component is changed';
          }
        }
      ]
    });
    modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
    // Return a result when closed
    modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
    // delay until modal instance created
    setTimeout(() => {
      const instance = modal.getContentComponent();
      instance.subtitle = 'sub title is changed';
    }, 2000);
  }
  createCustomButtonModal(): void {
    const modal: NzModalRef = this.modalService.create({
      nzTitle: 'custom button demo',
      nzContent: 'pass array of button config to nzFooter to create multiple buttons',
      nzFooter: [
        {
          label: 'Close',
          shape: 'default',
          onClick: () => modal.destroy()
        },
        {
          label: 'Confirm',
          type: 'primary',
          onClick: () =>
            this.modalService.confirm({ nzTitle: 'Confirm Modal Title', nzContent: 'Confirm Modal Content' })
        },
        {
          label: 'Change Button Status',
          type: 'danger',
          loading: false,
          onClick(): void {
            this.loading = true;
            setTimeout(() => (this.loading = false), 1000);
            setTimeout(() => {
              this.loading = false;
              this.disabled = true;
              this.label = 'can not be clicked！';
            }, 2000);
          }
        },
        {
          label: 'async load',
          type: 'dashed',
          onClick: () => new Promise(resolve => setTimeout(resolve, 2000))
        }
      ]
    });
  }
  openAndCloseAll(): void {
    let pos = 0;
    ['create', 'info', 'success', 'error'].forEach(method =>
      // @ts-ignore
      this.modalService[method]({
        nzMask: false,
        nzTitle: `Test ${method} title`,
        nzContent: `Test content: <b>${method}</b>`,
        nzStyle: { position: 'absolute', top: `${pos * 70}px`, left: `${pos++ * 300}px` }
      })
    );
    this.htmlModalVisible = true;
    this.modalService.afterAllClose.subscribe(() => console.log('afterAllClose emitted!'));
    setTimeout(() => this.modalService.closeAll(), 2000);
  }
}
@Component({
  selector: 'nz-modal-custom-component',
  template: `
    <div>
      <h2>{{ title }}</h2>
      <h4>{{ subtitle }}</h4>
      <p>
        <span>Get Modal instance in component</span>
        <button nz-button [nzType]="'primary'" (click)="destroyModal()">destroy modal in the component</button>
      </p>
    </div>
  `
})
export class NzModalCustomComponent {
  @Input() title: string;
  @Input() subtitle: string;
  constructor(private modal: NzModalRef) {}
  destroyModal(): void {
    this.modal.destroy({ data: 'this the result data' });
  }
}

API

单独引入此组件

想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

import { NzModalModule } from 'ng-zorro-antd';

NzModalServiceservice

对话框当前分为2种模式，普通模式 和 确认框模式（即Confirm对话框，通过调用confirm/info/success/error/warning弹出），两种模式对API的支持程度稍有不同。

注意

<nz-modal> 默认关闭后状态不会自动清空, 如果希望每次打开都是新内容，请采用 NzModalService 服务方式创建对话框（当以服务方式创建时，默认会监听 nzAfterClose 并销毁对话框）。

通过 NzModalService 服务方式创建的对话框需要自行管理其生命周期。比如你在页面路由切换时，服务方式创建的对话框并不会被销毁，你需要使用对话框引用来手动销毁（NzModalRef.close() 或 NzModalRef.destroy()）。

采用服务方式创建普通模式对话框

您可调用 NzModalService.create(options) 来动态创建普通模式对话框，这里的 options 是一个对象，支持上方API中给出的支持 普通模式 的参数

确认框模式 - NzModalService.method()

包括：

• NzModalService.info
• NzModalService.success
• NzModalService.error
• NzModalService.warning
• NzModalService.confirm
  以上均为一个函数，参数为 object，与上方API一致。部分属性类型或初始值有所不同，已列在下方：

以上函数调用后，会返回一个引用，可以通过该引用关闭弹窗。

constructor(modal: NzModalService) {
  const ref: NzModalRef = modal.info();
  ref.close(); // 或 ref.destroy(); 将直接销毁对话框
}

相关类型定义

NzModalService的其他方法/属性service

NzModalRef

NzModalRef 对象用于控制对话框以及进行内容间的通信

通过服务方式 NzModalService.xxx() 创建的对话框，都会返回一个 NzModalRef 对象，用于操控该对话框（若使用nzContent为Component时，也可通过依赖注入 NzModalRef 方式获得此对象），该对象具有以下方法：

全局配置

全局配置（NZ_MODAL_CONFIG）如果要进行全局默认配置，你可以设置提供商 NZ_MODAL_CONFIG 的值来实现。（如：在你的模块的providers中加入 { provide: NZ_MODAL_CONFIG, useValue: { nzMask: false }}，NZ_MODAL_CONFIG 可以从 ng-zorro-antd 中导入）

全局配置，组件默认值，组件层级配置之间的权重如下：

组件层级配置 > 全局配置 > 组件默认值

当前支持的全局配置

{
    provide: NZ_MODAL_CONFIG,
    useValue: {
        nzMask?: boolean; // 是否展示遮罩
        nzMaskClosable?: boolean; // 点击蒙层是否允许关闭
    }
}

注：全局配置并无默认值，因为nzMask和nzMaskClosable默认值存在于组件中

ModalButtonOptions（用于自定义底部按钮）

可将此类型数组传入 nzFooter，用于自定义底部按钮。

按钮配置项如下（与button组件保持一致）：

nzFooter: [{
  label: string; // 按钮文本
  type?: string; // 类型
  shape?: string; // 形状
  ghost?: boolean; // 是否ghost
  size?: string; // 大小
  autoLoading?: boolean; // 默认为true，若为true时，当onClick返回promise时此按钮将自动置为loading状态
  // 提示：下方方法的this指向该配置对象自身。当nzContent为组件类时，下方方法传入的contentComponentInstance参数为该组件类的实例
  // 是否显示该按钮
  show?: boolean | ((this: ModalButtonOptions, contentComponentInstance?: object) => boolean);
  // 是否显示为loading
  loading?: boolean | ((this: ModalButtonOptions, contentComponentInstance?: object) => boolean);
  // 是否禁用
  disabled?: boolean | ((this: ModalButtonOptions, contentComponentInstance?: object) => boolean);
  // 按钮点击回调
  onClick?(this: ModalButtonOptions, contentComponentInstance?: object): void | Promise<void> | any;
}]

以上配置项也可在运行态实时改变，来触发按钮行为改变。