import {Component, OnInit, ViewChild} from '@angular/core';

import { PublicService } from '../PublicService';
import { Router } from '@angular/router';

@Component({
  selector: 'app-tab-home',
  templateUrl: './tab-home.page.html',
  styleUrls: ['./tab-home.page.scss'],
})
export class TabHomePage implements OnInit {
  private user;
  private userConfig;
  private imgSrc;
  private searchKey;
  private searchResult = [];
  private isHiddenSearchResult = true;
  @ViewChild('searchInputContent', { static: false })
  private searchInputContent;
  private viewRecords = [];
  constructor(public readonly router: Router,
              private readonly publicService: PublicService) {
    this.publicService.event.on('home', () => {
      this.init();
    });
  }
  ngOnInit() {
    this.init();
  }
  init(){
    if (!this.isHiddenSearchResult){
      this.closeSearch();
    }
    this.user = this.publicService.getCurrentUser();
    this.userConfig = this.user.userConfig;
    if (this.userConfig.oftenVisits){
      this.viewRecords = (JSON.parse(this.userConfig.oftenVisits)).slice(0, 10);
    }
    this.publicService.getAppParameter().then(res => {
      console.log(res);
    });
  }
  toDetail(item){
    this.router.navigate(['/detail'], {
      queryParams: item
    });
  }
  toSearch(){
   const param = {
     pageNum: 1,
     pageSize: 10,
     param: {
       keyWord: this.searchKey
     }
   };
   this.publicService.queryAppPublish(param).then(res => {
     this.searchResult = res.data.result;
     this.searchInputContent.el.style.boxShadow = `0px 2px 6px 3px rgba(183, 183, 183, 40)`;
     this.searchInputContent.el.style.border = `1pt solid rgba(18, 116, 216, 100)`;
     this.searchInputContent.el.style.borderBottomColor = `#c9c9c9`;
     this.searchInputContent.el.style.borderRadius = `10pt 10pt 0 0`;
     this.isHiddenSearchResult = false;
    }, err => {
      this.publicService.checkNetworkToast(err);
    });
  }
  closeSearch(){
    this.searchInputContent.el.style.boxShadow = `none`;
    this.searchInputContent.el.style.border = `1pt solid #c9c9c9`;
    this.searchInputContent.el.style.borderRadius = `10pt`;
    this.isHiddenSearchResult = true;
  }

  public stopPropagation() {
    this.closeSearch();
    // event.stopPropagation();
  }
}