class Info {

    constructor() {
        this.page = 1;
        this.TotalPage = 0;
        this.preview = "";
        this.InfoList = [];
        this.GetInfoData()
    }

    async GetInfoData(action = "first") {
        this.InfoList = await homeService.info({
            id: utils.GetQueryString("id"),
            page: this.page
        });

        this.TotalPage = this.InfoList.total_page
        // 设置网页标题
        document.title = this.InfoList.title

        this.InfoList.data.forEach((v) => {
            var image = new Image();
            image.src = v.src;
            image.onload = () => {
                if (image.width < image.height) {
                    this.preview = v.src;
                }
                this.LikePhotot()
                document.querySelector(".info").innerHTML += `
                    <figure>
                        <a href="${v.src}" data-size="${image.width}x${image.height}">
                            <img src="${v.src}" alt="${v.title}" />
                        </a>
                        <figcaption itemprop="caption description">${v.title}</figcaption>
                    </figure>
                `
            }
        });

        this.BindNextPage();
        initPhotoSwipeFromDOM('.info');

        if (action == "first") {

            document.querySelector(".recommend .title").innerText = "推荐写真"
            this.InfoList.recommend.forEach(v => {
                document.querySelector(".recommend ul").innerHTML +=
                    `
                <li>
                    <div class="newest_img">
                        <a href="./info.html?id=${v.id}">
                          <img src="${v.preview}" alt="${v.title}">
                        </a>
                        <span>${v.total}P</span>
                    </div>
                    <div class="newest_text">
                        <a href="./info.html?id=${v.id}">
                            <p class="t">${v.title}</p>
                            <p class="source">${v.user}</p>
                            <p class="source">${v.source}</p>
                        </a>
                        <div class="tags">
                        ${(v.tags.map((t) => {
                        return `<div class="tags_item"><a href="./mechanism_info.html?id=${t.id}&type=tags&t=${t.title}">${t.title}</a></div>`
                    })).toString().replace(/,/ig, " ")
                    }
                        </div>
                    </div>
                </li>
            `
            })

            document.querySelector(".relevant .title").innerText = "相关写真"
            this.InfoList.relevant.forEach(v => {
                document.querySelector(".relevant ul").innerHTML +=
                    `
                <li>
                    <div class="newest_img">
                        <a href="./info.html?id=${v.id}">
                            <img src="${v.preview}" alt="${v.title}">
                        </a>
                        <span>${v.total}P</span>
                    </div>
                    <div class="newest_text">
                        <a href="./info.html?id=${v.id}">
                            <p class="t">${v.title}</p>
                            <p class="source">${v.user}</p>
                            <p class="source">${v.source}</p>
                        </a>
                        <div class="tags">
                        ${(v.tags.map((t) => {
                        return `<div class="tags_item"><a href="./mechanism_info.html?id=${t.id}&type=tags&t=${t.title}">${t.title}</a></div>`
                    })).toString().replace(/,/ig, " ")
                    }
                        </div>
                    </div>
                </li>
            `
            })

        }

    }

    BindNextPage() {
        document.querySelector(".next_page").style.display = "block"
        document.querySelector(".next_page").onclick = () => {
            this.page += 1;
            if (this.page > this.TotalPage) {
                document.querySelector(".next_page").style.display = "none"
            } else {
                if (this.page == this.TotalPage) {
                    document.querySelector(".next_page").style.display = "none"
                    this.GetInfoData("loadMore")
                } else {
                    this.GetInfoData("loadMore")
                }
            }
        }
    }

    LikePhotot() {
        // true 收藏， false 取消收藏
        var status = null;
        var LikeList = JSON.parse(localStorage.getItem("likeList")) == null 
                       ? [] : JSON.parse(localStorage.getItem("likeList"))

        var isHave = LikeList.filter((v) => {
            if (v.id == utils.GetQueryString("id")) {
                return v
            }
        })

        // 该写真你未收藏，true 点击进行收藏
        if (isHave.length == 0) {
            status = true
            // 改写真你已收藏，点击取消收藏
        } else {
            status = false
            document.querySelector(".like").className = "like iconfont icon-aixin"
        }

        document.querySelector(".like").onclick = () => {
            console.log(this.preview);
            if (status == true) {
                LikeList.push({
                    id: utils.GetQueryString("id"),
                    title: this.InfoList.title,
                    user: this.InfoList.info,
                    source: this.InfoList.source,
                    total: this.InfoList.total,
                    preview: this.preview
                })
                localStorage.setItem("likeList", JSON.stringify(LikeList))
                status = false
                document.querySelector(".like").className = "like iconfont icon-aixin"

            } else {
                LikeList = LikeList.filter((v) => {
                    if (v.id != utils.GetQueryString("id")) {
                        return v
                    }
                });
                status = true
                document.querySelector(".like").className = "like iconfont icon-xin"
                
                localStorage.setItem("likeList", JSON.stringify(LikeList))
            }
        }
    }
}

new Info()