import { Component, OnInit, Inject } from '@angular/core';
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
import {FlatTreeControl} from '@angular/cdk/tree';
import { HttpClient } from '@angular/common/http';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import {FormControl} from '@angular/forms';
import { MatSnackBar } from '@angular/material/snack-bar';
import format from 'date-fns/format';
import { TreeService } from '../../http-interceptors/tree.service'
import { FileUploader } from 'ng2-file-upload'

import { DomSanitizer } from '@angular/platform-browser'
@Component({
    selector: 'addoriginalcopy',
    templateUrl: './addoriginalcopy.component.html',
    styleUrls: ['./material-bank.component.scss']
  })
  export class AddOriginalCopy {

    uploader:FileUploader = new FileUploader({    
      url: "/api/Objects/PlanPlatform",   
      method: "POST",    
      itemAlias: "uploadedfile"
    });

    

    private _transformer = (node, level: number) => {
      return {
        expandable: !!node.children && node.children.length > 0,
        name: node.name,
        level: level,
        id: node.id,
        parentId: node.parentId,
        children:node.children
      };
    }
    treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable);
    treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children);
    dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
    myControl = new FormControl();
    displaynoneid = ""//选择的关联消防id
    displaynonename = ""
    constructor(private http: HttpClient,public dialogRef: MatDialogRef<AddOriginalCopy>,@Inject(MAT_DIALOG_DATA) public data,private tree:TreeService,private sanitizer:DomSanitizer) {}
    
   
    onNoClick(): void {
      this.dialogRef.close();
    }
    ngOnInit() {
      this.http.get('/api/FireElements').subscribe(data=>{
        this.dataSource.data = this.tree.toTree(data)
      })
    }
    add(e){
     this.displaynoneid = e.id
     this.displaynonename = e.name
    }
    hasChild = (_: number, node: any) => node.expandable;
    
    colors = ['#066eed','#00e5ef','#00ef76','#ffff00','#efb522','#20b4ac','#836eff','#ff8d00','#ef00ef','#ffa17a','#ff6a6a','#ff0000','#ff6eb5','#00bfff','#54ff9f','#00cd00','#00ffff','#6495ed','#ffdbb9','#836eff']
    isshow = true//选择颜色或者上传图片
    colorIndex:any=0; //选中的颜色的index
    selectedcolor = "#066eed"
    imgUrl = ""//返回来的图片地址后缀
    selectcolor(item,key){
      if(this.colorIndex != key){
        this.colorIndex = key
      }
      this.selectedcolor = item
    }
    changecolor(){
      this.isshow = true
    }
    changeimg(){
      this.isshow = false
    }
    imgsrc = ""
    filechange(e){
      const file = e.srcElement.files[0]; // 获取图片这里只操作一张图片
      var reader = new FileReader();
      reader.readAsDataURL(file);
      var image:any = new Image();
      reader.onload = function(){
        image.src = reader.result
      }
      setTimeout(() => {
        if(image.width!=128 && image.height!=128){ 
          var obj = document.getElementById('selectedfile') ; 
          obj.outerHTML=obj.outerHTML; 
          alert("请选择分辨率为128*128的图片") 
        }
      }, 100);
    }
    upload(){
      if(!this.uploader.queue[0]){
        alert("请选择文件")
      }else{
        this.uploader.queue[0].upload();//开始上传
        this.uploader.queue[0].onSuccess = (response, status, headers) => {    
          // 上传文件成功   
          if (status == 201) {
              // 上传文件后获取服务器返回的数据
            alert("上传成功")
            let tempRes = JSON.parse(response);
            this.imgUrl = tempRes.objectName  
            this.imgsrc = '/api/Objects/PlanPlatform/' + this.imgUrl 
          }else {            
              // 上传文件后获取服务器返回的数据错误        
          }
        };
        this.uploader.queue[0].onError = (response, status, headers) => {    
          if (status == 401) {
            alert("无权限上传")  
          }
        };
      }
      
    }
    padding = "0"
    onSubmit(value){
      value.pige=Boolean(Number(value.pige))
      if(value.padding == "0"){//填充方式为颜色
         this.http.post(`/api/Assets`,{
          id:"",
          name:value.name,
          width: 0,
          height: 0,
          angle: 0,
          interactiveMode: Number(value.tag),//交互方式
          fixedSize: value.pige,
          fillMode: Number(value.padding),//填充方式
          color: this.selectedcolor+'80',
          imageUrl:"",
          order: 0,
          enabled: true,
          propertyInfos: [
          ],
          fireElementId:this.displaynoneid
           },
          { 
            params: {
              libraryId:this.data.node.id,
            }
         }).subscribe((data)=>{
          this.dialogRef.close("ooo");
          alert("新建成功")
        })
      }else{
        this.http.post(`/api/Assets`,{
          id:"",
          name:value.name,
          width: 0,
          height: 0,
          angle: 0,
          interactiveMode: Number(value.tag),//交互方式
          fixedSize: value.pige,
          fillMode: Number(value.padding),//填充方式
          color: "",
          imageUrl:'/api/Objects/PlanPlatform/' + this.imgUrl,
          order: 0,
          enabled: true,
          propertyInfos: [
          ],
          fireElementId:this.displaynoneid
         }, { 
          params: {
            libraryId:this.data.node.id,
          }
       }).subscribe((data)=>{
          this.dialogRef.close("ooo");
          alert("新建成功")
        })
      }
    }
  }