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

@Component({
  selector: 'app-editor-demo',
  templateUrl: './editor-demo.component.html',
  styleUrls: ['./editor-demo.component.scss']
})
export class EditorDemoComponent implements OnInit {

  textDetail: string = '<p><span style="font-size:24px;">  资成本比上月增加  195,183.2元</span></p>';
  textDetail2 = '<div>内容部分</div>';
  editor:any;
  height = 900;
  autoresizeMaxHeight = 300;


  comboItems = [
    {id: 1, label: '中华人民共和国', src: 'assets/images/avatar-2.png'},
    {id: 2, label: '俄罗斯', src: 'assets/images/avatar-2.png'},
        {id: 3, label: '菲律宾', src: 'assets/images/avatar-3.png'},
        {id: 4, label: '越南', src: 'assets/images/avatar-4.png'},
        {id: 5, label: '老挝', src: 'assets/images/avatar-5.png'},
        {id: 31, label: '菲律宾', src: 'assets/images/avatar-3.png'},
        {id: 41, label: '越南', src: 'assets/images/avatar-4.png'},
        {id: 51, label: '老挝', src: 'assets/images/avatar-5.png'},
        {id: 32, label: '菲律宾', src: 'assets/images/avatar-3.png'},
        {id: 42, label: '越南', src: 'assets/images/avatar-4.png'},
        {id: 52, label: '老挝', src: 'assets/images/avatar-5.png'},
        {id: 33, label: '菲律宾', src: 'assets/images/avatar-3.png'},
        {id: 43, label: '越南', src: 'assets/images/avatar-4.png'},
        {id: 53, label: '老挝', src: 'assets/images/avatar-5.png'},
  ]

  constructor() { }

  ngOnInit() {
  }

  onBlur(event){
    // console.log('blur',event);
  }

  onFocus(event){
    console.log('focus',event);
  }
  onChange(event){
    console.log('change',event);
  }

  onInit(event){
    console.log('init',event);
    this.editor = event.editor;
  }

  insert(){
    this.editor.execCommand('mceReplaceContent',false, '11111');
  }

  disabled = true;

  formGroup = new FormGroup({
    editor: new FormControl(this.textDetail2)
  })

  changeDisabled(){
    this.disabled = !this.disabled;
    // this.textDetail2 = '';
  }

}