import { Component, ElementRef, Input, OnInit, ViewChild, AfterViewInit, OnDestroy } from "@angular/core";
import Viewer from 'viewerjs';
@Component({
  selector: "app-image-viewer",
  templateUrl: "./image-viewer.component.html",
  styleUrls: ["./image-viewer.component.less"],
})
export class ImageViewerComponent implements OnInit, AfterViewInit,OnDestroy {
  @ViewChild("ljImgViewerId", { static: false }) ljImgViewer: ElementRef;
  // 图片地址
  @Input() imageUrl: any = [];
  @Input() isPreviewNow: boolean = false;
  @Input() initialViewIndex: number = 0;
  viewer = null;

  constructor() {}

  ngOnInit(): void {
    console.log('初始化')
  }

  ngAfterViewInit(): void {
    let _this = this;
    this.viewer = new Viewer(this.ljImgViewer["nativeElement"],{
      inlineStyle: {
        width: '100px', // 设置图片宽度
        height: 'auto', // 设置图片高度，‌这里设置为自动以保持原始比例
      },
      viewed() {
        setTimeout(() => {
          this.viewer.view(_this.initialViewIndex);
        }, 0)
      },
      hide(){
        console.log('隐藏')
        this.viewer && this.viewer.destroy();
      }
    });
    this.isPreviewNow && this.viewer.show();
  }

  ngOnDestroy(): void {
    this.viewer && this.viewer.destroy();
  }
}
