import {Component, EventEmitter, OnInit, Output} from '@angular/core';
import {NzMessageService, UploadFile} from 'ng-zorro-antd';
import {TopologyService} from '../../topology.service';
import {FormBuilder, FormGroup, Validator, Validators} from '@angular/forms';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'smart-icon',
  templateUrl: './icon.component.html',
  styles: []
})
export class IconComponent implements OnInit {
    @Output() done = new EventEmitter<any>();

    isVisible = false;
    fileList: UploadFile[] = [];
    validateForm:FormGroup;
    title = "添加图标";
    options:any;
    childrenList = [];
  constructor(private topologySer:TopologyService,private message:NzMessageService,
              private fb:FormBuilder) { }

    values;

    ngOnInit() {
        this.initForm();
        this.getList();
  }

  initForm(){
        this.validateForm = this.fb.group({
            firstTypeId:[null,[Validators.required]] ,
            secondTypeId:[null],
            iconType:['0'],
            defaultIcon:["0"],
            name:[""],
        });
      this.fileList = [];
  }

    getList(){
        this.topologySer.findTreeWithWeb().subscribe(
            (res)=>{
                if(res.errCode == 10000){
                    this.options = res.data;
                }else{
                    this.message.error(res.errMSg);
                }
            }
        )
    }

    beforeUpload = (file: UploadFile): boolean => {
        const isLt2M = file.size / 1024  < 300;
        if (!isLt2M) {
            this.message.error('图标必须小于300kb!');
        }else{
            this.fileList.push(file);
        }
        return false;
    };

    showModal(){
        this.isVisible = true;
    }

    handleOk(){
        if(this.fileList.length == 0){
            this.message.error("请选择图标");
            return false;
        }
        for(let i in this.validateForm.controls){
            this.validateForm.controls[i].markAsDirty();
            this.validateForm.controls[i].updateValueAndValidity();
        }
        if(this.validateForm.invalid){
            return false;
        }
        const formData = new FormData();
        this.fileList.forEach((file: any) => {
            formData.append('file', file);
        });
        formData.append('iconType',this.validateForm.value.iconType);
        formData.append('defaultIcon',this.validateForm.value.defaultIcon);
        formData.append('firstTypeId',this.validateForm.value.firstTypeId);
        formData.append('secondTypeId',this.validateForm.value.secondTypeId);
        formData.append('name',this.validateForm.value.name);
        console.log(this.validateForm.value)
        this.topologySer.iconUpload(formData).subscribe(
            (res)=>{
                if(res.errCode == 10000){
                    this.message.success("添加成功");
                    this.isVisible = false;
                    this.initForm();
                    this.done.emit();
                }else{
                    this.message.error(res.errMsg);
                }
            }
        )
    }

    onChanges(e){
        this.childrenList = [];
        this.options.forEach(res=>{
            if(res.id == e){
                this.childrenList = res.childs;
            }
        })
    }

    handleCancel(){
        this.isVisible = false;
    }

}
