import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core';
import { JsonPipe } from '@angular/common';
import { Answer, Backgroud, Frame, getDefaultExercises, getDefaultItem } from '../bean/ObjBean';
import {NzMessageService} from 'ng-zorro-antd';

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

  // 储存数据用
  saveKey = "FT-01";
  // 储存对象
  item;
  isShowPicPanel = false;
  curGroup = null;
  skeJsonData = {};
  texJsonData = {};
  texPngData = {};
  animaPanelVisible = false;
  isSkeJsonLoading = false;
  isTexJsonLoading = false;
  isTexPngLoading = false;

  uploadUrl;
  uploadData;

  constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef,private nzMessageService: NzMessageService) {
    this.uploadUrl = (<any> window).courseware.uploadUrl();
    this.uploadData = (<any> window).courseware.uploadData();

    window['air'].getUploadCallback = (url, data) => {
      this.uploadUrl = url;
      this.uploadData = data;
    };
  }

  ngOnInit() {

    this.item = getDefaultItem();

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

      if (data) {
        this.item = data;
      }
      this.item.exercisesArr[0].hotZoneItemArr[0].picX= 0;
      this.init();
      this.changeDetectorRef.markForCheck();
      this.changeDetectorRef.detectChanges();
      this.refresh();

    }, this.saveKey);
  }

  ngOnChanges() {
  }

  ngOnDestroy() {
  }

  init() {
    console.log(JSON.stringify(this.item));

    for(let i = 0; i < this.item.exercisesArr.length; ++ i ){
      let exercises = this.item.exercisesArr[i];

      if(!exercises.bg){
        exercises.bg = new Backgroud();
      }
    }
  }


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

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

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

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

  onWordAudioUploadSuccess(e, idx) {
    this.item.wordList[idx].audio = e.url;
    this.save();
  }

  onBackWordAudioUploadSuccess(e, idx) {
    this.item.wordList[idx].backWordAudio = e.url;
    this.save();
  }

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

    this.refresh();
    console.log('this.item = ' + JSON.stringify(this.item));
  }

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

  /**
   * 添加练习
   */
  addExercisesItem() {

    let exercises = getDefaultExercises();

    this.item.exercisesArr.push(exercises);

    this.save();
  }

  delExercisesItem(index) {
    if (index !== -1) {
      this.item.exercisesArr.splice(index, 1);
      this.save();
    }
  }

  addAnswer(exercises, key){
    let answer = new Answer();

    exercises[key] = [...exercises[key], answer];

    this.save();

  }

  delAnswer(exercises, key, index) {
    if (index !== -1) {
      exercises[key].splice(index, 1);
      exercises[key] = [...exercises[key]];
      this.save();
    }
  }

  radioChange(e, exercises, answer){

    //如果正确答案，则将其它答案置成否
    if( e == '1'){
      let answers = exercises.answers;

      for(let m = 0; m < answers.length; ++ m){
        if(answers[m] == answer){
          continue;
        }

        answers[m].isRight = '0';
      }

      exercises['answers'] = [...exercises['answers']];
    }

    this.save();
  }


  saveData(e, i) {
    console.log('savedata e:', e);

    this.item.exercisesArr[i].bg = e.bgItem;
    this.item.exercisesArr[i].hotZoneItemArr = e.hotZoneItemArr;
    this.save();
  }

  handleOk() {
    this.isShowPicPanel = false;

  }

  handleCancel() {
    this.isShowPicPanel = false;
  }

  setAnimaBtnClick(group) {

    console.log(' in setAnimaBtnClick');
    this.curGroup = group;
    const {skeJsonData, texJsonData, texPngData} = group;

    this.skeJsonData = skeJsonData || {};
    this.texJsonData = texJsonData || {};
    this.texPngData = texPngData || {};

    this.animaPanelVisible = true;

    this.refresh();
  }

  animaPanelCancel() {
    this.animaPanelVisible = false;

  }

  animaPanelOk() {

    this.animaPanelVisible = false;

    this.setItemDragonBoneData(this.curGroup);
    this.save();
  }

  setItemDragonBoneData(item) {
    item['skeJsonData'] = this.skeJsonData;
    item['texJsonData'] = this.texJsonData;
    item['texPngData'] = this.texPngData;
  }

  skeJsonHandleChange(e) {
    
    switch (e.type) {
      case 'start':
        this.isSkeJsonLoading = true;
        break;

      case 'success':
        this.skeJsonData['url'] = e.file.response.url;
        this.skeJsonData['name'] = e.file.name;
        this.nzMessageService.success('上传成功');
        this.isSkeJsonLoading = false;
        break;

      case 'progress':
        break;
    }
  }

  texJsonHandleChange(e) {
    
    switch (e.type) {
      case 'start':
        this.isTexJsonLoading = true;
        break;

      case 'success':
        this.texJsonData['url'] = e.file.response.url;
        this.texJsonData['name'] = e.file.name;
        this.nzMessageService.success('上传成功');
        this.isTexJsonLoading = false;
        break;

      case 'progress':
        break;
    }
  }

  texPngHandleChange(e) {
    
    switch (e.type) {
      case 'start':
        this.isTexPngLoading = true;
        break;

      case 'success':
        this.texPngData['url'] = e.file.response.url;
        this.texPngData['name'] = e.file.name;
        this.nzMessageService.success('上传成功');
        this.isTexPngLoading = false;
        break;

      case 'progress':
        break;
    }
  }
}