import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core';
import { getDefaultLetter, getDefaultSentence } from '../bean/SentenceBean';
import { getDefaultTile } from '../bean/TitleBean';



@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit, OnChanges, OnDestroy {

  // 储存数据用
  saveKey = "YM5-17";
  // 储存对象
  item;

  indexPanelVisible = false;

  curSentence;

  renderTo = "";

  hotZoneItemArr = [];

  constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) {

  }


  ngOnInit() {

    this.item = {};

    this.item.title = getDefaultTile();

    this.item.hotZoneItemArr = [];

    this.item.sentenceArr = [];

    this.curSentence = {};

    // 获取存储的数据
    (<any>window).courseware.getData((data) => {

      if (data) {
        this.item = data;
      }
      console.log('data:' , data);
      this.init();
      this.changeDetectorRef.markForCheck();
      this.changeDetectorRef.detectChanges();
      this.refresh();

    }, this.saveKey);

  }


  ngOnChanges() {
  }

  ngOnDestroy() {
  }



  init() {
    if (!this.item.title) {
      this.item.title = getDefaultTile();
    }

    if (!this.item.hotZoneItemArr) {
      this.item.hotZoneItemArr = [];
    }

    if (!this.item.sentenceArr) {
      this.item.sentenceArr = [];
    }

  }


  /**
   * 储存图片数据
   * @param e
   */
  onImageUploadSuccess(e, item, key) {

    item[key] = e.url;
    this.save();
  }

  /**
   * 储存音频数据
   * @param e
   */
  onAudioUploadSuccess(e, item, key) {

    item[key] = e.url;
    this.save();
  }


  saveData(e, item) {

    const { bgItem, hotZoneItemArr } = e;

    item.bgItem = bgItem;

    item.hotZoneItemArr = hotZoneItemArr;

    let sentenceArr = item.sentenceArr;

    let tempArr = [];

    for(let i = 0; i < hotZoneItemArr.length; ++ i){

      let hotZoneItem = hotZoneItemArr[i];

      let sentence = this.find(hotZoneItem.key, sentenceArr);

      tempArr.push(sentence);
    }

    item.sentenceArr = [...tempArr];

    this.save();
  }

  private find(key, sentenceArr){

    let sentence;

    for(let i = 0; i < sentenceArr.length; ++ i){
      if(key === sentenceArr[i].renderTo){
        
        sentence = sentenceArr[i];
        break;
      }
    }

    if(!sentence){
      sentence = getDefaultSentence();
      sentence.renderTo = key;
    }

    return sentence;
  }

  addSentence(item) {
    let sentence = getDefaultSentence();

    item.sentenceArr.push(sentence);

    this.save();
  }

  delSentence(item, index) {
    if (index !== -1) {
      item.sentenceArr.splice(index, 1);

      item.sentenceArr = [...item.sentenceArr];
      this.save();
    }
  }

  /**
   * 储存数据
   */
  save() {
    (<any>window).courseware.setData(this.item, null, this.saveKey);
    this.refresh();
  }

  /**
   * 刷新 渲染页面
   */
  refresh() {
    setTimeout(() => {
      this.appRef.tick();
    }, 1);
  }

  saveContent(item) {

    let val = "";

    if(!item.letterArr){
      item.letterArr = [];
    }

    for (let i = 0; i < item.letterArr.length; ++i) {
      val += item.letterArr[i].val;
    }
   
    //值发生改变，则重新处理数据
    if (item.val != val) {
      item.letterArr = [];

      for (let i = 0; i < item.val.length; ++i) {
        let letter = getDefaultLetter();
        letter.val = item.val.charAt(i);
        item.letterArr.push(letter);
      }

    }

    this.save();
  }

  resetSentence(item){
    item.renderTo = "";
    this.save();
  }

  clickLetter(letter, i) {

    if(letter.fontColor == "#000000"){
      letter.fontColor = "#c8171e";
    }
    else{
      letter.fontColor = "#000000";
    }
   
    this.save();
  }

  setIndexBtnClick(item) {

    this.curSentence = item;   

    this.renderTo = item.renderTo;

    this.indexPanelVisible = true;

    this.hotZoneItemArr = [];

    for(let i = 0; i < this.item.hotZoneItemArr.length; ++ i){

      let hotZoneItem = this.item.hotZoneItemArr[i];

      if(item.renderTo == hotZoneItem.key){
        this.hotZoneItemArr.push(hotZoneItem);
        continue;
      }

      let exist = false;

      for(let j = 0; j < this.item.sentenceArr.length; ++ j){

        let sentence = this.item.sentenceArr[j];

        if(sentence.renderTo == hotZoneItem.key){
          exist = true;
          break;
        }
      }

      if(!exist){
        this.hotZoneItemArr.push(hotZoneItem);
      }
    }
    
    this.refresh();
  }

  indexPanelCancel() {
    this.indexPanelVisible = false;

  }

  indexPanelOk() {

    this.indexPanelVisible = false;

    this.curSentence.renderTo = this.renderTo;

    this.save();
  }
}

