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

@Component({
  selector: 'mat-demo-select',
  template: `
  <nz-select class="mat-select" style="width: 120px;" [(ngModel)]="selectedOption" [nzPlaceHolder]="'choose option'" nzAllowClear>
    <nz-option
      *ngFor="let option of options"
      [nzLabel]="option.label"
      [nzValue]="option"
      [nzDisabled]="option.disabled">
    </nz-option>
  </nz-select>

  <nz-select class="mat-select" style="width: 120px;" [(ngModel)]="selectedOption" [nzPlaceHolder]="'choose option'" nzDisabled>
    <nz-option
      *ngFor="let option of options"
      [nzLabel]="option.label"
      [nzValue]="option"
      [nzDisabled]="option.disabled">
    </nz-option>
  </nz-select>

  <nz-select class="mat-select" style="width: 200px;"
    [nzMode]="'multiple'"
    [nzPlaceHolder]="'请选择人员'"
    [(ngModel)]="selectedMultipleOption"
    [nzNotFoundContent]="'无法找到'">
    <nz-option
      *ngFor="let option of searchOptions"
      [nzLabel]="option.label"
      [nzValue]="option.value"
      [nzDisabled]="option.disabled">
    </nz-option>
  </nz-select>
  `,
  styleUrls: ['./mat-demo-select.component.less']
})
export class MatDemoSelectComponent implements OnInit {
  options = [];
  selectedOption;
  searchOptions;
  selectedMultipleOption;
  ngOnInit() {
    /*模拟服务器异步加载*/
    setTimeout(_ => {
      this.options = [
        { value: 'jack', label: 'Jack' },
        { value: 'lucy', label: 'Lucy' },
        { value: 'disabled', label: 'Disabled', disabled: true }
      ];
      this.selectedOption = this.options[ 0 ];

      this.searchOptions = [
        { value: 'Dandelion', label: '丹德里恩' },
        { value: 'Zoltan ', label: '卓尔坦' },
        { value: 'Priscilla', label: '普西拉' },
        { value: 'Vesemir', label: '维瑟米尔' },
        { value: 'Triss', label: '特莉丝·梅利葛德' },
        { value: 'Eredin', label: '艾瑞汀' }
      ];
      this.selectedMultipleOption = [ 'tom' ];
    }, 100);
  }
}