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

@Component({
  template: `
    <div *ngIf="titleDatas3">
      <dc-title #demoTitle [titleDatas]="titleDatas3" [titleOption]="titleOption2" [hasBottomLine]="true"></dc-title>
    </div>
    <div *ngIf="titleDatas">
      <dc-title #demoTitle [titleDatas]="titleDatas" [titleOption]="titleOption"></dc-title>
    </div>
    <div *ngIf="titleDatas2">
      <dc-title [titleDatas]="titleDatas2" [titleOption]="titleOption2"></dc-title>
    </div>
  `,
  styleUrls: []
})
export class DemoTitleComponent implements OnInit {

  constructor() {

  }

  titleDatas;
  titleDatas2;
  titleDatas3;
  titleOption;
  titleOption2;
  @ViewChild('demoTitle') demoTitle;

  ngOnInit() {
    this.settitleData();
  }


  settitleData() {
    this.titleDatas = [
      {
        title: 'demo1',
        icon: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAYAAACAl21KAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNTg0QzUwMjI3NEExMUU4OENGMkJGOTlGMTY4RkVCQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNTg0QzUwMzI3NEExMUU4OENGMkJGOTlGMTY4RkVCQiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU1ODRDNTAwMjc0QTExRTg4Q0YyQkY5OUYxNjhGRUJCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU1ODRDNTAxMjc0QTExRTg4Q0YyQkY5OUYxNjhGRUJCIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YOXzmQAAAONJREFUeNpiZGg8w4AHcADxDwYC4H+dMQMLiGYgHzDCGCzoAiQAFAcwMVAJUM0gFnzOJRQu+AxiHPUaqqamsxR5jRFfGP3HgmGAE4gbgfgOEP+E0o1QcQyDGLFgEOAC4j1ArAnE/kDMC6U1oOJcLER6owKInwFxGJLLQZaEA/EqIC4j1qAoIA7AIQfy3iZiDZIF4ls4kgo7EMsQG2uPgVgVR1iCxJ8Sa9ByIG7AIVcHxIuZ8EQ7cvS3A7EUEK+AxhwrlAbxZYC4kwlHlKNH/zcgdgHim0C8GYi/QOmbUPFvAAEGAPNEMcNC3dOzAAAAAElFTkSuQmCC`,
        notify: '120',
        notifyColor: '#f95f5b',
        select: true,
        data: {test: 1}
      },
      {
        title: '我点不动',
        icon: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAUCAYAAABvVQZ0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxMDRFOTMxQzI3NEIxMUU4QkM3OUJGQ0U2RTY5ODIwMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxMDRFOTMxRDI3NEIxMUU4QkM3OUJGQ0U2RTY5ODIwMSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjEwNEU5MzFBMjc0QjExRThCQzc5QkZDRTZFNjk4MjAxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjEwNEU5MzFCMjc0QjExRThCQzc5QkZDRTZFNjk4MjAxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+1AOK4gAAANVJREFUeNpiZGg8w4AHcADxDwYC4H+dMZhmAbEZyAeMyBwWbIJEAgxHMDFQEVDVMBZCTicUTvgMYxz1Jk29yUjIsP9YMDrwBOJnUOxJqTfnAnEYlL0KiKVwGUZqdgJbzth0lmzDUoB4NRD/BeJkfN4kBIKBuBiI+aH8KiDmBOK1pBrWBMQRQFwAxIegYnZAPBGIjYC4mljDrIA4HogNgfgdkvg2ID4KxKASdhsLESkfFMh5QNyMZhAPELNC2ZNBLmYkUGzDwCsgFkUT+wLEv5H47wACDABG+ylvkQEwmgAAAABJRU5ErkJggg==`,
        notify: '12',
        notifyColor: '#ec8c45',
        select: false
      }
    ];
    this.titleDatas2 = [
      {
        title: 'demo1',
        icon: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAYAAACAl21KAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNTg0QzUwMjI3NEExMUU4OENGMkJGOTlGMTY4RkVCQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNTg0QzUwMzI3NEExMUU4OENGMkJGOTlGMTY4RkVCQiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU1ODRDNTAwMjc0QTExRTg4Q0YyQkY5OUYxNjhGRUJCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU1ODRDNTAxMjc0QTExRTg4Q0YyQkY5OUYxNjhGRUJCIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YOXzmQAAAONJREFUeNpiZGg8w4AHcADxDwYC4H+dMQMLiGYgHzDCGCzoAiQAFAcwMVAJUM0gFnzOJRQu+AxiHPUaqqamsxR5jRFfGP3HgmGAE4gbgfgOEP+E0o1QcQyDGLFgEOAC4j1ArAnE/kDMC6U1oOJcLER6owKInwFxGJLLQZaEA/EqIC4j1qAoIA7AIQfy3iZiDZIF4ls4kgo7EMsQG2uPgVgVR1iCxJ8Sa9ByIG7AIVcHxIuZ8EQ7cvS3A7EUEK+AxhwrlAbxZYC4kwlHlKNH/zcgdgHim0C8GYi/QOmbUPFvAAEGAPNEMcNC3dOzAAAAAElFTkSuQmCC`,
        notify: '120',
        notifyColor: '#f95f5b',
        select: true,
        data: {test: 1}
      },
      {
        title: 'demo2',
        icon: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAUCAYAAABvVQZ0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxMDRFOTMxQzI3NEIxMUU4QkM3OUJGQ0U2RTY5ODIwMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxMDRFOTMxRDI3NEIxMUU4QkM3OUJGQ0U2RTY5ODIwMSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjEwNEU5MzFBMjc0QjExRThCQzc5QkZDRTZFNjk4MjAxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjEwNEU5MzFCMjc0QjExRThCQzc5QkZDRTZFNjk4MjAxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+1AOK4gAAANVJREFUeNpiZGg8w4AHcADxDwYC4H+dMZhmAbEZyAeMyBwWbIJEAgxHMDFQEVDVMBZCTicUTvgMYxz1Jk29yUjIsP9YMDrwBOJnUOxJqTfnAnEYlL0KiKVwGUZqdgJbzth0lmzDUoB4NRD/BeJkfN4kBIKBuBiI+aH8KiDmBOK1pBrWBMQRQFwAxIegYnZAPBGIjYC4mljDrIA4HogNgfgdkvg2ID4KxKASdhsLESkfFMh5QNyMZhAPELNC2ZNBLmYkUGzDwCsgFkUT+wLEv5H47wACDABG+ylvkQEwmgAAAABJRU5ErkJggg==`,
        notify: '12',
        notifyColor: '#ec8c45',
        select: false
      }
    ];
    setTimeout(() => {
      this.titleDatas2.push({
        title: 'demo3',
        icon: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAUCAYAAABvVQZ0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxMDRFOTMxQzI3NEIxMUU4QkM3OUJGQ0U2RTY5ODIwMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxMDRFOTMxRDI3NEIxMUU4QkM3OUJGQ0U2RTY5ODIwMSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjEwNEU5MzFBMjc0QjExRThCQzc5QkZDRTZFNjk4MjAxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjEwNEU5MzFCMjc0QjExRThCQzc5QkZDRTZFNjk4MjAxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+1AOK4gAAANVJREFUeNpiZGg8w4AHcADxDwYC4H+dMZhmAbEZyAeMyBwWbIJEAgxHMDFQEVDVMBZCTicUTvgMYxz1Jk29yUjIsP9YMDrwBOJnUOxJqTfnAnEYlL0KiKVwGUZqdgJbzth0lmzDUoB4NRD/BeJkfN4kBIKBuBiI+aH8KiDmBOK1pBrWBMQRQFwAxIegYnZAPBGIjYC4mljDrIA4HogNgfgdkvg2ID4KxKASdhsLESkfFMh5QNyMZhAPELNC2ZNBLmYkUGzDwCsgFkUT+wLEv5H47wACDABG+ylvkQEwmgAAAABJRU5ErkJggg==`,
        notify: '12',
        notifyColor: '#ec8c45',
        select: false
      });
      this.titleDatas[0].notify = 111;
    }, 5000);
    this.titleDatas3 = [
      {
        title: 'demo1',
        icon: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAYAAACAl21KAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNTg0QzUwMjI3NEExMUU4OENGMkJGOTlGMTY4RkVCQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNTg0QzUwMzI3NEExMUU4OENGMkJGOTlGMTY4RkVCQiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU1ODRDNTAwMjc0QTExRTg4Q0YyQkY5OUYxNjhGRUJCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU1ODRDNTAxMjc0QTExRTg4Q0YyQkY5OUYxNjhGRUJCIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YOXzmQAAAONJREFUeNpiZGg8w4AHcADxDwYC4H+dMQMLiGYgHzDCGCzoAiQAFAcwMVAJUM0gFnzOJRQu+AxiHPUaqqamsxR5jRFfGP3HgmGAE4gbgfgOEP+E0o1QcQyDGLFgEOAC4j1ArAnE/kDMC6U1oOJcLER6owKInwFxGJLLQZaEA/EqIC4j1qAoIA7AIQfy3iZiDZIF4ls4kgo7EMsQG2uPgVgVR1iCxJ8Sa9ByIG7AIVcHxIuZ8EQ7cvS3A7EUEK+AxhwrlAbxZYC4kwlHlKNH/zcgdgHim0C8GYi/QOmbUPFvAAEGAPNEMcNC3dOzAAAAAElFTkSuQmCC`,
        notify: '120',
        notifyColor: '#f95f5b',
        select: true,
      }
    ];
    this.titleOption = {
      beforeChange: (item) => {
        setTimeout(() => {
          this.demoTitle.selectTitle(item);
        }, 5000);
        return false;
      }
    };
    this.titleOption2 = {
      beforeChange: (item) => {
        return true;
      }
    };
  }
}