import { Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener, OnChanges, AfterViewInit, ApplicationRef, ChangeDetectorRef } from '@angular/core';
import * as _ from 'lodash';
import { animate, state, style, transition, trigger } from '@angular/animations';




@Component({
  selector: 'app-play',
  templateUrl: './play.component.html',
  styleUrls: ['./play.component.scss'],
  animations: [
    trigger('fadePopup', [
      transition(':enter', [
        style({opacity: 0, transform: 'translate3d(0, -100%, 0)'}),
        animate('0.5s ease-in-out', style({opacity: 1, transform: 'translate3d(0, 0, 0)'}))
      ]),
      transition(':leave', [
        style({opacity: 1, transform: 'translate3d(0, 0, 0)'}),
        animate('0.5s ease-in-out', style({opacity: 0, transform: 'translate3d(0, 100%, 0)'}))
      ]),
    ]),
    trigger('zoomOption', [
      transition(':enter', [
        style({transform: 'scale(0.6)'}),
        animate('0.5s ease-in-out', style({transform: 'scale(1)'}))
      ]),
      transition(':leave', [
        style({transform: 'scale(1)'}),
        animate('0.5s ease-in-out', style({transform: 'scale(0.4)'}))
      ]),
    ]),
  ],
})
export class PlayComponent implements OnInit {

  // 数据
  saveKey = 'daily-conversation';
  optionCol = 6;
  data;
  sid;

  colorArr = ['#f6bed6', '#fdd737', '#d5da02', '#0e988f', '#b3dee5', '#ed8ab3'];
  curItem;

  curIndex = 0;
  curOption: any;

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

}

  ngOnInit() {
    this.data = {
      contentObj: {
        list: [
          {text: 'banana', options: [
            {pic_id: "assets/daily-conversation/2.png"},
            {pic_id: "assets/daily-conversation/3.png"}
          ]}
        ]
      }
    };


    // 获取数据
    const getData = ( window as any).courseware.getData;
    getData((data) => {
      console.log(1111, data)
      if (data && typeof data === 'object') {
        this.data = data;
      }
      this.changeDetectorRef.markForCheck();
      this.changeDetectorRef.detectChanges();
      this.refresh();
      window["air"] && window["air"].hideAirClassLoading(this.saveKey, this.data);

    }, this.saveKey);
  }
  selectItem(item, i){
    this.curItem=item;
    this.curIndex=i;
  }
  ngOnDestroy() {
  }

  ngOnChanges(data) {

  }
  onClosePopup() {
    this.curItem = null;
    this.curOption = null;
  }

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


}
