import { Component, OnDestroy, OnChanges, OnInit, ApplicationRef, ChangeDetectorRef, ViewChild, ElementRef } from '@angular/core';
import { ComponentBase } from './ComponentBase';
import { MetaFormCreator } from './mataFormCreator';
import { NzMessageService } from 'ng-zorro-antd';

let replaceAll = function (str, s1, s2) {
  return str.replace(new RegExp(s1, "gm"), s2);
}
@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent extends ComponentBase implements OnInit, OnChanges, OnDestroy {
  // 储存数据用
  saveKey = "dg29_museum_1";
  item = {
    npcAudioText: "",
    npcAudio: "",
    npcAudioName: "",
    npcAudioEnd: "",
    npcAudioEndName: "",

    video: '',//展示用视频部分

    questions: [],
    questionText: "",
  };

  constructor(public nzMessageService: NzMessageService, public appRef: ApplicationRef, public changeDetectorRef: ChangeDetectorRef) {
    super(appRef, changeDetectorRef);
  }
  onVideoUploaded(e) {
    this.item.video = e.url
    this.save();
  }
  isVisible = false;
  deleteTitle = "是否删除题目";
  deleteCallback = function () { };
  openDelete(title, callback) {
    this.deleteCallback = callback;
    this.deleteTitle = title;
    this.isVisible = true;
  }
  handleCancel() {
    this.isVisible = false;
  }
  handleOk() {
    this.deleteCallback && this.deleteCallback();
    this.handleCancel();
  }
  init(): void {
    console.log(new MetaFormCreator().create());

    if (this.item.questions.length == 0) {
      this.addQuestion();
    }
  }

  // removeoption(i, j) {
  //   this.openDelete("确定删除选项？", () => {
  //     this.item.questions[i].options.splice(j, 1);
  //     this.save();
  //   })
  // }
  // copyoption(i, j) {
  //   let data = this.item.questions[i].options[j];
  //   this.item.questions[i].options.push(JSON.parse(JSON.stringify(data)));
  //   this.save();
  // }

  // addoption(i) {
  //   this.item.questions[i].options.push({
  //     type: "img",
  //     image: "",//展示一个图片
  //     text: "",// 一个标题文字
  //     audio: "",
  //     time: "",
  //     right: false
  //   });
  //   this.save();
  // }



  removeQuestion(idx) {
    this.openDelete("确定删除题目？", () => {
      this.item.questions.splice(idx, 1);
      this.save();
    })
  }

  addQuestion() {
    // 题目自带一堆东西不用添加选项部分
    this.item.questions.push({
      img: '',//展示用图片
      title: '',//大标题
      keyword: '',// 关键字，逗号隔开
      startAudio: '',// 开始音频
      startAudioName: '',
      rightAudio: '',// 正确音频
      rightAudioName: '',
      errorAudio: '',// 错误音频
      errorAudioName: '',
    });
    this.save();
  }
  ngChange(i, j) {
    this.save();
  }

  saveHotZone(group, e) {
    console.log('e: ', e);
    const { bgItem, hotZoneItemArr } = e;

    group.bgItem = bgItem;
    group.hotZoneItemArr = hotZoneItemArr;

    this.nzMessageService.success('保存成功');

    this.save();
  }

  changeMain(i, name) {
    let question = this.item.questions[i]
    //输出的数据可以识别到\n的换行符
    let contentMain = question[name + "Text"];
    let contentArr = question[name + "TextArr"] || [];
    let arr = contentMain.split(" ");
    let oldArr = contentArr.concat();
    let contetArr = arr.map(ar => {
      let obj = {
        text: replaceAll(`${ar}`, "\n", "<br/>"),
        block: false,
        check: 1,
      }
      for (let i = 0; i < oldArr.length; i++) {
        if (obj.text == oldArr[i].text) {
          obj.block = oldArr[i].block;
          obj.check = oldArr[i].check;
          oldArr.splice(i, 1);
          break;
        }
      }
      return obj;
    })
    question[name + "TextArr"] = contetArr;
    console.log(contetArr)
    this.save();
  }

  onBlock(item, vis) {
    item.block = vis;
    this.save();
  }


  customRadioChange(e, item, key) {
    item[key] = e;
    this.save();
  }

  onDragonBoneSave(e, item) {
    console.log(e);
    this.save();
  }

}