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

@Component({
	templateUrl: './steps.component.html',

})
export class StepsComponent implements OnInit {

	code = Code;
  	items: any[];
    msgs: any[] = [];
    headers: any[];
	parameters: any[];
	styleHeader: any[];
	styleValue: any[];
	eventHeader: any[];
	eventValue: any[];
    
    activeIndex: number = 1;

    ngOnInit() {
        this.items = [
        	{
                label: 'Personal',
                command: (event: any) => {
                    this.activeIndex = 0;
                    this.msgs.length = 0;
                    this.msgs.push({severity:'info', summary:'First Step', detail: event.item.label});
                }
            },
            {
                label: 'Seat',
                command: (event: any) => {
                    this.activeIndex = 1;
                    this.msgs.length = 0;
                    this.msgs.push({severity:'info', summary:'Seat Selection', detail: event.item.label});
                }
            },
            {
                label: 'Payment',
                command: (event: any) => {
                    this.activeIndex = 2;
                    this.msgs.length = 0;
                    this.msgs.push({severity:'info', summary:'Pay with CC', detail: event.item.label});
                }
            },
            {
                label: 'Confirmation',
                command: (event: any) => {
                    this.activeIndex = 3;
                    this.msgs.length = 0;
                    this.msgs.push({severity:'info', summary:'Last Step', detail: event.item.label});
                }
            }
        ];
        this.parameters = [
	        {name: "model",type: "array",default: "null",des: "菜单项的数组。"},
	        {name: "activeIndex",type: "number",default: "0",des: "活动项的索引。"},
	        {name: "readonly",type: "boolean",default: "true",des: "项目是否可点击。"},
	        {name: "style",type: "string",default: "null",des: "组件的内联样式。"},
	        {name: "styleClass",type: "string",default: "null",des: "组件的样式类。"}
	    ];
	    
	    this.headers = [
	        {name : "名字"},
	        {name : "类型"},
	        {name : "默认"},
	        {name : "描述"}
	    ];

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

	    this.eventValue = [
	    	{name :"activeIndexChange",param: "索引：活动步骤项目的索引",event: "当选择新的步骤时调用调用。"}
	    ]

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

	    this.styleValue = [
	    	{name: "ui-steps",el: "容器元素。"},
	    	{name: "ui-steps-item",el: "菜单项元素。"},
	    	{name: "ui-steps-number",el: "菜单项数。"},
	    	{name: "ui-steps-title",el: "菜单项的标签。"}
	    ]
    }

}