import { FlatTreeControl } from '@angular/cdk/tree';
import { HttpClient } from '@angular/common/http';
import { Inject, Renderer2 } from '@angular/core';
import { ElementRef } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
import { NzTreeNode } from 'ng-zorro-antd/tree';
import { TreeService } from 'src/app/http-interceptors/tree.service';
import Viewer from 'viewerjs'
import Swiper from 'swiper';
declare var CryptoJS
declare var AMap: any;
@Component({
  selector: 'app-linkage-forces',
  templateUrl: './linkage-forces.component.html',
  styleUrls: ['./linkage-forces.component.scss']
})
export class LinkageForcesComponent implements OnInit {

  constructor(private tree: TreeService,public snackBar: MatSnackBar,private http:HttpClient,private  elementRef: ElementRef,public renderer2: Renderer2,public dialog: MatDialog) { }
  
  isCheckedOfSearchDiv:boolean = true//列表过滤滑块
  slideChange(e){
    this.isCheckedOfSearchDiv = e.checked
  }
  //搜索表单
  searchForm:any = {
    name:'',
    integrityNum:''
  }
  listIntegrityNum:any[] = [
    {id:-1,name:'全部'},
    {id:0,name:'<=50%'},
    {id:1,name:'50%-60%'},
    {id:2,name:'60%-70%'},
    {id:3,name:'70%-80%'},
    {id:4,name:'80%-90%'},
    {id:5,name:'90%-100%'}
  ]
  checkBoxList:any[] = [
    {id:0,name:'安监',imgUrl:'/assets/linkageForces/安监.png',isChecked:false},
    {id:1,name:'电力局',imgUrl:'/assets/linkageForces/电力局.png',isChecked:false},
    {id:2,name:'公安',imgUrl:'/assets/linkageForces/公安.png',isChecked:false},
    {id:3,name:'海事',imgUrl:'/assets/linkageForces/海事.png',isChecked:false},
    {id:4,name:'环保局',imgUrl:'/assets/linkageForces/环保局.png',isChecked:false},
    {id:5,name:'交通',imgUrl:'/assets/linkageForces/交通.png',isChecked:false},
    {id:6,name:'民政',imgUrl:'/assets/linkageForces/民政.png',isChecked:false},
    {id:7,name:'气象局',imgUrl:'/assets/linkageForces/气象局.png',isChecked:false},
    {id:8,name:'燃气局',imgUrl:'/assets/linkageForces/燃气局.png',isChecked:false},
    {id:9,name:'市政',imgUrl:'/assets/linkageForces/市政.png',isChecked:false},
    {id:10,name:'水利',imgUrl:'/assets/linkageForces/水利.png',isChecked:false},
    {id:11,name:'通信',imgUrl:'/assets/linkageForces/通信.png',isChecked:false},
    {id:12,name:'医疗',imgUrl:'/assets/linkageForces/医疗.png',isChecked:false},
    {id:13,name:'应急管理',imgUrl:'/assets/linkageForces/应急管理.png',isChecked:false},
    {id:14,name:'住建',imgUrl:'/assets/linkageForces/住建.png',isChecked:false}
  ]
  //勾选力量类型checkbox在地图上显示marker
  checkBoxChange(){
    let LinkageForceTypes = []
    this.checkBoxList.forEach(item =>{
      if(item.isChecked){
        LinkageForceTypes.push(item.id)
      }
    })
    let params:any = {
      PageSize : 999999,
      LinkageForceTypes:LinkageForceTypes
    }
    if(LinkageForceTypes.length != 0){//如果勾选了checkbox
      this.http.get('/api/LinkageForces',{params:params}).subscribe((data:any) => {
        this.createMarker(data.items)
      })
    }else{
      this.cluster.setData([])
    }
  }
  //循环渲染出所有力量markers
  cluster:any //力量聚合实例
  createMarker(list){
    let markerArrcluster = []
    this.cluster ? this.cluster.setData([]) : null
    list.forEach((item) => {
      let image
      if(item.linkageForceType == 0){//消火栓
        image = '/assets/linkageForcesMarkers/安监.png'
      }else if(item.linkageForceType == 1){//消防水池
        image = '/assets/linkageForcesMarkers/电力局.png'
      }else if(item.linkageForceType == 2){//天然水源
        image = '/assets/linkageForcesMarkers/公安.png'
      }else if(item.linkageForceType == 3){//天然水源
        image = '/assets/linkageForcesMarkers/海事.png'
      }else if(item.linkageForceType == 4){//天然水源
        image = '/assets/linkageForcesMarkers/环保局.png'
      }else if(item.linkageForceType == 5){//天然水源
        image = '/assets/linkageForcesMarkers/交通.png'
      }else if(item.linkageForceType == 6){//天然水源
        image = '/assets/linkageForcesMarkers/民政.png'
      }else if(item.linkageForceType == 7){//天然水源
        image = '/assets/linkageForcesMarkers/气象局.png'
      }else if(item.linkageForceType == 8){//天然水源
        image = '/assets/linkageForcesMarkers/燃气局.png'
      }else if(item.linkageForceType == 9){//天然水源
        image = '/assets/linkageForcesMarkers/市政.png'
      }else if(item.linkageForceType == 10){//天然水源
        image = '/assets/linkageForcesMarkers/水利.png'
      }else if(item.linkageForceType == 11){//天然水源
        image = '/assets/linkageForcesMarkers/通信.png'
      }else if(item.linkageForceType == 12){//天然水源
        image = '/assets/linkageForcesMarkers/医疗.png'
      }else if(item.linkageForceType == 13){//天然水源
        image = '/assets/linkageForcesMarkers/应急管理.png'
      }else if(item.linkageForceType == 14){//天然水源
        image = '/assets/linkageForcesMarkers/住建.png'
      }
      // 用于点集合的数组
      markerArrcluster.push({
        lnglat : [item.location.x,item.location.y],
        image : image,
        data : item
      })
    })
    this.map.plugin(["AMap.MarkerClusterer"],() => {
      var gridSize = 60
      var count = markerArrcluster.length;
      var _renderClusterMarker = function (context) {
        var factor = Math.pow(context.count / count, 1 / 18);
        var div = document.createElement('div');
        var Hue = 180 - factor * 180;
        var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
        var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
        var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
        var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
        div.style.backgroundColor = bgColor;
        var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
        div.style.width = div.style.height = size + 'px';
        div.style.border = 'solid 1px ' + borderColor;
        div.style.borderRadius = size / 2 + 'px';
        div.style.boxShadow = '0 0 5px ' + shadowColor;
        div.innerHTML = context.count;
        div.style.lineHeight = size + 'px';
        div.style.color = fontColor;
        div.style.fontSize = '14px';
        div.style.textAlign = 'center';
        context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
        context.marker.setContent(div)
      };
      var _renderMarker = (context)=> {
        var content = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`;
        var offset = new AMap.Pixel(-12.5, -12.5);
        context.marker.setContent(content)
        context.marker.setOffset(offset)
      }
      this.cluster = new AMap.MarkerCluster(this.map, markerArrcluster, {
        gridSize: gridSize, // 设置网格像素大小
        renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
        renderMarker: _renderMarker, // 自定义非聚合点样式
      });
      this.cluster.on('click',(e)=>{
        if(e.clusterData.length == 1){
         
        }
      })
    });
    
  }
  ngOnInit(): void {  
    this.getAllFireForce()
    setTimeout(() => {
      var mySwiper = new Swiper('.swiper-container', {
        slidesPerView: 10,//每页显示的个数
        slidesPerGroup: 3,//点击一次需要跳多少次
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      })
      this.createMap()
    }, 0);
  }
  //获得所有联动力量
  allLinkageForceObj:any//获得的所有联动力量
  dataLength:any //获取的数据一共多少条
  PageNumber:any = 1 //当前第几页
  getAllFireForce(){
    let MinIntegrity = 0
    let MaxIntegrity = 1.1
    if(this.searchForm.integrityNum == '0'){
      MinIntegrity = 0
      MaxIntegrity = 0.5
    }else if(this.searchForm.integrityNum == '1'){
      MinIntegrity = 0.5
      MaxIntegrity = 0.6
    }else if(this.searchForm.integrityNum == '2'){
      MinIntegrity = 0.6
      MaxIntegrity = 0.7
    }else if(this.searchForm.integrityNum == '3'){
      MinIntegrity = 0.7
      MaxIntegrity = 0.8
    }else if(this.searchForm.integrityNum == '4'){
      MinIntegrity = 0.8
      MaxIntegrity = 0.9
    }else if(this.searchForm.integrityNum == '5'){
      MinIntegrity = 0.9
      MaxIntegrity = 1.1
    }else if(this.searchForm.integrityNum == '-1'){
      MinIntegrity = 0
      MaxIntegrity = 1.1
    }
    let params:any = {
      Keyword : this.searchForm.name ? this.searchForm.name : '',
      MinIntegrity : MinIntegrity,
      MaxIntegrity : MaxIntegrity,
      PageSize : 15,
      PageNumber : this.PageNumber,
    }
    this.http.get('/api/LinkageForces',{params:params}).subscribe((data:any) => {
      this.dataLength = data.totalCount
      this.allLinkageForceObj = data
    })
  }


  //选择要显示的联动力量
  selectedLinkageForce(item){
    this.isGisTopBox = false
    if(this.LinkageForceDetailInfo.id != item.id){
      this.clearData()
      this.LinkageForceDetailInfo = item
      item.location?this.positionLngLat = item.location:null
      this.AttachmentArr = JSON.parse(item.relevantInfomationData)
      if(this.newPositionMarker){
        this.map.remove(this.newPositionMarker);
      }
      if(item.location && item.location.x){//如果已经标注单位坐标
        this.map.setCenter([item.location.x,item.location.y]);
        this.newPositionMarker = new AMap.Marker({
          position: [item.location.x,item.location.y],
          content: this.newPositionMarkerContent,
          offset: new AMap.Pixel(-15, -18)
        })
        // 将 markers 添加到地图
        this.map.add(this.newPositionMarker);
      }
    }
  }
  //搜索
  searchList(){
    this.getAllFireForce()
  }
  //重置搜索
  reset(){
    this.searchForm = {
      name:'',
      integrityNum:''
    }
    this.getAllFireForce()
  }
  //分页事件
  chagePage(e){
    this.PageNumber = e.pageIndex+1
    this.getAllFireForce()
  }
  //js乘法
  accMul(arg1,arg2,fix) { 
    if(!parseInt(fix)==fix)
    {
        return;
    }
     var m=0,s1=arg1.toString(),s2=arg2.toString(); 
     try{m+=s1.split(".")[1].length}catch(e){} 
     try{m+=s2.split(".")[1].length}catch(e){}
     if(m>fix){
        return (Math.round(Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m-fix))/Math.pow(10,fix));
     }else if(m<=fix){
         return (Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)).toFixed(fix);
     }else{
        return (arg1*arg2).toFixed(fix).toString();
     }
  } 
  //完整度颜色
  integrity(width){
    let _this = this
    let style:any = {}
    style.width = width +'%';
    if(width < 30){
      style.background = '#FF5D4A'
    }
    if(width >= 30 && width < 60){
      style.background = '#FFDD00'
    }
    if(width >= 60){
      style.background = '#5CD64E'
    }
    return style
  }
  //删除某条联动力量
  deleteLinkageForc(item,e){
    e.stopPropagation()
    let isDelete = window.confirm(`确定要删除${item.name}吗`)
    if(isDelete){
      this.http.delete(`/api/LinkageForces/${item.id}`).subscribe(data => {
        let config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('删除成功','确定',config);
        if(item.id == this.LinkageForceDetailInfo.id){
          this.LinkageForceDetailInfo.linkageForceType = null
        }
        this.getAllFireForce()
      })
    }
  }
  //当前点击tab页面第几个
  tabIndex:any = 1
  selectedTab(index){
    this.tabIndex = index
  }

  //联动力量详情提交信息
  LinkageForceDetailInfo:any = {
    // id:'',//编号
    linkageForceType:'',
    name:'',//名称
    phoneNumber:'',//联系电话
    faxNumber:'',//传真
    remark:'',//备注
    administrativeRegion:'',//行政区
    address:'',//地址
    location:{
      x:'',
      y:''
    },
    contactName:'',//联系人姓名
    contactTitle:'',//联系人职务
    contactPhone:'',//联系人电话
    serviceContent:'',//服务内容
    resourceRemark:'',//资源说明
    relevantInfomationData:[]//相关资料
  }

  //清空表单数据
  clearData(){
    this.deletedFile = []//清空相关资料已删除缓存
    this.AttachmentArr = []//清空相关资料
    this.positionLngLat = {x:'',y:''}
    this.atLastPositionLngLat = {x:'',y:''}
    this.LinkageForceDetailInfo = {
      // id:'',//编号
      linkageForceType:'',
      name:'',//名称
      phoneNumber:'',//联系电话
      faxNumber:'',//传真
      remark:'',//备注
      administrativeRegion:'',//行政区
      address:'',//地址
      location:{
        x:'',
        y:''
      },
      contactName:'',//联系人姓名
      contactTitle:'',//联系人职务
      contactPhone:'',//联系人电话
      serviceContent:'',//服务内容
      resourceRemark:'',//资源说明
      relevantInfomationData:[]//相关资料
    }
  }
  //新增联动力量
  selectedFireForceTypeIndex:any//新增消防力量名称
  addLinkageForce(){
    const dialogRef = this.dialog.open(AddLinkageForce, {
      data: {},
      id:'addLinkageForce'
    });
    dialogRef.afterClosed().subscribe(
      data=>{
        if(typeof data === 'number' && !isNaN(data)){
          this.clearData()
          this.LinkageForceDetailInfo.linkageForceType = data
          this.newPositionMarker ? this.map.remove(this.newPositionMarker) : null
          this.map.setCity('上海市');

        }  
      }
    )
  }
  //保存
  save(){
    if(!this.LinkageForceDetailInfo.name){
      alert('名称必填')
      return
    }
    this.isMasklayer = true
    //删除一下数据库的文件
    if(this.deletedFile.length != 0){
      this.deletedFile.forEach(item => {
        this.http.delete(`/api/Objects/PlanPlatform/${item.objectName}`).subscribe(data=>{
          // console.log('删除原文件成功')
        })
      });
    }

    this.LinkageForceDetailInfo.location = {x:'',y:''}
    this.LinkageForceDetailInfo.relevantInfomationData = JSON.stringify(this.AttachmentArr)
    if(this.atLastPositionLngLat.x){
      this.LinkageForceDetailInfo.location.x = this.atLastPositionLngLat.x
      this.LinkageForceDetailInfo.location.y = this.atLastPositionLngLat.y
    }else{
      this.LinkageForceDetailInfo.location = null
    }
    let body = this.LinkageForceDetailInfo
    if(this.LinkageForceDetailInfo.id){
      this.http.put(`/api/LinkageForces/${this.LinkageForceDetailInfo.id}`,body).subscribe((data:any) =>{
        this.isMasklayer = false
        let config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('修改成功','确定',config);
        this.getAllFireForce()
      })
    }else{
      this.http.post('/api/LinkageForces',body).subscribe((data:any) =>{
        this.isMasklayer = false
        let config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('保存成功','确定',config);
        this.LinkageForceDetailInfo = data
        this.getAllFireForce()
      })
    }

   
  }
  //关闭
  close(){
    this.LinkageForceDetailInfo={}
    this.newPositionMarker ? this.map.remove(this.newPositionMarker) : null
  }
  map:any
  placeSearch:any//构造地点查询类
  isMapLabel:boolean = false //是否已经标记坐标
  newPositionMarkerContent:any  = 
  '<div class="custom-content-marker">' +
  '   <img src="/assets/images/定位.png">' +
  '</div>'
  newPositionMarkerContentBtn:any = 
  '<div class="custom-content-marker">' +
  '   <img src="/assets/images/定位.png">' +
  '   <div  class="btnbox"><img id="setPositionOk" src="/assets/images/ok.png"><span>|</span><img id="setPositionClose" src="/assets/images/close.png"></div>' +
  '</div>'
  //创建地图
  newPositionMarker:any//坐标实例
  createMap(){
    this.map = new AMap.Map('container', {
      zoom:12
    })
    this.map.setCity('上海市');
    //输入提示
    var autoOptions = {
      input: "tipinput"
    };
    AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], ()=>{
      let auto = new AMap.AutoComplete(autoOptions);
      this.placeSearch = new AMap.PlaceSearch();  //构造地点查询类
      auto.on("select", (e)=>{
        this.newPositionMarker.setPosition([e.poi.location.lng,e.poi.location.lat])
        this.positionLngLat = {x: e.poi.location.lng, y: e.poi.location.lat}
        this.map.setCenter([e.poi.location.lng,e.poi.location.lat]); //设置地图中心点
      });//注册监听，当选中某条记录时会触发

    });
  }
  //点击位置
  isGisTopBox:boolean = false //
  searchTitle:any = ''//

  positionLngLat:any = {x:'',y:''}//临时坐标点
  atLastPositionLngLat:any = {x:'',y:''}//最终坐标点
  setPosition(){
    if(!this.isGisTopBox){
      this.isGisTopBox = true
      this.newPositionMarker ? this.map.remove(this.newPositionMarker) : null
      let center
      if(this.newPositionMarker && this.atLastPositionLngLat.x){//如果已经标注单位坐标
        center = [this.atLastPositionLngLat.x, this.atLastPositionLngLat.y]
      }else if(this.newPositionMarker && !this.atLastPositionLngLat.x && this.LinkageForceDetailInfo.location && this.LinkageForceDetailInfo.location.x){
        center = [this.LinkageForceDetailInfo.location.x, this.LinkageForceDetailInfo.location.y]
      }else{
        center = this.map.getCenter(); //获取当前地图中心位置
      }
      this.newPositionMarker = new AMap.Marker({
        draggable: true,
        position: center,
        content: this.newPositionMarkerContentBtn,
        offset: new AMap.Pixel(-15, -18)
      });
      this.positionLngLat = {x: center.lng || center[0], y: center.lat || center[1]}
      this.map.add(this.newPositionMarker);
      this.isMapLabel = true
      this.newPositionMarker.on('dragend', (e)=>{
        this.positionLngLat = {x: e.lnglat.lng, y: e.lnglat.lat}
      })
      //点击确定
      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'click',(event)=>{ 
        this.isGisTopBox = false
        this.map.remove(this.newPositionMarker)
        this.newPositionMarker = new AMap.Marker({
          position: [this.positionLngLat.x,this.positionLngLat.y],
          content: this.newPositionMarkerContent,
          offset: new AMap.Pixel(-15, -18)
        });
        this.atLastPositionLngLat = JSON.parse(JSON.stringify(this.positionLngLat))
        this.map.add(this.newPositionMarker);
        this.positionLngLat = this.atLastPositionLngLat
      })
      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionClose'),'click',(event)=>{ 
        this.isGisTopBox = false
        this.map.remove(this.newPositionMarker)
        if(this.positionLngLat.x && this.positionLngLat.x != 0 && !this.atLastPositionLngLat.x){//直接取消
          this.map.remove(this.newPositionMarker)
          this.positionLngLat = {}
          this.atLastPositionLngLat = {}
        }else{
          this.newPositionMarker = new AMap.Marker({
            position: [this.atLastPositionLngLat.x,this.atLastPositionLngLat.y],
            content: this.newPositionMarkerContent,
            offset: new AMap.Pixel(-15, -18)
          });
          this.map.setCenter([this.atLastPositionLngLat.x,this.atLastPositionLngLat.y]); //设置地图中心点
          this.map.add(this.newPositionMarker);
          this.positionLngLat = this.atLastPositionLngLat
        }
      })//取消
    }
    
  }




  //上传附件
  file:any; //上传的文件
  AttachmentArr:any = []//上传附件地址集合
  uploadId:any//分块上传id
  objectName:any
  progressBarValue:any = 0//分块上传进度
  isMasklayer:boolean = false//圆圈遮罩层是否打开
  isMasklayerUploading:boolean = false//上传进度条遮罩层是否打开
  isMasklayerDownload:boolean = false//下载进度条遮罩层是否打开
  uploadAttachment(e){
    this.file = e.target.files[0] || null //上传的文件
    let file = e.target.files[0] || null //获取上传的文件
    let fileSize = file.size || null //上传文件的总大小
    let shardSize = 5 * 1024 * 1024 //5MB一个分片
    
    if (file && fileSize<=shardSize) { //上传文件<=5MB时
      this.isMasklayer = true
      let formData = new FormData()
      formData.append("file",file)
      //this.selectedFireForce.id 选择的组织机构的id
      let storageFolderId //要存储到服务器的文件夹id 一般为当前选中单位的id 如果新创建的话就存到public文件夹
      this.LinkageForceDetailInfo.id ? storageFolderId = this.LinkageForceDetailInfo.id : storageFolderId = 'public'
      this.http.post(`/api/Objects/PlanPlatform/LinkageForce/${storageFolderId}`,formData).subscribe((data:any)=>{
        // this.objectName = data.objectName
        let obj = {
          objectName:data.objectName,
          fileName:data.fileName,
          fileLength:data.fileLength
        }
        this.AttachmentArr.push(obj)
        this.isMasklayer = false
        let config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('上传成功','确定',config);
      })
    } else if (file && fileSize>shardSize) { //上传文件>5MB时,分块上传
      this.isMasklayerUploading = true
      let data = {filename: file.name}
      let storageFolderId //要存储到服务器的文件夹id 一般为当前选中单位的id 如果新创建的话就存到public文件夹
      this.LinkageForceDetailInfo.id ? storageFolderId = this.LinkageForceDetailInfo.id : storageFolderId = 'public'
      this.http.post(`/api/NewMultipartUpload/PlanPlatform/LinkageForce/${storageFolderId}`,{},{params:data}).subscribe((data:any)=>{ //初始化分段上传
        this.objectName = data.objectName
        this.uploadId = data.uploadId
        this.subsectionUploading()
      })
    }
  }
  PartNumberETag:any=[]; //每次返回需要保存的信息

  //开始分段上传
  async subsectionUploading () {
    let file = this.file || null //获取上传的文件
    let fileSize = file.size || null //上传文件的总大小
    let shardSize = 5 * 1024 * 1024 //5MB一个分片
    let allSlice = Math.ceil(fileSize / shardSize) //总文件/5MB===共分多少段
    for (let i = 0;i < allSlice;i++) { //循环分段上传
        let start = i * shardSize //切割文件开始位置
        let end = Math.min(fileSize, start + shardSize); //切割文件结束位置
        let formData = new FormData()
        formData.append("file",file.slice(start, end))

        //同步写法实现异步调用
        let result = await new Promise((resolve, reject) => {
          // await 需要后面返回一个 promise 对象
          this.http.post(`/api/MultipartUpload/PlanPlatform/${this.objectName}?uploadId=${this.uploadId}&partNumber=${i+1}`,formData).subscribe((data:any)=>{
              let msg = {
                "partNumber":data.partNumber || null,
                "eTag": data.eTag || null}
              resolve(msg) // 调用 promise 内置方法处理成功
          })
        });
        this.PartNumberETag.push(result)
        // this.progressBarValue = Number((i/allSlice).toFixed(2))*100
        this.progressBarValue = this.accMul(Number((i/allSlice).toFixed(2))*100,1,0)
        if (this.PartNumberETag.length === allSlice) {
          this.progressBarValue = 100
          this.endUploading()}
    }//for循环

  }

  //完成分块上传
  endUploading () {
    let data = this.PartNumberETag
    let paramsData = {uploadId:this.uploadId}
    this.http.post(`/api/CompleteMultipartUpload/PlanPlatform/${this.objectName}`,data,{params:paramsData}).subscribe(data=>{
      this.PartNumberETag =[] //清空保存返回的信息
      let obj = {
        objectName:this.objectName,
        fileName:this.file.name,
        fileLength:this.file.size
      }
      this.AttachmentArr.push(obj)
      this.isMasklayerUploading = false//关闭进度条遮罩层
      this.progressBarValue = 0//重置进度数
      let config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('上传成功','确定',config);
    })
  }

  //取消分块上传
  cancelUploading() {
    this.http.delete(`/api/MultipartUpload/PlanPlatform/${this.objectName}?uploadId=${this.uploadId}`).subscribe(data=>{
      this.progressBarValue = 0;
      this.isMasklayerUploading= false
      this.PartNumberETag =[] //清空保存返回的信息
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('取消上传成功','确定',config);
    })
  }

  //下载
  download (e) {
    this.isMasklayerDownload = true //开启下载进度条
    let file = e //传递过来的文件元数据
    let fileSize = file.fileLength //下载文件的总大小
    let shardSize = 3 * 1024 * 1024 //文件大小是否大于10MB
    if (file && fileSize<=shardSize) { //<=3MB时直接下载
      this.progressBarValue = 60
      this.http.get(`/api/Objects/PlanPlatform/${e.objectName}`,{responseType: 'blob'},).subscribe(data=>{
        let url = window.URL.createObjectURL(new Blob([data])); //createObjectURL创建一个下载Blob的url地址
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        let fileName = e.fileName ? e.fileName : e.objectName.split('/')[e.objectName.split('/').length-1]
        link.setAttribute("download", fileName);
        document.body.appendChild(link);
        link.click();
        this.isMasklayerDownload = false //关闭下载进度条
        this.progressBarValue = 0 //初始化进度条
      })
    } else if (file && fileSize>shardSize) { //>3MB时分块下载
      this.blockingDownload(e) //分段下载
    }

  }

  //分段下载并合并
  async blockingDownload (e) {
    let file = e //传递过来的文件元数据
    let fileSize = file.fileLength //下载文件的总大小
    let shardSize = 3 * 1024 * 1024 //3MB一个分片
    let allSlice = Math.ceil(fileSize / shardSize) //总文件/3MB===共分多少段
    let allFile:any = [] //所有的file分段

    for (let i=0;i<allSlice;i++) {
      let start = i * shardSize //每次下载文件开始位置
      let end = Math.min(fileSize, start + shardSize-1); //每次下载文件结束为止

      let result =  await new Promise ((result,reject)=>{
        this.http.get(`/api/Objects/PlanPlatform/${e.objectName}`,{headers:{'range':`bytes= ${start}-${end}`},responseType:'blob'}).subscribe(data=>{
          result(data) }) 
      })
      allFile.push(result)
      // this.progressBarValue = Number((i/allSlice).toFixed(2))*100 //文件进度数
      this.progressBarValue = this.accMul(Number((i/allSlice).toFixed(2))*100,1,0)
      if (allFile.length === allSlice) { //合并文件输出给浏览器
        let url = window.URL.createObjectURL(new Blob(allFile)); //createObjectURL创建一个下载Blob的url地址
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        let fileName = e.fileName ? e.fileName : e.objectName.split('/')[e.objectName.split('/').length-1]
        link.setAttribute("download", fileName);
        document.body.appendChild(link);
        link.click();
        this.isMasklayerDownload = false //关闭下载进度条
        this.progressBarValue = 0 //初始化进度条
      }

    } //for循环结束

  }

  //删除图片
  deletedFile:any = []
  deleteFile(item,e){
    e.stopPropagation()
    let isTrue = window.confirm('确定要删除该文件吗？')
    if(isTrue){
      let index
      this.AttachmentArr.forEach((element,key) => {
        if(element.objectName == item.objectName){
          index = key
        }
      });
      this.AttachmentArr.splice(index,1)
      this.deletedFile.push(item)
      let config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('删除成功','确定',config);
    }
  }

  //点击文件
  clickFile(item){
    let suffix = item.fileName.split('.')[item.fileName.split('.').length-1]
    if(suffix == 'png' || suffix == 'jpg' || suffix == 'JPG'){
      let dom =  document.getElementById(`viewerjs`)
      let pObjs = dom.childNodes;
      let node = document.createElement("img")
      node.style.display = "none";
      node.src = "/api/Objects/PlanPlatform/" + item.objectName;
      node.id = 'img'
      dom.appendChild(node)
      setTimeout(() => {
        let viewer = new Viewer(document.getElementById(`viewerjs`), {
          hidden:()=>{
            dom.removeChild(pObjs[0]);
            viewer.destroy();
          }
        });
        node.click();
      }, 0);
    }
    if(suffix == 'docx' || suffix == 'doc' || suffix == 'pdf'){
      let fetchUrl = item.objectName
      let json={
        doc: {
          docId: new Date(), 
          title: item.fileName,
          fetchUrl: `http://${location.host}/api/Objects/PlanPlatform/`+fetchUrl
        },
        user: {
          uid: "test",
          nickName: "test",
          avatar: "",
          privilege: [
            'FILE_READ','FILE_DOWNLOAD', 'FILE_PRINT' 
          ],
        },
      }
      var stringjson=JSON.stringify(json)
      var wordArray = CryptoJS.enc.Utf8.parse(stringjson);
      var base64 = CryptoJS.enc.Base64.stringify(wordArray);
      window.open(`http://121.5.10.84/apps/editor/openPreview?data=${base64}`)
    }
    if(suffix == 'mp4'){
      const dialogRef = this.dialog.open(ViewDetails2, {//调用open方法打开对话框并且携带参数过去
        data: {item:item,type:"video"},
        id:'videodialog2'
      });
      dialogRef.afterClosed().subscribe();
    }
  }

}




