import {Component, HostListener, OnInit} from '@angular/core';
import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
import {NzUploadChangeParam, NzUploadFile} from "ng-zorro-antd/upload";
import {Observable, Observer} from "rxjs";
import {NzMessageService} from "ng-zorro-antd/message";
import {HttpClient} from '@angular/common/http';

@Component({
  selector: 'app-myresume',
  templateUrl: './myresume.component.html',
  styleUrls: ['./myresume.component.scss']
})
export class MyresumeComponent {
  constructor(private http: HttpClient, private msg: NzMessageService) {
    window.addEventListener('resize', this.onWindowResize.bind(this));
  }

  siderWidth: number = 300

  onWindowResize(): void {
    if (window.innerWidth < 1000) {
      this.siderWidth = 600; // 当屏幕宽度小于1000px时修改数值为5
    } else {
      this.siderWidth = 1000; // 当屏幕宽度大于等于1000px时修改数值为10
    }
  }

  //单选多选删除逻辑

  selectAllChecked = false;

  get selectAllIndeterminate(): boolean {
    const checkedCount = this.images.filter(image => image.checked).length;
    return checkedCount > 0 && checkedCount < this.images.length;
  }

  get showDeleteButton(): boolean {
    return this.selectAllChecked || this.selectAllIndeterminate;
  }

  toggleAllChecked() {
    this.images.forEach(image => {
      image.checked = this.selectAllChecked;
    });
  }

  updateSingleChecked() {
    this.selectAllChecked = this.selectAllIndeterminate || (this.images.length > 0 && this.images.every(image => image.checked));
  }

  interviewDelete: boolean = false

  //删除按钮逻辑
  deleteInterview() {
    this.interviewDelete = true
  }

  images: any[] = [
    {
      id: '1',
      url: 'assets/images/page-mine/myAvatar.png',
      title: 'Image 1',
      checked: false
    }, {
      id: '1',
      url: 'assets/images/page-mine/myAvatar.png',
      title: 'Image 1',
      checked: false
    }, {
      id: '1',
      url: 'assets/images/page-mine/myAvatar.png',
      title: 'Image 1',
      checked: false
    },
    // 更多图片...
  ];

  navigateToImageDetails(image: any) {
    // 处理点击图片跳转到其他页面的逻辑
  }

  //上传按钮
  isVisible = false;

  showModal(): void {
    this.isVisible = true;
  }

  handleOk(): void {

    this.isVisible = false;
  }

  handleCancel(): void {
    console.log('Button cancel clicked!');
    this.isVisible = false;
  }

  handleChange({file, fileList}: NzUploadChangeParam): void {
    const status = file.status;
    if (status !== 'uploading') {
      console.log(file, fileList);
    }
    if (status === 'done') {
      this.msg.success(`${file.name} file uploaded successfully.`);
      // 在这里处理上传成功后的逻辑

      // 创建一个FormData对象，用于发送POST请求
      const formData = new FormData();
      if (file.originFileObj) {
        formData.append('file', file.originFileObj);
      }

      // 发送POST请求上传文件
      this.http.post<any>('http://localhost:3000/upload', formData).subscribe(
        response => {
          // 在这里处理服务器返回的数据
          console.log(response);
        },
        error => {
          console.error(error);
        }
      );
    } else if (status === 'error') {
      this.msg.error(`${file.name} file upload failed.`);
    }
  }


  //把pdf数据读取出来

  //左侧底部菜单


}