import { Component, OnInit } from '@angular/core';
import { Code } from './../../code/dialog';

@Component({
  templateUrl: './dialog.component.html'
})
export class DialogComponent implements OnInit {

	code = Code;
	parameters: any[];
	eventHeader: any[];
	eventValue: any[];
	styleHeader: any[];
	styleValue: any[];
	headers: any[];
	display: boolean = false;

    showDialog() {
        this.display = true;
    }

	constructor() { }

	ngOnInit() {
		
		this.headers = [
			{name : "名字"},
			{name : "类型"},
			{name : "默认"},
			{name : "描述"}
		];

		this.parameters = [
	        {name: "header",type: "string",default: "null",des: "对话框的标题文本。"},
	        {name: "draggable",type: "boolean",default: "true",des: "启用拖动以使用页眉更改位置。"},
	        {name: "resizable",type: "boolean",default: "true",des: "允许调整内容的大小。"},
	        {name: "minWidth",type: "number",default: "150",des: "可调整大小对话框的最小宽度。"},
	        {name: "minHeight",type: "number",default: "150",des: "可调整大小对话框的最小高度。"},
	        {name: "width",type: "int",default: "300",des: "对话框宽度。"},
	        {name: "height",type: "int",default: "auto",des: "对话框高度。"},
	        {name: "contentStyle",type: "object",default: "null",des: "内容部分的样式。"},
	        {name: "visible",type: "boolean",default: "false",des: "指定对话框的可见性。"},
	        {name: "modal",type: "boolean",default: "false",des: "定义对话框显示时是否应阻止背景。"},
	        {name: "closeOnEscape",type: "boolean",default: "true",des: "如果按下转义键应该隐藏对话框。"},
	        {name: "dismissableMask",type: "boolean",default: "false",des: "指定单击模态背景是否应该隐藏对话框。"},
	        {name: "rtl",type: "boolean",default: "false",des: "启用时对话框以RTL方向显示。"},
	        {name: "closable",type: "boolean",default: "true",des: "向头添加一个关闭图标来隐藏对话框。"},
	        {name: "responsive",type: "boolean",default: "true",des: "在响应模式下，对话框将自身调整为屏幕宽度。"},
	        {name: "breakpoint",type: "number",default: "640",des: "在响应模式下，对话框显示的最大宽度是100%。"},
	        {name: "appendTo",type: "any",default: "null",des: "目标元素附加对话框，有效值为'体'或局部NG-T。"},
	        {name: "style",type: "string",default: "null",des: "组件行内样式。"},
	        {name: "styleClass",type: "string",default: "null",des: "组件的样式类。"},
	        {name: "showHeader",type: "boolean",default: "true",des: "是否显示页眉。"},
	        {name: "positionLeft",type: "number",default: "null",des: "对话框的左坐标值。"},
	        {name: "positionTop",type: "number",default: "null",des: "对话框的顶部坐标值。"},
	        {name: "baseZIndex",type: "number",default: "0",des: "用于分层的基ZQUAL值。"},
	        {name: "autoZIndex",type: "boolean",default: "true",des: "是否自动管理分层。"},
	        {name: "minX",type: "number",default: "0",des: "拖动中对话框左坐标的最小值。"},
	        {name: "minY",type: "number",default: "0",des: "拖动中对话框顶部坐标的最小值。"},
	        {name: "autoAlign",type: "boolean",default: "false",des: "是否在动态内容更改对话框高度之后重新定位。"},
	    ];

		this.eventHeader = [
			{name : "名字"},
			{name : "参数"},
			{name : "描述"}
		];

		this.eventValue = [
			{name : "onShow",param : "事件：事件对象",event :"当对话框显示时调用回调。" },
			{name : "onHide",param : "事件：事件对象",event :"当对话框被隐藏时调用回调。" }
		];

		this.styleValue = [
			{name : "名字"},
			{name : "元素"},
		]

		this.styleValue = [
			{name : "ui-dialog",el : "容器元素。"},
			{name : "ui-dialog-titlebar",el : "集箱。"},
			{name : "ui-dialog-title",el : "标题元素。"},
			{name : "ui-dialog-titlebar-icon",el : "标题中的图标容器。"},
			{name : "ui-dialog-titlebar-close",el : "关闭图标元素。"},
			{name : "ui-dialog-content",el : "内容元素。"},
			{name : "ui-dialog-footer",el : "页脚元素。"}
		];
	}

}