class Search {
  constructor() {
    this.page = 1;
    this.value = "";
    this.lock = true;
    this.bindSearch()
  }

  bindSearch () {
    $(".submitSearch").onclick = () => {
      if (this.lock) {
        this.value = $(".header input").value;
        if (this.value.length != 0) {
          $(".three_meals_list").innerHTML = "";
          this.getSearch()
        }
      }
    }

    $(".header input").oninput = () => {
      this.lock = true;
      this.value = $(".header input").value;
      if (this.value.length == 0) {
        $(".three_meals_list").innerHTML = "";
      }
    }
  }

  async getSearch() {

    var res = await indexService.search({
      q: this.value,
      page: this.page
    });

    this.lock = false;

    if (res.length > 0) {
      $(".three_meals_list").innerHTML += "";
      res.forEach((v) => {
        $(".three_meals_list").innerHTML += `
        <li class="three_meals_item">
            <img src="${v.img}" alt="">
            <div class="text">${v.des}</div>
            <div class="desc">${v.title}</div>
        </li>
        `
      });

      scroll( () => {
        this.page+=1;
        this.getSearch();
      });
    } else {
      $(".three_meals_list").innerHTML = "<p class='nodata'>暂无数据</p>"
    }

  }
}

new Search();