import { Component, OnInit } from '@angular/core';
import { EsSearch, SearchDto } from 'kkk-lib';

@Component({
    selector:'<%= dasherize(name) %>',
    template:`<div nz-row [nzGutter]="16" style="margin-bottom: 30px">
  <div nz-col class="gutter-row" [nzSpan]="6" style="border-right: 0.06rem solid #dadada">
    <!-- left -->

    <k-tree *ngFor="let it of menu"
    [tree]="it['treeData']"
    [title]="it['title']"
    (clickNode)="onSelectNode($event.node.origin,it.key)"></k-tree>

   </div>

  <div nz-col class="gutter-row" [nzSpan]="18">
    <div>
      <ng-container *ngFor="let it of termList">

      <nz-tag style="font-size: 1rem;line-height: 1.5rem;"
      [nzColor]="'cyan'">
        {{menuNameMap[it['key']]}}:{{it['value']}}&nbsp;
        <span (click)="removeNode(it)" style="cursor: pointer;" nz-icon nzType="close" nzTheme="outline"></span>
      </nz-tag> &nbsp;&nbsp;
    </ng-container>


    </div>
    <div class="search-bar">
      <nz-input-group nzSearch nzSize="large" [nzAddOnAfter]="suffixButton">
        <input type="text" (keyup.enter)="searchData()" [(ngModel)]="keyword" nz-input placeholder="搜索内容" />
      </nz-input-group>
      <ng-template #suffixButton>
        <button (click)="searchData()" nz-button nzType="primary" nzSize="large" nzSearch>搜索</button>
        <button (click)="reset()" nz-button nzType="dashed" nzSize="large" nzSearch>重置</button>
      </ng-template>
      <div> &nbsp; </div>
      <k-range-picker (selectDateChange)="onSelectDateChange($event)"></k-range-picker>
    </div>
    <div *ngIf="data && total" class="search-content">
      <div>共&nbsp;{{ total | number }}&nbsp;记录</div>
      <div> &nbsp; </div>
      <div *ngFor="let dataItem of data; index as i" class="data-item">
        <ng-container *ngIf="dataItem">
          <div class="title">
            <a target="_blank" routerLink="/search/show/{{ dataItem._id }}" style="color: #003266">
              <span>{{ i + getNum() }}.</span> <span [innerHTML]="dataItem.innerHTML_title"></span>
            </a>
            <span class="source">
              {{ dataItem['source'] }}
            </span>
            <span class="publish-time" title="发布时间">
              {{ dataItem['publish_time'] | date : 'YYYY-MM-dd HH:mm:ss' }}
            </span>
          </div>
          <div class="content" [innerHTML]="dataItem.innerHTML_content"></div>
          <div class="list">
            <span title="发布时间">{{ dataItem['publish_time'] | date : 'YYYY-MM-dd HH:mm:ss' }}<nz-divider nzType="vertical"></nz-divider></span>
            <span title="来源">{{ dataItem['source'] }}<nz-divider nzType="vertical"></nz-divider></span>
            <span title="语言">{{ dataItem['language'] }}<nz-divider nzType="vertical"></nz-divider></span>
          </div>
        </ng-container>
        <div>
          <nz-divider nzType="horizontal"></nz-divider>
        </div>
      </div>
    </div>
    <div> &nbsp; </div>
    <div *ngIf="total">
      <nz-pagination
        [nzPageIndex]="searchDto.pageNum"
        (nzPageIndexChange)="onPageIndexChange($event)"
        (nzPageSizeChange)="onPageSizeChange($event)"
        [nzTotal]="total"
        nzShowSizeChanger
        [nzPageSize]="searchDto.pageSize"
      ></nz-pagination>
    </div>
    <div style="height: 20px"> &nbsp; </div>
  </div>
</div>
`
})
export class <%= classify(name) %>Component implements OnInit {
    keyword = '';
  rangeDate = null;
  page = 1;
  total = 0;
  testVal = '';
  searchDto: SearchDto = {
    pageSize: 10,
    pageNum: 1,
    keywords: ['']
  };
  data: any = [];
  isLoading = false;

