import { Component, OnInit, ViewContainerRef } from '@angular/core';
import { NzModalService } from 'ng-zorro-antd/modal';
import { ImageLabelComponent } from '../image-label/image-label.component';

@Component({
  selector: 'app-image-list',
  templateUrl: './image-list.component.html',
  styleUrls: ['./image-list.component.scss']
})
export class ImageListComponent implements OnInit {

  constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef) { }
  imgList = [
    { url: '../../../assets/images/test/dog.jpg', showCoord: '', banCoord: '' },
    { url: '../../../assets/images/bgImg.png', showCoord: '', banCoord: '' },
    { url: '../../../assets/images/test/dog.jpg', showCoord: '', banCoord: '' },
    { url: '../../../assets/images/test/dog.jpg', showCoord: '', banCoord: '' },
    { url: '../../../assets/images/test/dog.jpg', showCoord: '', banCoord: '' },
    { url: '../../../assets/images/test/dog.jpg', showCoord: '', banCoord: '' },
    { url: '../../../assets/images/test/dog.jpg', showCoord: '', banCoord: '' },
    { url: '../../../assets/images/test/dog.jpg', showCoord: '', banCoord: '' }
  ]
  ngOnInit(): void {
  }
  goback() {
    history.go(-1)
  }
  label(item) {
    let width = document.documentElement.clientWidth
    const modal = this.modal.create({
      nzContent: ImageLabelComponent,
      nzViewContainerRef: this.viewContainerRef,
      nzComponentParams: {
        imgItem: item,
      },
      nzWidth: width - 100,
      nzCentered: true,
      nzOnOk: () => new Promise(resolve => {
        item.showCoord = ''
        item.banCoord = ''
        resolve(1)
      }),
    });
    const instance = modal.getContentComponent();
    modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
    // Return a result when closed
    modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
  }
}