class Info {
  constructor() {

    this.likeList
      = localStorage.getItem("list") == null
        ? []
        : JSON.parse(localStorage.getItem("list"));

    this.currentinfo = {};
    this.getInfo();
  }

  async getInfo() {
    var res = await indexService.indexInfo({
      url: query("url")
    });

    this.currentinfo = res;

    $(".list_title h2").innerText = res.title;
    res.stepInfo.arr.forEach((v) => {
      $(".setp").innerHTML += `
       <li>
            <div class="icons" style="background-position: 0px ${v.position}px"></div>
            <p>${v.title}</p>
        </li>
      `
    });

    $(".list_text p").innerText = res.stepInfo.message;
    $(".posttime").innerText = res.posttime;
    if (res.stepInfo.message.length > 22) {
      $(".list_text").innerHTML += '<div class="more">更多</div>';

      $(".list_text .more").onclick = function () {
        $(".list_text").style.height = "auto";
        $(".list_text .more").style.display = "none";
      }
    }


    res.material.main.forEach((v) => {
      $(".main_f").innerHTML += `
        <li>
            <span>${v.title}</span>
            <span>${v.nums}</span>
        </li>
      `
    })

    res.material.accessories.forEach((v) => {
      $(".fu_f").innerHTML += `
        <li>
            <span>${v.title}</span>
            <span>${v.nums}</span>
        </li>
      `
    })

    res.DetailedSteps.forEach((v,i,arr) => {
      $(".setp_content").innerHTML += `
        <li>
           ${
              v.step_img == null 
                ? `<h3>${v.step_title}</h3><p>${v.step_text}</p>`
                : `
                <div class="step_text">${v.step_title}</div>
                  <img class="${v.step_title == "成品图" ? 'lastimg': ''}" src="${ Array.isArray(v.step_img) ? v.step_img[0] : v.step_img}" alt="">
                  
                  ${
                      v.step_text == null ? '' : `<p>${v.step_text || ''}</p>`
                   }
                  
                  ${
                    Array.isArray(v.step_img)
                    ? `
                         <div class="tabs_img">
                            ${
                        (v.step_img.map((item, index) => {
                          return `<img src="${item}"/>`
                            })).toString().replace(/,/g, "")
                          }
                          </div>
                      `
                    : ''
                  }
                `
            }
            
        </li>
      `
    });

    var tabImg = document.querySelectorAll(".tabs_img img");
    tabImg.forEach((v) => {
      v.onclick = function () {
        $(".lastimg").setAttribute("src", v.getAttribute("src"))
      }
    })


    this.like();

  }

  like() {
    var isHave = this.likeList.filter((item,index) => {
      if (item.backImg == this.currentinfo.backImg) {
        return item
      }
    });

    if (isHave.length != 0) {
      $(".likeicon").classList.replace("iconshoucang1", "iconshoucang")
    }




    // iconshoucang1 表示空心图标
    // iconshoucang 表示实心图标
    $(".likeicon").onclick = () => {

      // true 表示当前是 空心图标  收藏操作
      if ($(".likeicon").classList.contains("iconshoucang1")) {
        $(".likeicon").classList.replace("iconshoucang1", "iconshoucang")

        this.likeList.push(this.currentinfo)

        localStorage.setItem("list", JSON.stringify(this.likeList))

        // false 表示当前是 实心图标  取消收藏
      } else {
        $(".likeicon").classList.replace("iconshoucang", "iconshoucang1")


        this.likeList = this.likeList.filter((item,index) => {
          if (item.backImg != this.currentinfo.backImg) {
            return item
          }
        });

        localStorage.setItem("list", JSON.stringify(this.likeList))


      }
    }
  }
}

new Info();