  menu: any = [
    { key: 'language', title: '语言', treeData: null },
  ]


  menuNameMap: any = {
    'language': '语言'
  }

  // [{key:key,value:value} ...]
  termList: any = [];

  constructor(private esService: EsSearch) {
    //
  }
  ngOnInit(): void {
    this.searchData();
  }

  searchData() {
    const searchDto: SearchDto = {
      pageSize: this.searchDto.pageSize,
      pageNum: this.searchDto.pageNum,
      regionTimeEnd: new Date().toISOString(),
      keywords: [''],
      termList: this.termList
    };
    searchDto.keywordTerms = [];
    for (const m of this.menu) {
      searchDto.keywordTerms.push(m.key)
    }
    if (this.rangeDate) {
      if (this.rangeDate[0]) {
        searchDto['regionTimeStart'] = new Date(this.rangeDate[0]).toISOString();
        console.log(new Date(this.rangeDate[0]));
        console.log(new Date(this.rangeDate[0]).toISOString());
      }
      if (this.rangeDate[1]) {
        searchDto['regionTimeEnd'] = new Date(this.rangeDate[1]).toISOString();
        console.log(new Date(this.rangeDate[1]));
        console.log(new Date(this.rangeDate[1]).toISOString());
      }
    } else {
      searchDto['regionTimeEnd'] = new Date().toISOString();
    }
    if (this.keyword) {
      searchDto['keyword'] = this.keyword;
    }
    this.isLoading = true;
    this.esService.search(searchDto).subscribe(
      (res: any) => {
        this.total = res.total;
        this.data = res.data;
        // 发布时间处理错误应对，需要减去8小时
        for (const it of this.data) {
          let pTime = new Date(it['publish_time']);
          it['publish_time'] = new Date(pTime.getTime() - 3600 * 8000);
        }
        if (res.textTerms) {
          this.setTerms(res.textTerms);
        }
      },
      error => {
        this.isLoading = false;
      }
    );
  }



  onSelectDateChange(e: any) {
    this.rangeDate = e;
    this.searchData();
  }

  onPageIndexChange(e: any) {
    this.searchDto.pageNum = e;
    this.searchData();
  }
  onPageSizeChange(e: any) {
    this.searchDto.pageSize = e;
    this.searchDto.pageNum = 1;
    this.searchData();
  }

  /**
   *
   * 导航树节点选择
   *
   * @param {*} e
   * @param {string} key
   * @memberof SearchComponent
   */
  onSelectNode(e: any, key: string) {
    //
    console.log(key);
    console.log(e.title);
    const termList = [];
    for (const it of this.termList) {
      if (it['key'] !== key) {
        termList.push(it);
      }
    }
    termList.push({ key: key, value: e.title });
    this.termList = termList;

    // 搜索数据
    this.searchData();
  }

  removeNode(node: { key: string, value: string }) {
    const termList = [];
    for (const it of this.termList) {
      if (it['key'] !== node.key) {
        termList.push(it);
      }
    }
    this.termList = termList;

    // 搜索数据
    this.searchData();
  }

  setTerms(textTerms: any) {
    for (const menuItem of this.menu) {
      const key = menuItem['key'];
      if (textTerms[`${key}Terms`]) {
        const data = [];
        for (const it of textTerms[`${key}Terms`]) {
          data.push({
            title: it.key_as_string ? it.key_as_string : it.key,
            number: it.doc_count
          });
        }
        menuItem['treeData'] = data;
      }
    }

  }

  getNum() {
    const pageSize = this.searchDto.pageSize ? this.searchDto.pageSize : 0;
    const pageNum = this.searchDto.pageNum ? this.searchDto.pageNum : 0;
    return pageSize * (pageNum - 1) + 1;
  }

  reset() {
    this.keyword = '';
    this.rangeDate = null;
    this.page = 1;
    this.termList = [];
    this.searchData();
  }
}