class Info {
  constructor() {
    this.res = {}
    this.page = 6;
    this.total_page = 0;
    this.like = localStorage.getItem("likeArr") == null
      ? []
      : JSON.parse(localStorage.getItem("likeArr"))
    this.getInfo().then(() => {
      this.bindInfoEvent()
    })

  }

  bindInfoEvent() {
    header(this.res.title, `
      <i class="like iconfont icon-xin"></i>
      <i class="iconfont icon-home"></i>
    `);
    $(".icon-xiangxia").onclick = () => {
      this.page+=1;
      if (this.page <= this.total_page) {
        this.getInfo()
        if (this.page == this.total_page) {
          $(".icon-xiangxia").style.display = "none"
        }
      }
    }

    var isHave = this.like.filter(v => {
      return v.id == query("id")
    })

    if (isHave.length != 0) {
      $(".like").classList.remove("icon-xin")
      $(".like").classList.add("icon-aixin")
    }


    $(".like").onclick = () => {
      // 空心图标，点击后变成实心
      if ($(".like").classList.contains("icon-xin")) {
        $(".like").classList.remove("icon-xin")
        $(".like").classList.add("icon-aixin")
        this.like.push({
          id: query("id"),
          title: this.res.title,
          total: this.res.total,
          source: this.res.source,
          info: this.res.info,
          preview: query("url")
        });

        localStorage.setItem("likeArr", JSON.stringify(this.like))
      } else {
        $(".like").classList.remove("icon-aixin")
        $(".like").classList.add("icon-xin")

        this.like = this.like.filter(v => {
          return v.id != query("id")
        });
        console.log(this.like)
        localStorage.setItem("likeArr", JSON.stringify(this.like))
      }
    }
  }

  async getInfo () {
    this.res = await indexServe.info({
      page: this.page,
      id: query("id")
    });

    this.total_page = this.res.total_page;


    this.res.data.forEach(v => {
      // var img = new Image();
      var img = document.createElement("img");
      img.src = v.src;
      img.onload = () => {
        $(".info_img").innerHTML += `
          <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
              <a href="${v.src}"  itemprop="contentUrl" data-size="${img.width}x${img.height}">
                  <img src="${v.src}" itemprop="thumbnail" alt="${v.title}" />
              </a>
              <figcaption itemprop="${v.title}">${v.title}</figcaption>
          </figure>
        `
      }
    })

    initPhotoSwipeFromDOM(".info_img")
    item(".recomm", this.res.recommend)
    item(".relevant", this.res.relevant)
  }
}

new Info();