import { Component, OnInit, OnDestroy } from '@angular/core';

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

export class TableDocComponent implements OnInit, OnDestroy {
    apiPath = './docs/components/table-doc/table.api.json';

    doc_1 = {
        title: "简单",
        intro: `简单的表格，最后一列是各种操作。`,
        htmlPath: './docs/components/table-doc/table-doc-1/table-doc-1.component.html',
        tsPath: './docs/components/table-doc/table-doc-1/table-doc-1.component.ts'
    }

    doc_2 = {
        title: "可选择",
        intro: `第一列是联动的选择框。`,
        htmlPath: './docs/components/table-doc/table-doc-2/table-doc-2.component.html',
        tsPath: './docs/components/table-doc/table-doc-2/table-doc-2.component.ts'
    }

    doc_3 = {
        title: "选择和操作",
        intro: `选择后进行操作，完成后清空选择。`,
        htmlPath: './docs/components/table-doc/table-doc-3/table-doc-3.component.html',
        tsPath: './docs/components/table-doc/table-doc-3/table-doc-3.component.ts'
    }

    doc_4 = {
        title: "选择框属性",
        intro: `配置选择框的默认属性。`,
        htmlPath: './docs/components/table-doc/table-doc-4/table-doc-4.component.html',
        tsPath: './docs/components/table-doc/table-doc-4/table-doc-4.component.ts'
    }

    doc_5 = {
        title: "可控的筛选和排序",
        intro: `使用受控属性对筛选和排序状态进行控制。
                nzTable可以像 HTML table 标签 一样自定义表头和内容，通过配合 nz-table-sort与 nz-table-filter可以方便的自定义筛选和排序功能。`,
        htmlPath: './docs/components/table-doc/table-doc-5/table-doc-5.component.html',
        tsPath: './docs/components/table-doc/table-doc-5/table-doc-5.component.ts'
    }

    doc_6 = {
        title: "自定义筛选菜单",
        intro: `通过 nz-dropdown的 nz-dropdown-custom属性自定义筛选菜单
                nzTable可以像 HTML table 标签 一样自定义表头和内容。`,
        htmlPath: './docs/components/table-doc/table-doc-6/table-doc-6.component.html',
        tsPath: './docs/components/table-doc/table-doc-6/table-doc-6.component.ts'
    }

    doc_7 = {
        title: "分页",
        intro: `数据项较多时显示分页。`,
        htmlPath: './docs/components/table-doc/table-doc-7/table-doc-7.component.html',
        tsPath: './docs/components/table-doc/table-doc-7/table-doc-7.component.ts'
    }

    doc_8 = {
        title: "远程加载数据",
        intro: `这个例子通过简单的 ajax 读取方式，演示了如何从服务端读取并展现数据，具有筛选、排序等功能以及页面 loading 效果。开发者可以自行接入其他数据处理方式。
                注意，此示例使用 模拟接口 ，展示数据可能不准确，请打开网络面板查看请求。`,
        htmlPath: './docs/components/table-doc/table-doc-8/table-doc-8.component.html',
        tsPath: './docs/components/table-doc/table-doc-8/table-doc-8.component.ts'
    }

    doc_9 = {
        title: "可展开",
        intro: `当表格内容较多不能一次性完全展示时。`,
        htmlPath: './docs/components/table-doc/table-doc-9/table-doc-9.component.html',
        tsPath: './docs/components/table-doc/table-doc-9/table-doc-9.component.ts'
    }

    doc_10 = {
        title: "表格行/列合并",
        intro: `nzTable可以像 HTML table 标签 一样使用 rowspan和 colspan标签`,
        htmlPath: './docs/components/table-doc/table-doc-10/table-doc-10.component.html',
        tsPath: './docs/components/table-doc/table-doc-10/table-doc-10.component.ts'
    }

    doc_11 = {
        title: "树形数据展示",
        intro: `表格支持树形数据的展示，可以通过设置 nzLevel 以控制每一层的缩进宽度。`,
        htmlPath: './docs/components/table-doc/table-doc-11/table-doc-11.component.html',
        tsPath: './docs/components/table-doc/table-doc-11/table-doc-11.component.ts'
    }

    doc_12 = {
        title: "固定表头",
        intro: `方便一页内展示大量数据。
                需要手动指定 th和 td的宽度，否则列头和内容可能不对齐。`,
        htmlPath: './docs/components/table-doc/table-doc-12/table-doc-12.component.html',
        tsPath: './docs/components/table-doc/table-doc-12/table-doc-12.component.ts'
    }

    doc_13 = {
        title: "可编辑",
        intro: `通过自定义模板实现带行编辑功能的表格。`,
        htmlPath: './docs/components/table-doc/table-doc-13/table-doc-13.component.html',
        tsPath: './docs/components/table-doc/table-doc-13/table-doc-13.component.ts'
    }

    doc_14 = {
        title: "不显示分页",
        intro: `传入 nzIsPagination 为 false 即可。此时表格将完整显示 nzDataSource 内的数据，不进行任何分页。`,
        htmlPath: './docs/components/table-doc/table-doc-14/table-doc-14.component.html',
        tsPath: './docs/components/table-doc/table-doc-14/table-doc-14.component.ts'
    }

    doc_15 = {
        title: "动态控制表格属性",
        intro: `选择不同配置组合查看效果。`,
        htmlPath: './docs/components/table-doc/table-doc-15/table-doc-15.component.html',
        tsPath: './docs/components/table-doc/table-doc-15/table-doc-15.component.ts'
    }
    doc_16 = {
        title: "固定列 ",
        intro: `通过给属性rowfixedOrient 设置 left 或 right，可以左右固定需要的列,当横向内容过多时可以使用。`,
        htmlPath: './docs/components/table-doc/table-doc-16/table-doc-16.component.html',
        tsPath: './docs/components/table-doc/table-doc-16/table-doc-16.component.ts'
    }
    doc_17 = {
        title: "固定列加分页 ",
        intro: `固定列并且分页,添加属性方法[nzPageIndex]="currentPageIndex"`,
        htmlPath: './docs/components/table-doc/table-doc-17/table-doc-17.component.html',
        tsPath: './docs/components/table-doc/table-doc-17/table-doc-17.component.ts'
    }
    constructor() {

    }

    ngOnInit() {

    }

    ngOnDestroy() {

    }

}