import { Component, OnInit } from '@angular/core';
import { Code } from './../../code/dropDown';
import {City} from "../../component/ing/common/city";

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

  	code = Code;
  	cities: City[];
  	cars: any[];
  	selectedCity: City;
  	selectedCar1: string;
  	selectedCar2: string = 'BMW';
	parameters: any[];
	eventHeader: any[];
	eventValue: any[];
	styleHeader: any[];
	styleValue: any[];
	items: any[]; 
	headers: any[];
	selectedCar3: string;
    groupedCars: any[];
    methodsHeader: any[];
    methodsValue: any[];

  constructor() { }

  ngOnInit() {
  	this.cities = [
        {name: 'New York', code: 'NY'},
        {name: 'Rome', code: 'RM'},
        {name: 'London', code: 'LDN'},
        {name: 'Istanbul', code: 'IST'},
        {name: 'Paris', code: 'PRS'}
    ];
    this.cars = [
        {label: 'Audi', value: 'Audi'},
        {label: 'BMW', value: 'BMW'},
        {label: 'Fiat', value: 'Fiat'},
        {label: 'Ford', value: 'Ford'},
        {label: 'Honda', value: 'Honda'},
        {label: 'Jaguar', value: 'Jaguar'},
        {label: 'Mercedes', value: 'Mercedes'},
        {label: 'Renault', value: 'Renault'},
        {label: 'VW', value: 'VW'},
        {label: 'Volvo', value: 'Volvo'}
    ];
  	this.items = [
        {label: 'Update', icon: 'fa ion-refresh', command: () => {
            console.log(1)
        }},
        {label: 'Delete', icon: 'fa ion-close', command: () => {
            console.log(2)
        }},
        {label: 'Angular.io', icon: 'fa-link', url: 'http://angular.io'},
        {label: 'Theming', icon: 'fa-paint-brush', routerLink: ['/theming']}
    ];
  	this.parameters = [
  		{name: "options",type: "array",default: "null",des: "一个对象数组作为选项显示。"},
  		{name: "optionLabel",type: "string",default: "null",des: "当任意一个对象而不是SelectItems作为选项，可以使用标签名字作为选项"},
        {name: "name",type: "string",default: "200px",des: "输入元素的名字"},
        {name: "scrollHeight",type: "string",default: "false ",des: "可是窗口的过度，如果指定列表超过了该高度，就出现滚动条。"},
        {name: "style",type: "string",default: "null ",des: "元素行内样式"},
        {name: "panelStyle",type: "string",default: "null ",des: "覆盖面板元素class样式"},
        {name: "filter",type: "boolean",default: "false",des: "该属性被指定，显示一个输入框当按键抬起的时候根据输入内容去过滤"},
        {name: "filterBy",type: "string",default: "null",des: "当启用过滤时，FieldBy决定哪个字段或哪些字段去过滤"},
        {name: "filterPlaceholder",type: "string",default: "null",des: "当输入框是空的时候，输入框默认显示文字"},
        {name: "autoWidth",type: "boolean",default: "true",des: "根据选项宽度计算宽度，为自定义宽度设置为false。"},
  		{name: "required",type: "boolean",default: "false",des: "当存在时，它指定在输入之前必须填写输入字段。"},
        {name: "disabled",type: "boolean",default: "false",des: "当存在时，它指定组件禁用。"},
        {name: "editable",type: "boolean",default: "false ",des: "当存在时，自定义值而不是预定义选项可以输入。"},
        {name: "appendTo",type: "any",default: "null",des: "目标元素附加覆盖，有效值为'body'或局部ng-template。"},
        {name: "tabindex",type: "number",default: "null ",des: "列表中元素的索引"},
        {name: "placeholder",type: "string",default: "null",des: "当没有选项被选择的时候显示的默认文字。"},
        {name: "inputId",type: "string",default: "null",des: "焦点输入的标识符，以匹配为下拉定义的标签。"},
        {name: "dataKey",type: "string",default: "null",des: "唯一标识选项中的值的属性。"},
        {name: "lazy",type: "boolean",default: "true",des: "启用后，当覆盖面板可见时，为选项创建DOM。"},
  		{name: "autofocus",type: "boolean",default: "false",des: "当存在时，它指定组件应该自动获得焦点。"},
        {name: "resetFilterOnHide",type: "boolean",default: "false",des: "隐藏下拉菜单时清除筛选器值"},
        {name: "dropdownIcon",type: "string",default: "fa ion-arrow-down-bn",des: "下拉图标的图标类"},
        {name: "emptyFilterMessage",type: "string",default: "没有找到结果 ",des:"当过滤不返回任何结果时显示文本。"},
        {name: "autoDisplayFirst",type: "boolean",default: "true",des: "如果没有定义占位符，是否将第一项显示为标签。"},
        {name: "group",type: "boolean",default: "false",des: "当提供嵌套选项时，是否显示分组为分组。"},
        {name: "showClear",type: "boolean",default: "false",des: "启用后，将显示一个清除图标以清除该值。"}
    ];
    
    this.headers = [
        {name : "名字"},
        {name : "类型"},
        {name : "默认"},
        {name : "描述"}
    ];

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

    this.eventValue = [
    	{name : "onClick",param : "事件：单击事件",event :"单击组件时调用的回调。" },
    	{name : "onChange",param : "1.事件：浏览器事件 2.事件的值：选择的选项",event :"当下拉值改变时调用回调。" },
    	{name : "onFocus",param : "事件：浏览器事件",event :"当下拉得到焦点时回调来调用。" },
    	{name : "onBlur",param : "事件：浏览器事件",event :"当下拉丢失焦点时调用回调。" }
    ];

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

    this.methodsValue = [
    	{name : "resetFilter",param:"-",el : "重置过滤。"},
    	{name : "focus",param:"-",el : "应用焦点。"}
    ];
    this.styleHeader = [
    	{name : "名字"},
        {name : "元素"}
    ];

    this.styleValue = [
    	{name : "ui-dropdown",el : "容器元素。"},
    	{name : "ui-dropdown-clearable",el : "当SeCub打开时容器元素。"},
    	{name : "ui-dropdown-label",el : "元素以显示选定选项的标签。"},
    	{name : "ui-dropdown-trigger",el : "图标元素。"},
    	{name : "ui-dropdown-panel",el : "图标元素。"},
    	{name : "ui-dropdown-items-wrapper",el : "项目列表的包装元素。"},
    	{name : "ui-dropdown-items",el : "列出项目的元素。"},
    	{name : "ui-dropdown-item",el : "列表中的一个项目。"},
    	{name : "ui-dropdown-filter-container",el : "过滤器输入容器。"},
    	{name : "ui-dropdown-filter",el : "过滤元素。"},
    	{name : "ui-dropdown-open",el : "堆叠可见时的容器元素。"}
    ];
    this.groupedCars = [
        {
            label: 'Germany', value: 'germany.png', 
            items: [
                {label: 'Audi', value: 'Audi'},
                {label: 'BMW', value: 'BMW'},
                {label: 'Mercedes', value: 'Mercedes'}
            ]
        },
        {
            label: 'USA', value: 'usa.png', 
            items: [
                {label: 'Cadillac', value: 'Cadillac'},
                {label: 'Ford', value: 'Ford'},
                {label: 'GMC', value: 'GMC'}
            ]
        },
        {
            label: 'Japan', value: 'japan.png', 
            items: [
                {label: 'Honda', value: 'Honda'},
                {label: 'Toyota', value: 'Toyota'}
            ]
        }
    ];
  }

}