import { Component, OnInit, Inject } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { CanvasShareDataService } from 'src/app/canvas-share-data.service';
import { EventManager } from '@angular/platform-browser';

@Component({
  selector: 'app-leftFunctionalDomain',
  templateUrl: './addPlaneFigure.html',
  styleUrls: ['./panel.scss']
})
export class leftFunctionalDomainComponent2 implements OnInit {

  constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,public dialogRef: MatDialogRef<any>,@Inject(MAT_DIALOG_DATA) public data) { }

  ngOnInit(): void {

  }

  checked:boolean = false;//是否为避难层
  
  //提交表单创建平面图
  onSubmit (e) {
    if (!this.data.isBuilding) { //总平面图 创建平面图
      let data = {
        companyId: sessionStorage.getItem('companyId'),
        name: e.name,
        order: this.data.order,
        area:Number(e.area),
        details:e.details,
        enabled: true,
        modifiedTime: new Date(),
      }
      this.http.post('/api/CompanyAccount/SitePlans',data).subscribe(data=>{
        this.dialogRef.close('总平面图');
      })
    } else { //建筑 创建楼层/区域
      let data = {
        isRefugeStorey: e.isRefugeStorey,
        buildingId: this.data.Panel.id,
        name: e.name,
        order: this.data.order,
        area:Number(e.area),
        details:e.details,
        enabled: true,
        modifiedTime: new Date(),
      }
      this.http.post('/api/CompanyAccount/BuildingAreas',data).subscribe(data=>{
        this.dialogRef.close('建筑');
      })
    }
  }



}

//编辑平面图 楼层/区域
@Component({
  selector: 'app-editPlaneFigure',
  templateUrl: './editPlaneFigure.html',
  styleUrls: ['./panel.scss']
})
export class editPlaneFigureComponent2 implements OnInit {

  constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,public dialogRef: MatDialogRef<any>,@Inject(MAT_DIALOG_DATA) public data,public canvasData: CanvasShareDataService,private eventManager: EventManager,) { }

  ngOnInit(): void {
    this.name = this.data.buildingData.name || ''
    this.checked = this.data.buildingData.isRefugeStorey || false
    this.area = this.data.buildingData.area || 0
    this.details = this.data.buildingData.details || ''
    this.imgWidth = this.data.buildingData.imageWidth || 0
    this.imgHeight = this.data.buildingData.imageHeight || 0
    this.oldWidth = JSON.parse(JSON.stringify(this.data.buildingData.imageWidth || 0))
    this.oldHeight = JSON.parse(JSON.stringify(this.data.buildingData.imageHeight || 0))
    if (this.imgWidth==0 && this.imgHeight==0 && this.data.buildingData.imageUrl) {
      let that = this
      let img = new Image()
      img.src = this.data.buildingData.imageUrl
      img.onload = function () {
        that.imgWidth = img.width
        that.imgHeight = img.height
        that.imgScale = Number((that.imgWidth/that.imgHeight))
      }
    } else {
      this.imgScale = Number((this.imgWidth/this.imgHeight))
    }

    this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => {
      if (event.keyCode === 13) {
        event.preventDefault();
      }
    });
  }

  oldWidth:number; //原图片宽
  oldHeight:number; //原图片高

  name:any; //name
  checked:boolean = false;//是否为避难层
  area:number; //面积
  details:string; //详情

  imgWidth:number; //图片宽度
  imgHeight:number; //图片高度
  isItEqual:boolean = true; //是否等比
  imgScale:number; //图片 宽高比例

  //图片 宽高变化时
  inputChange (e) {
    if (this.isItEqual) {
      if (e == 0) { //需要改高度
        this.imgHeight = Math.round(this.imgWidth / this.imgScale)
        this.canvasData.selectStorey.imageWidth = this.imgWidth
        this.canvasData.selectStorey.imageHeight = this.imgHeight
      } else { //需要改宽度
        this.imgWidth = Math.round(this.imgHeight * this.imgScale)
        this.canvasData.selectStorey.imageWidth = this.imgWidth
        this.canvasData.selectStorey.imageHeight = this.imgHeight
      }
    } else {
      this.canvasData.selectStorey.imageWidth = this.imgWidth
      this.canvasData.selectStorey.imageHeight = this.imgHeight
    }
  }

  //重新计算 宽高比例
  setImgScale (e) {
    e.checked? this.imgScale = Number((this.imgWidth/this.imgHeight)) : null
  }

  //关闭
  close () {
    if (this.oldWidth === this.imgWidth && this.oldHeight === this.imgHeight) {
      this.dialogRef.close()
    } else {
      this.canvasData.selectStorey.imageWidth = this.oldWidth
      this.canvasData.selectStorey.imageHeight = this.oldHeight
      this.dialogRef.close('更新背景图');
    }
  }

  //提交表单修改平面图
  onSubmit (e) {
    if (!this.data.isBuilding) { //总平面图 修改平面图
      let data = {
        companyId: sessionStorage.getItem('companyId'),
        id: this.data.buildingData.id,
        name: e.name,
        cadUrl: this.data.buildingData.cadUrl,
        imageUrl: this.data.buildingData.imageUrl,
        imageWidth: this.imgWidth,
        imageHeight: this.imgHeight,
        imageAngle: this.data.buildingData.imageAngle,
        order: this.data.buildingData.order,
        area:e.area,
        details:e.details,
        enabled: this.data.buildingData.enabled,
        modifiedTime: new Date(),
      }
      this.http.put(`/api/CompanyAccount/SitePlans/${this.data.buildingData.id}`,data).subscribe(data=>{
        this.dialogRef.close('总平面图');
      })
    } else { //建筑 修改楼层/区域
      let data = {
        isRefugeStorey: e.isRefugeStorey,
        buildingId: this.data.Panel.id,
        id: this.data.buildingData.id,
        name: e.name,
        cadUrl: this.data.buildingData.cadUrl,
        imageUrl: this.data.buildingData.imageUrl,
        imageWidth: this.imgWidth,
        imageHeight: this.imgHeight,
        imageAngle: this.data.buildingData.imageAngle,
        order: this.data.buildingData.order,
        area:e.area,
        details:e.details,
        enabled: this.data.buildingData.enabled,
        modifiedTime: new Date(),
      }
      this.http.put(`/api/CompanyAccount/BuildingAreas/${this.data.buildingData.id}`,data).subscribe(data=>{
        this.dialogRef.close('建筑');
      })
    }
  }



}