//新增联动力量弹出框
@Component({
  selector: 'AddLinkageForce',
  templateUrl: './addLinkageForce.html',
  styleUrls: ['./linkage-forces.component.scss']
})
export class AddLinkageForce {
  
  constructor(private http: HttpClient,public dialogRef: MatDialogRef<AddLinkageForce>,@Inject(MAT_DIALOG_DATA) public data,public snackBar: MatSnackBar) {}


  addList:any = [
    {id:0,name:'安监',imgUrl:'/assets/linkageForces/安监.png'},
    {id:1,name:'电力局',imgUrl:'/assets/linkageForces/电力局.png'},
    {id:2,name:'公安',imgUrl:'/assets/linkageForces/公安.png'},
    {id:3,name:'海事',imgUrl:'/assets/linkageForces/海事.png'},
    {id:4,name:'环保局',imgUrl:'/assets/linkageForces/环保局.png'},
    {id:5,name:'交通',imgUrl:'/assets/linkageForces/交通.png'},
    {id:6,name:'民政',imgUrl:'/assets/linkageForces/民政.png'},
    {id:7,name:'气象局',imgUrl:'/assets/linkageForces/气象局.png'},
    {id:8,name:'燃气局',imgUrl:'/assets/linkageForces/燃气局.png'},
    {id:9,name:'市政',imgUrl:'/assets/linkageForces/市政.png'},
    {id:10,name:'水利',imgUrl:'/assets/linkageForces/水利.png'},
    {id:11,name:'通信',imgUrl:'/assets/linkageForces/通信.png'},
    {id:12,name:'医疗',imgUrl:'/assets/linkageForces/医疗.png'},
    {id:13,name:'应急管理',imgUrl:'/assets/linkageForces/应急管理.png'},
    {id:14,name:'住建',imgUrl:'/assets/linkageForces/住建.png'}
  ]
  selectedFireForceTypeIndex:any = 0
  selecteAddType(item,key){
    this.selectedFireForceTypeIndex = item.id

  }
  ngOnInit(): void {

  }

  confirm(){
    this.dialogRef.close(this.selectedFireForceTypeIndex)
  }

}

//查看图片大图和视频
@Component({
  selector: 'viewdetails',
  templateUrl: './viewdetails.html',
  styleUrls: ['./linkage-forces.component.scss']
})
export class ViewDetails2 {
  // myControl = new FormControl();
  //注入MatDialogRef，可以用来关闭对话框
  //要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注入令牌
  constructor(private http: HttpClient,public dialogRef: MatDialogRef<ViewDetails2>,@Inject(MAT_DIALOG_DATA) public data) {}
  Url:string
  onNoClick(): void {
    this.dialogRef.close();
  }
  ngOnInit(): void {
   this.Url = '/api/Objects/PlanPlatform/' + this.data.item.objectName
  }
  closeDialog(){
    this.dialogRef.close();
  }

}