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

  }


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

    this.total_page = this.res.total_page
    // this.total_page = 3

    // 详情页
    this.res.data.forEach(v => {
      var image = new Image();
      image.src = v.src
      image.onload = () => {
        if (image.width < image.height) {
          this.like.preview = v.src
        }
        $(".info_img").append(`
           <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
              <a href="${v.src}" itemprop="contentUrl" data-size="${image.width}x${image.height}">
                  <img src="${v.src}" itemprop="thumbnail" alt="${v.title}" />
              </a>
              <figcaption itemprop="caption description">${v.title}</figcaption>
          </figure>
        `)
      }
    })

    initPhotoSwipeFromDOM(".info_img")

    $(".tuijian").empty()
    $(".xianguan").empty()
    item(".tuijian", this.res.recommend)
    item(".xianguan", this.res.relevant)


  }


  renderInfo() {
    console.log(this.res)
    pHeader(this.res.title, `
      <i class="iconfont like icon-xin"></i>
      <i class="iconfont icon-home"></i>
    `);

    this.like = {
      id: query("id"),
      title: this.res.title,
      total: this.res.total,
      preview: ''
    }

    var isHave = this.likeArr.filter((v,i) => {
      if (v.id == query("id")) {
        return v
      }
    })

    // 本地收藏过了
    if (isHave.length != 0) {
      $(".like").removeClass("icon-xin")
      $(".like").addClass("icon-aixin")
    } else {
      $(".like").removeClass("icon-aixin")
      $(".like").addClass("icon-xin")
    }


    $(".like").click(() => {
      // 如果空心，表示未收藏，改成实心 收藏
      if ($(".like").hasClass("icon-xin")) {
        $(".like").removeClass("icon-xin")
        $(".like").addClass("icon-aixin")
        this.likeArr.push(this.like)
        localStorage.setItem("like",JSON.stringify(this.likeArr))
        // 取消收藏
      } else {
        $(".like").removeClass("icon-aixin")
        $(".like").addClass("icon-xin")
        this.likeArr = this.likeArr.filter((v,i) => {
          if (v.id != query("id")) {
            return v
          }
        })

        localStorage.setItem("like",JSON.stringify(this.likeArr))
      }
    })

    $(".icon-xiangxia").click(() => {
      this.page+=1
      if (this.page == this.total_page) {
        $(".icon-xiangxia").hide()
      }
      this.getInfo()
    })
  }

}

new Info();