import { HttpClient } from '@angular/common/http';
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { TreeService } from 'src/app/service/tree.service';
import { fromEvent, Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators'; // 引入debounceTime、Subject
import { NzFormatEmitEvent, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
@Component({
  selector: 'app-zhi-indicators',
  templateUrl: './zhi-indicators.component.html',
  styleUrls: ['./zhi-indicators.component.scss']
})
export class ZhiIndicatorsComponent implements OnInit {
  validateForm!: FormGroup;

  constructor(private fb: FormBuilder, private http: HttpClient, private toTree: TreeService) { }
  private valueChange = new Subject<string>();


  ngOnInit(): void {
    this.getAllOrganization()
    this.getCompanies()
    //保存防抖
    this.valueChange.pipe(debounceTime(1000)).subscribe(data => {
      console.log(data);
    });

  }
  saveItem() {
    this.valueChange.next('xxxx');
  }
  months = [
    { name: '1月', isable: true },
    { name: '2月', isable: true },
    { name: '3月', isable: true },
    { name: '4月', isable: true },
    { name: '5月', isable: true },
    { name: '6月', isable: true },
    { name: '7月', isable: true },
    { name: '8月', isable: true },
    { name: '9月', isable: true },
    { name: '10月', isable: true },
    { name: '11月', isable: true },
    { name: '12月', isable: true }
  ]
  selectedMonth
  selectMonth(item) {
    this.selectedMonth = item.name
  }


  // 双随机
  doubleRandom = {
    isExpand: true,//卡片展开
    isPopover: false,//选择单位气泡卡片
    search1: '',//选择单位气泡卡片---单位选择列表
    search1Value: [],
    search2: '',//选择单位气泡卡片---组织选择列表
    search2Value: [],
    selectedMenu: 1,//选择单位气泡卡片
    data: [
      { explain: '' }
    ],//表格数据
    nodes: [],
    unitList: []
  }

  // 熟悉演练
  rehearsal = {
    isExpand: false,//卡片展开
    isPopover: false,//选择单位气泡卡片
    search1: '',//选择单位气泡卡片---单位选择列表
    search1Value: [],
    search2: '',//选择单位气泡卡片---组织选择列表
    search2Value: [],
    selectedMenu: 1,//选择单位气泡卡片
    data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],//表格数据
    nodes: [],
    unitList: []
  }


  PageNumber = 1
  PageSize = 50
  totalCount: number
  getCompanies(CompanyName?: string) {
    let params = {
      CompanyName: CompanyName,
      PageNumber: this.PageNumber,
      PageSize: this.PageSize
    }
    this.http.get('/api/Companies', {
      params: params
    }).subscribe((data: any) => {
      console.log(data);
      this.totalCount = data.totalCount
      data.items.forEach(element => {
        element.label = element.companyName
        element.value = element.id
      });
      this.doubleRandom.unitList = this.doubleRandom.unitList.concat(data.items);
      this.doubleRandom.unitList = [...this.doubleRandom.unitList]
    })
  }
  moreData() {
    this.PageNumber += 1
    this.getCompanies()
  }


  log(data) {
    let arr = []
    data.unitList.forEach(item => {
      item.checked ? arr.push(item.id) : null
    });
    data.search1Value = arr
  }

  isPopover(data) {
    data.isPopover = !data.isPopover
  }
  //搜索框提交
  submitForm(data): void {
    data.unitList = []
    this.PageNumber = 1
    this.getCompanies(data.search1)
  }
  // 弹出 tab
  popoverMenuSelect(data, type) {
    data.selectedMenu = type
  }
  expand(data) {
    data.isExpand = !data.isExpand
  }



  nzExpandAll = false;


  allOrList: any
  nodes
  getAllOrganization() {
    let params = {
      ContainsChildren: true,
      pageSize: 9999
    }
    this.http.get('/api/Organizations', {
      params: params
    }).subscribe((data: any) => {
      data.items.forEach(element => {
        element.key = element.id
        element.title = element.name
        element.selectable = false
      });
      this.allOrList = data.items
      this.nodes = [...this.toTree.toTree(data.items)]

      this.doubleRandom.nodes = JSON.parse(JSON.stringify(this.nodes))
      this.rehearsal.nodes = JSON.parse(JSON.stringify(this.nodes))
    })
  }
  orcheckbox(data, $event, node) {
    if ($event) {
      data.search2Value.push(node.origin.name)
    } else {
      for (let index = 0; index < data.search2Value.length; index++) {
        const element = data.search2Value[index];
        if (element == node.origin.name) {
          data.search2Value.splice(index, 1)
        }
      }
    }
    console.log(data.search2Value)
  }

  ngOnDestroy(): void {
    //Called once, before the instance is destroyed.
    //Add 'implements OnDestroy' to the class.
    console.log('毁灭了')
    this.doubleRandom.isPopover = false
  }

  nzEvent(event: NzFormatEmitEvent): any {
    console.log(event);
    // load child async
    if(event.node.origin.companyName){
      return new Promise<void>((resolve, reject) => {
        reject()
      })
    }
    if (event.node.origin.level === 3 && !event.node.origin.companyName) {
      const node = event.node;
      console.log(node?.getChildren())
      if (node?.getChildren().length === 0) {
        this.loadNode(event.node.origin.id).then(data => {
          node.addChildren(data);
        });
      }
    }
  }

  loadNode(id): Promise<NzTreeNodeOptions[]> {
    return new Promise(resolve => {
      let params = {
        OrganizationId: id,
        PageNumber: 1,
        PageSize: 9999
      }
      this.http.get('/api/Companies', {
        params: params
      }).subscribe((data: any) => {
        console.log(data.items)
        data.items.forEach(element => {
          element.key = element.id
          element.title = element.companyName
          element.level = 4
        });
        resolve(data.items)
      })
    });
  }


}