import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'cm-modal-doc',
    templateUrl: './modal-doc.component.html',
    styleUrls: ['./modal-doc.component.css']
})

export class ModalDocComponent implements OnInit {
    apiPath = './docs/components/modal-doc/modal.api.json';

    doc_1 = {
        title: "基本",
        intro: `最简单的用法。`,
        htmlPath: './docs/components/modal-doc/modal-doc-1/modal-doc-1.component.html',
        tsPath: './docs/components/modal-doc/modal-doc-1/modal-doc-1.component.ts'
    }

    doc_2 = {
        title: "异步关闭",
        intro: `点击确定后异步关闭对话框，例如提交表单。`,
        htmlPath: './docs/components/modal-doc/modal-doc-2/modal-doc-2.component.html',
        tsPath: './docs/components/modal-doc/modal-doc-2/modal-doc-2.component.ts'
    }

    doc_3 = {
        title: "Modal's service",
        intro: `Modal的service用法，示例中演示了用户自定义模板、自定义component、以及获取传出数据的方法。
        注意：如果使用component模式，则需要在NgModule中的 declarations 和 entryComponents 加入自定义的component
        `,
        htmlPath: './docs/components/modal-doc/modal-doc-3/modal-doc-3.component.html',
        tsPath: './docs/components/modal-doc/modal-doc-3/modal-doc-3.component.ts'
    }

    doc_4 = {
        title: "自定义",
        intro: `更复杂的例子，自定义了页头的内容及页脚的按钮，点击提交后进入 loading 状态，完成后关闭。`,
        htmlPath: './docs/components/modal-doc/modal-doc-4/modal-doc-4.component.html',
        tsPath: './docs/components/modal-doc/modal-doc-4/modal-doc-4.component.ts'
    }

    doc_5 = {
        title: "确认对话框",
        intro: `使用 confirm() 可以快捷地弹出确认框。`,
        htmlPath: './docs/components/modal-doc/modal-doc-5/modal-doc-5.component.html',
        tsPath: './docs/components/modal-doc/modal-doc-5/modal-doc-5.component.ts'
    }

    doc_6 = {
        title: "异步确认对话框",
        intro: `使用 confirm() 可以快捷地弹出确认框。onCancel/onOk 返回 promise 可以延迟关闭`,
        htmlPath: './docs/components/modal-doc/modal-doc-6/modal-doc-6.component.html',
        tsPath: './docs/components/modal-doc/modal-doc-6/modal-doc-6.component.ts'
    }

    doc_7 = {
        title: "信息提示",
        intro: `各种类型的信息提示，只提供一个按钮用于关闭。`,
        htmlPath: './docs/components/modal-doc/modal-doc-7/modal-doc-7.component.html',
        tsPath: './docs/components/modal-doc/modal-doc-7/modal-doc-7.component.ts'
    }

    doc_8 = {
        title: "国际化",
        intro: `设置 okText 与 cancelText 以自定义按钮文字。`,
        htmlPath: './docs/components/modal-doc/modal-doc-8/modal-doc-8.component.html',
        tsPath: './docs/components/modal-doc/modal-doc-8/modal-doc-8.component.ts'
    }

    doc_9 = {
        title: "手动移除",
        intro: `手动关闭modal。`,
        htmlPath: './docs/components/modal-doc/modal-doc-9/modal-doc-9.component.html',
        tsPath: './docs/components/modal-doc/modal-doc-9/modal-doc-9.component.ts'
    }

    doc_10 = {
        title: "自定义位置",
        intro: `您可以直接使用 style.top 或配合其他样式来设置对话框位置。
        注意：如果在component中没有加入 encapsulation: ViewEncapsulation.None 则因为样式隔离，必须在自定义样式时加上 :host ::ng-deep ，否则样式不生效
        `,
        htmlPath: './docs/components/modal-doc/modal-doc-10/modal-doc-10.component.html',
        tsPath: './docs/components/modal-doc/modal-doc-10/modal-doc-10.component.ts'
    }

    constructor() {
    }

    ngOnInit() {

    }

}