import { Component, Input, OnInit } from '@angular/core';
import SVGA from 'svgaplayerweb';
@Component({
  selector: 'app-avatar',
  templateUrl: './avatar.component.html',
  styleUrls: ['./avatar.component.scss'],
  standalone: true,
})
export class AvatarComponent implements OnInit {
  @Input('avatar') avatar: string =
    'https://file-cloud.fmode.cn/DXNgcD6zo6/20221202/j6p8kb034039.png'; //头像
  @Input('frame') frame?: string; //头像框
  @Input('frameId') frameId: string = 'avatar-frame'; //头像框id

  @Input('size') size: number = 80; //外框大小
  @Input('avatarSize') avatarSize: number = 48; //头像大小

  player: any; //头像框动画

  constructor() {}

  ngOnInit() {
    setTimeout(() => {
      console.log('init-avatar');
      if(!this.frame){
        this.size = this.avatarSize + 10
      }
      this.initSVGA();
    }, 0);
  }
  ngOnDestroy(): void {
    this.player?.clearDynamicObjects();
    delete this.player;
  }
  initSVGA() {
    if(!this.frame) return
    let path = `/svga/头像框${this.frame}.svga`
    this.player = new SVGA.Player(`#${this.frameId}`);
    this.player.clearsAfterStop = false;
    this.player.onFinished(() => {
      console.log('finished');
    });
    // this.player.onPercentage((val:any)=> console.log(val))
    let parser = new SVGA.Parser(); // 如果你需要支持 IE6+，那么必须把同样的选择器传给 Parser。
    parser.load(
      path,
      (videoItem) => {
        console.log('load success');
        this.player.setVideoItem(videoItem);
        this.player.startAnimation();
      },
      (err) => {
        console.error('头像框加载错误：',err);
      }
    );
  }
}
