import { InDiv, Component, AfterMount, ReceiveInputs, OnDestory, ElementRef, HasRender, Input, ContentChild, ContentChildren } from '@indiv/core';
import { HttpClient } from '@indiv/common';

import { TestContentComponent } from '@/test-content-component';
import { TestDirective } from '@/directives/test-directive';

@Component({
  selector: 'test-component',
  templateUrl: './template.html',
})
export class TestComponent implements OnDestory, ReceiveInputs, AfterMount, HasRender {
  @Input() public manName: string;

  public man: {name: string} = {
    name: 'ajiaxi',
  };

  @ContentChild('test-content-component') private testComponent: TestContentComponent;
  @ContentChild('a') private tagA: HTMLElement;
  @ContentChildren('test-directive') private testDirectiveString: TestDirective[];
  @ContentChildren('a') private tagAs: TestDirective[];
  @ContentChildren(TestDirective) private testDirective: TestDirective[];

  constructor(
    private httpClient: HttpClient,
    private indiv: InDiv,
    private element: ElementRef,
  ) {
    this.httpClient.get('/success').subscribe({
      next: (value: any) => { console.log('repsonse', value); },
    });
  }

  public click() {
    this.manName = 'li junhe';
  }

  public nvHasRender() {
    console.log('TestComponent HasRender', this.tagA, this.tagAs, this.testDirectiveString);
  }

  public nvAfterMount() {
    console.log('TestComponent AfterMount');
  }
  public nvOnDestory() {
    console.log('TestComponent OnDestory');
  }

  public nvReceiveInputs(p: any) {
    console.log('test-component nvReceiveInputs', p);
  }
}