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

    async getIndexInfo() {
        let res = await indexService.indexInfo({
            url: this.Url
        });

        $(".img_hidden img").attr("src", res.backImg);
        $(".info_list h1 span").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>
            `)
        });

        res.stepInfo.message = res.stepInfo.message;
        $(".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)=>{
             console.log(v.step_img);
            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" 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"))
         }

         console.log("arr: ", arr);
         // 如果已经收藏了
         (arr.filter((v,index)=> v.url == self.Url).length == 0) ? '' :  $(".icon-shoucang").removeClass().addClass("iconfont icon-ai-mark")

        //  for (let i = 0; i < arr.length; i++) {
        //     if (arr[i].url.includes(self.Url)) {
        //         $(".icon-shoucang").removeClass().addClass("iconfont icon-ai-mark");
        //     }
        // }

        var xxx;
         $(".icon-shoucang").on("click", function () {
             if (arr.length === 0) {
                addData()
             } else {

                (arr.filter((v,index)=> v.url == self.Url).length == 0) ? addData() : ''
                    
                // 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-shoucang").removeClass().addClass("iconfont icon-ai-mark");
            arr.push({
                title: res.title,
                url: self.Url,
                img: res.backImg
            })
            localStorage.setItem("like", JSON.stringify(arr))
         }

        



    }
}

new Info()