import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef, ViewChild, ElementRef } from '@angular/core';

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

  // 储存数据用
  saveKey = "form_for_OP_38_plus";
  // 储存对象
  item;

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

  }

  @ViewChild("itemTextarea", { static: true }) itemTextarea: ElementRef;
  copyData() {
    this.itemTextarea.nativeElement.select();
    document.execCommand("copy");
  }

  addPicture() {
    this.item.images.push({
      img: '',
    });
    this.save();
  }

  removePicture(idx) {
    this.item.images.splice(idx, 1);
    this.save();
  }

  ngOnInit() {
    this.item = {
      // 猫咪开始音频（进入游戏引导语）
      startAudio: '',
      // 猫咪待机音频（游戏中不知所措点击得到提醒）
      waitAudio: '',
      // 猫咪结束音频（所有答案都涂色了，自动播放）
      finishAudio: '',
      // 猫咪结束待机音频（所有答案都涂色了，点击猫咪播放）
      finishWaitAudio: '',
      // 开始读条音频（匹配界面，说完就开始匹配）
      loadingAudio: '',
      // 猫咪点亮笑脸音频（点笑脸界面播放，播完开始可以点笑脸）
      smileAudio: '',
      // 猫咪1个笑脸音频（没有人点亮笑脸，系统自动点亮时播放，或者有一个小朋友点亮时播放）
      smileAudio_1: '',
      // 猫咪2个笑脸音频（有2个小朋友点亮时播放）
      smileAudio_2: '',
      // 猫咪3个笑脸音频（有3个小朋友点亮时播放）
      smileAudio_3: '',
      // 猫咪4个笑脸音频（有4个小朋友点亮时播放）
      smileAudio_4: '',
      // 猫咪5个笑脸音频（有5个小朋友点亮时播放）
      smileAudio_5: '',
      // 猫咪6个笑脸音频（有6个小朋友点亮时播放）
      smileAudio_6: '',
      // 猫咪正确提示音频（用户第一次给任意一个正确答案区域填色时播放）
      rightAudio: '',
      // 猫咪错误提示音频（用户选择了所有正确答案区域以外的区域时播放） 
      wrongAudio: '',
      bg: '',
      images: []
    };

    // 获取存储的数据
    (<any>window).courseware.getData((data) => {
      if (data) {
        this.item = data;
        this.itemStr = JSON.stringify(this.item, null, 4).trim();
        console.log(this.itemStr);
      }
      this.init();
      this.changeDetectorRef.markForCheck();
      this.changeDetectorRef.detectChanges();
      this.refresh();
    }, this.saveKey);
  }

  onClickBtn(idx) {
    this.item.images[idx].right = !this.item.images[idx].right;
    this.save();
  }

  ngOnChanges() {
  }

  ngOnDestroy() {
  }

  init() {

  }

  /**
   * 储存图片数据
   * @param e
   */
  onImageUploadSuccess(e, key, obj = null) {
    if (!obj) {
      obj = this.item;
    }

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

  /**
   * 储存音频数据
   * @param e
   */
  onAudioUploadSuccess(e, key) {
    this.item[key] = e.url;
    this.save();
  }
  itemStr = "";

  load() {
    this.itemStr = this.itemTextarea.nativeElement.value;
    if (this.isJSON(this.itemStr)) {
      this.item = JSON.parse(this.itemStr);
      this.init();
      this.changeDetectorRef.markForCheck();
      this.changeDetectorRef.detectChanges();
      this.refresh();
    }
  }

  isJSON(str) {
    if (typeof str == 'string') {
      try {
        var obj = JSON.parse(str);
        if (typeof obj == 'object' && obj) {
          return true;
        }
        return false;
      } catch (e) {
        return false;
      }
    }
    return false;
  }

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

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