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



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

  picArr = []; 
  _item: any; 
  saveKey = 'ssy003'; 
  radioValue;

  side
  
  // @Input()
  set item(item) {
    this._item = item;
    // this.init();

  }
  get item() {
    return this._item;
  }

  @Output()
  update = new EventEmitter();



  constructor(private appRef: ApplicationRef) {

  }


  ngOnInit() {

    this.item = {};
    this.item.contentObj = {};

    const getData = (<any> window).courseware.getData;
    getData((data) => {

      if (data) {
        this.item = data;
      } else {
        this.item = {};
      }

      if ( !this.item.contentObj ) {
        this.item.contentObj = {};
      }

      console.log('~data:', data);
 
      this.init();
      this.refresh();

      
    //  this.initDefaultData();



    }, this.saveKey);

     this.initData();
  }
  ngOnChanges() {

  }

  ngOnDestroy() {
  }

  


  init() {
   

    if (this.item.contentObj.picArr) {
      this.picArr = this.item.contentObj.picArr;
    } else {
      this.picArr = this.getDefaultPicArr();
      this.item.contentObj.picArr = this.picArr;
    }

    console.log('item:' , this.item);
    // this.picArr = this.getDefaultPicArr();
    // this.item.contentObj.picArr = this.picArr;
    // console.log('this.item:;', this.picArr);

  }

  cardItemData(){
    return {   
      title: "",
      pic_url: "",
      audio_url: ""
    
    };
  }
  sideA(){
    this.item.sideA=1;
    this.item.sideB=0;

    this.save();
    console.log('radiovalue:' , this.radioValue);
    console.log('item:' , this.item);

  }
  sideB(){
    this.item.sideB=1;
    this.item.sideA=0;
    this.save();
    console.log('item:' , this.item);
  }

  getDefaultPicArr() {
    let arr = []; 
    return arr;
  }



  initData() {
    
    this.picArr=[];
    this.item.contentObj.picArr = this.picArr;

    for(let i=1;i<=6;i++){
      let item = this.cardItemData();  
      this.picArr.push(item);
    }
    this.saveItem();
    console.log('init~data:', this.picArr);



  }


  onImageUploadSuccessByItem(e, item) {
    item.pic_url = e.url;
    this.save(); 
  }
 
  onAudioUploadSuccessByItem(e, item) { 
    item.audio_url = e.url; 
    this.save();
  }
 


  radioClick(it, radioValue) {
    it.radioValue = radioValue;

    this.saveItem();
  }

  clickCheckBox() {
    console.log(' in clickCheckBox');
    this.saveItem();
  }


 
  saveItem() {

    console.log(' in saveItem');
    // this.update.emit(this.item);
    this.save();
  }
 
  save() {
    (<any> window).courseware.setData(this.item, null, this.saveKey);
    console.log('side'+this.item);
 
    this.refresh();
  }

  refresh() {
    setTimeout(() => {
      this.appRef.tick();
    }, 1);
    console.log("===========================================================================================");
  }

}

