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

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

export class UploadDocComponent implements OnInit, OnDestroy {
	apiPath = './docs/components/upload-doc/upload.api.json';
	doc_1 = {
		title: "点击上传",
		intro: `经典款式，用户点击按钮弹出文件选择框。`,
		htmlPath: './docs/components/upload-doc/upload-doc-1/upload-doc-1.component.html',
		tsPath: './docs/components/upload-doc/upload-doc-1/upload-doc-1.component.ts'
	}

	doc_2 = {
		title: "已上传的文件列表",
		intro: `使用 nzFileList 设置已上传的内容。`,
		htmlPath: './docs/components/upload-doc/upload-doc-2/upload-doc-2.component.html',
		tsPath: './docs/components/upload-doc/upload-doc-2/upload-doc-2.component.ts'
	}

	doc_3 = {
		title: "过滤器",
		intro: `使用 nzFilter 对列表进行过滤控制，可以实现各种自定义功能，以下演示三种情况：(1) 上传列表数量的限制。(2) 读取远程路径并显示链接。(3) 按照服务器返回信息筛选成功上传的文件。`,
		htmlPath: './docs/components/upload-doc/upload-doc-3/upload-doc-3.component.html',
		tsPath: './docs/components/upload-doc/upload-doc-3/upload-doc-3.component.ts'
	}

	doc_4 = {
		title: "图片列表样式",
		intro: `上传文件为图片，可展示本地缩略图。IE8/9 不支持浏览器本地缩略图展示（Ref），可以写 thumbUrl 属性来代替。`,
		htmlPath: './docs/components/upload-doc/upload-doc-4/upload-doc-4.component.html',
		tsPath: './docs/components/upload-doc/upload-doc-4/upload-doc-4.component.ts'
	}
	doc_5 = {
		title: "用户头像",
		intro: `点击上传用户头像，并使用 beforeUpload 限制用户上传的图片格式和大小。`,
		htmlPath: './docs/components/upload-doc/upload-doc-5/upload-doc-5.component.html',
		tsPath: './docs/components/upload-doc/upload-doc-5/upload-doc-5.component.ts'
	}

	doc_6 = {
		title: "照片墙",
		intro: `用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后，上传按钮消失。`,
		htmlPath: './docs/components/upload-doc/upload-doc-6/upload-doc-6.component.html',
		tsPath: './docs/components/upload-doc/upload-doc-6/upload-doc-6.component.ts'
	}

	doc_7 = {
		title: "拖拽上传",
		intro: `把文件拖入指定区域，完成上传，同样支持点击上传。设置 nzMultiple 后，在 IE10+ 可以一次上传多个文件。`,
		htmlPath: './docs/components/upload-doc/upload-doc-7/upload-doc-7.component.html',
		tsPath: './docs/components/upload-doc/upload-doc-7/upload-doc-7.component.ts'
	}
	doc_8 = {
		title: "手动上传",
		intro: `beforeUpload 返回 false 后，手动上传文件。`,
		htmlPath: './docs/components/upload-doc/upload-doc-8/upload-doc-8.component.html',
		tsPath: './docs/components/upload-doc/upload-doc-8/upload-doc-8.component.ts'
	}
	constructor() {}

	ngOnInit() {

	}

	ngOnDestroy() {

	}
	changeDEMO = `
  {
    file: { /* ... */ },
    fileList: [ /* ... */ ],
    event: { /* ... */ },
  }
  `;
  uploadFileDEMO = `
  {
    uid: 'uid',      // 文件唯一标识
    name: 'xx.png'   // 文件名
    status: 'done', // 状态有：uploading done error removed
    response: '{"status": "success"}' // 服务端响应内容
 }`;
}