class Info {
    constructor() {
        this.getIndexInfo();
        this.Url = GetQueryString("url")
    }

    async getIndexInfo() {
        let res = await indexfoService.indexInfo({
            url: GetQueryString("url")
        })

        $(".img_hidden img").attr("src", res.backImg)
        $(".info_list .list_title h2").text(res.title)
        $(".posttime").text(res.posttime)
        res.stepInfo.arr.forEach((v,i)=>{
            $(".ddd").append(`
                <li>
                    <div class="i" style="background-position: 0px ${v.position /20}rem;"></div>
                    <p>${v.title}</p>
                </li>
            `)
        });
        $(".list_text p").text(res.stepInfo.message)
        if(res.stepInfo.message.length > 44) {
            $(".list_text").append(`
                <div class="more">
                    <span>展开</span>
                    <i class="iconfont icon-houtui-copy-copy"></i>
                </div>
            `);
            $(".more").on("click", function() {
                $(".list_text").css({
                    height: 'auto'
                })
                $(".list_text .more").remove()

            });
        };

        res.material.main.forEach((v,i)=>{
           $(".ms .main ul").eq(0).append(`
            <li>
                <span>${v.title}</span>
                <span>${v.nums}</span>
             </li>
           `)
        })

        res.material.accessories.forEach((v,i)=>{
            $(".ms .main ul").eq(1).append(`
             <li>
                 <span>${v.title}</span>
                 <span>${v.nums}</span>
              </li>
            `)
         })

         var successImg = 0;

         res.DetailedSteps.forEach((v,i)=>{
            if(Array.isArray(v.step_img) && v.step_img.length >=2) {
                successImg = i
                $(".content_list").append(`
                    <li>
                        <div class="step 2">${v.step_title}</div>
                        <img src="${v.step_img[0]}" alt="">
                        <p>${v.step_text || ''}</p>
                        <div class="tabs_img">
                        </div>
                    </li>
                `)  
            } else{
                $(".content_list").append(`
                    <li>
                        <div class="step">${v.step_title}</div>
                        <img src="${v.step_img}" alt="">
                        <p>${v.step_text || ''}</p>
                    </li>
                `)
            }
         });
        
         if (successImg != 0) {

            res.DetailedSteps[successImg].step_img.forEach((a,b)=>{
                $(".content_list li").eq(successImg).find(".tabs_img").append(`
                    <img style="width: 70px;height:70px;margin-right: .5rem;" src="${a}" alt=""/>
                `)
            })
           
            $(".content_list li").eq(successImg).find(".tabs_img img").on("click", function(){
                $(".content_list li").eq(successImg).find("img").eq(0).attr('src', $(this).attr("src"))
               
            }) 
         }
         //收藏
         var arr = [],
            self = this;
         if (localStorage.getItem("like") != null) {
             arr = JSON.parse(localStorage.getItem("like"))
         }
         // 如果已经收藏了
        //  (arr.filter((v,index)=> v.url == self.Url).length == 0) ? '' :  $(".icon-shoucang1").removeClass().addClass("iconfont icon-shoucang")

         for (let i = 0; i < arr.length; i++) {
            if (arr[i].url.includes(self.Url)) {
                $(".icon-shoucang1").removeClass().addClass("iconfont icon-shoucang");
            }
        }
        var xxx;
            $(".icon-shoucang1").on("click", function (){
                    if (arr.length === 0){
                        addData()
                    }else{
                        for (let i = 0; i < arr.length; i++) {
                            if (arr[i].url.includes(self.Url)) {
                                xxx = true
                                break;
                                } 
                                else {
                                 xxx = false
                                }   
                        }
                        if (xxx) {
                        console.log("已经收藏了");
                        } else {
                        addData()
                        }
                    } 
                    
                }) ;   
               

               


         function addData() {
            $(".icon-shoucang1").removeClass().addClass("iconfont icon-shoucang");
            arr.push({
                title: res.title,
                url: self.Url,
                img: res.backImg
            })
            localStorage.setItem("like", JSON.stringify(arr))
         }
        
        

         res.OtherRecommen.forEach((v,i)=>{
            $(".Otherpractices ul").append(`
            <li>
                <a href="info.html?url=${v.url}">
                <img src="${v.img}" alt="">
                <p>${v.title.substring(0,6)}</p>
                </a>
            </li>
            `)
         })
         res.RelatedRecommen.forEach((v,i)=>{
            $(".recommend ul").append(`
            <li>
            <a href="info.html?url=${v.url}">
              <img src="${v.img}" alt="">
              <div class="recommend_left">
                <h3>${v.title}</h3>
                <p>${v.view}</p>
              </div>
            </a>
          </li>
            `)
         })



    }
}

new Info()