class Info {
    constructor() {
        this.res = {};
        this.page = 1;
        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
            id: query("id")
        });
        this.total_page = this.res.total_page
        
        console.log(this.res);
        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();