import { HttpClient } from '@angular/common/http';
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

import { Directive, HostListener, Input, EventEmitter, Output, OnDestroy } from '@angular/core';
import { TreeService } from 'src/app/service/tree.service';

import { debounceTime } from 'rxjs/operators';
import { Subject, Subscription } from 'rxjs';
@Component({
  selector: 'app-zhi-indicators',
  templateUrl: './zhi-indicators.component.html',
  styleUrls: ['./zhi-indicators.component.scss']
})
export class ZhiIndicatorsComponent implements OnInit {
  @Input('appDebounceInput') debounceTime = 500;
  @Output() debounceInput = new EventEmitter();
  private inputs = new Subject<any>();
  private subscription: Subscription;

  @HostListener('input', ['event'])
  validateForm!: FormGroup;

  constructor(private fb: FormBuilder, private http: HttpClient, private toTree: TreeService) { }

  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: [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: []
  }

  // 熟悉演练
  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: []
  }
  isPopover(data) {
    data.isPopover = !data.isPopover
  }
  //搜索框提交
  submitForm(value): void {
    // console.log(value)
  }
  // 弹出 tab
  popoverMenuSelect(data, type) {
    data.selectedMenu = type
  }
  expand(data) {
    data.isExpand = !data.isExpand
  }

  ngOnInit(): void {
    this.getAllOrganization()
  }

  nzExpandAll = false;
  totalCount: string

  allOrList: any
  nodes
  getAllOrganization() {
    let params = {
      ContainsChildren: true,
      pageSize: 9999
    }
    this.http.get('/api/Organizations', {
      params: params
    }).subscribe((data: any) => {
      this.totalCount = data.totalCount
      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)
  }
}