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';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent extends ComponentBase implements OnInit, OnChanges, OnDestroy {
  // 储存数据用
  saveKey = "dg_book_voice_1002";

  /*
  整体配置部分解析

  1.竖版 每一个画面  一页内容  测评多个内容

  单页xN   
  --热区x1 热区内容为音频播放 （游戏内可点击阅读对应点位）
  --单词卡xN  单词内容，单词音频 （游戏内测评卡，提示音，录音）
  
  2.横版 每一个页面  两页内容  测评多个内容 冲突点，单词卡是跟着什么在走， 每两页显示一组 还是  每页都一组

  */


  customTypeGroupArr = [
    {
      name: '发音区块',
      rect: true,
      audio: true,
    },
  ]

  item = {
    questions: [],
  };

  constructor(public nzMessageService: NzMessageService, public appRef: ApplicationRef, public changeDetectorRef: ChangeDetectorRef) {
    super(appRef, changeDetectorRef);
  }
  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: "",
      audio: "",
      text: "",
      time: "",
      right: false
    });
    this.save();
  }

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

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

  copyQuestion(idx) {
    let data = this.item.questions[idx]
    this.item.questions.push(JSON.parse(JSON.stringify(data)));
    this.save();
  }
  addQuestion() {
    this.item.questions.push({
      leftPage: {
        bgItem: "",
        hotZoneItemArr: [],
      },
      rightPage: {
        bgItem: "",
        hotZoneItemArr: [],
      },
      options: [],
    });
    this.save();
  }
  ngChange(i, j) {
    this.save();
  }

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

    question.bgItem = bgItem;
    question.hotZoneItemArr = hotZoneItemArr;

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

    this.save();
  }

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

  dataSave() {
    this.save();
  }
}