class Home {

    constructor() {
        this.TabsDatas = [];
        this.list = [];
        this.PageSwiper = null;
        this.CurrentPage = 0;
        // 点击搜索进入搜索页面
        document.querySelector(".search").onclick = () => {
            location.href = "./search.html"
        }

        // 通过在本地保存一个变量 homeIndex，记录用户在首页当前浏览到哪个分类，
        // 然后从其他页面回首页，那么根据本地变量 homeIndex 的数值，再回到上次浏览的分类
        if (localStorage.getItem("homeIndex") != null) {
            this.CurrentPage = localStorage.getItem("homeIndex")
        }

        this.GetTypeData().then(() => this.GetIndexData())
    }

    // 获取分类的数据，并渲染页面
    async GetTypeData() {
        if (localStorage.getItem("typeList") == null) {
            // 获取分类数据
            this.list = (await homeService.type({})).principal;
            localStorage.setItem("typeList", JSON.stringify(this.list))
        } else {
            this.list = JSON.parse(localStorage.getItem("typeList"))
        }

        console.log("this.list ============== :", this.list);
        // 根据分类的数组长度遍历生成与分类对应的内容
        this.list.forEach((v, i) => {
            this.TabsDatas.push({
                id: v.id,
                title: v.title,
                page: 0,
                TotalPage: 0,
                content: []
            })
            document.querySelector(".s-wrapper").innerHTML +=
                `
                <div class="s-slide">
                    <div class="list_content item_list padding_30">
                        <ul>
                         
                        </ul>
                    </div>
                </div>
            `
        });

        // 为每一个内容绑定滚动事件
        var slide = document.querySelectorAll(".s-wrapper .s-slide");
        var self = this;
        slide.forEach((v, i) => {
            if (i > 0) {
                v.addEventListener('scroll', function () {
                    if (Math.ceil(this.scrollHeight - this.scrollTop) == this.clientHeight) {
                        self.TabsDatas[i - 1].page += 1;
                        if (self.TabsDatas[i - 1].page <= self.TabsDatas[i - 1].TotalPage) {
                            self.GetTypeInfoData(i)
                        }
                    }
                })
            }
        })

        // 向数据中追加首页
        this.list.unshift({ id: -1, title: '首页' });
        // 根据数据生成横向菜单
        var MenuList = document.querySelector(".menu_list");
        this.list.forEach((v, i) => {
            MenuList.innerHTML += `
                <li class="${i == this.CurrentPage ? 'menu_active' : ''}">${v.title}</li>
            `
        });


        // 如果本地有 homeIndex，那么从其他页面返回的时候将顶部菜单滚动到对应位置
        if (localStorage.getItem("homeIndex") != null) {
            var offsetLeft = document.querySelectorAll(".menu_list li")[this.CurrentPage].offsetLeft - 14;
            document.querySelector(".menu_list").scrollLeft = offsetLeft
        }

        // 横向菜单被点击的时候
        var mLi = document.querySelectorAll(".menu_list li")
        mLi.forEach((v, i) => {
            v.onclick = (e) => {
                this.SetUrl(i)

                // 使横向菜单滑动
                document.querySelector(".menu_list").scrollLeft = e.target.offsetLeft - 14

                // 清除激活样式
                mLi.forEach(d => d.className = "")
                // 添加激活样式
                v.className = "menu_active"
                this.PageSwiper.slideTo(i)
                // 请求用户点击的分类的列表数据
                if (this.list[i].id != -1 && this.TabsDatas[i - 1].content.length == 0) {
                    this.GetTypeInfoData(i)
                }
            }
        })

        this.initPageSwiper();
    }

    /**
     * 初始化页面切换的轮播
     */
    initPageSwiper() {
        this.PageSwiper = new swiper('.s-container', {
            time: 3,
            wrapper: '.s-wrapper',
            slide: '.s-slide',
            auto: false,
            speed: 300,
            on: {
                slideChangeTransitionStart: (index) => {
                    this.SetUrl(index)
                    // 获取所有菜单的li标签
                    var MenuLi = document.querySelectorAll(".menu_list li");
                    // 清除激活样式
                    MenuLi.forEach(v => v.className = "")
                    // 添加激活样式
                    MenuLi[index].className = "menu_active"
                    // 页面滚动的时候顶部菜单也移动位置
                    document.querySelector(".menu_list").scrollLeft = MenuLi[index].offsetLeft - 14;
                    // 请求用户点击的分类的列表数据
                    if (this.list[index].id != -1 && this.TabsDatas[index - 1].content.length == 0) {
                        this.GetTypeInfoData(index)
                    }
                }
            }
        })

        // 必须在轮播图初始化后才去请求跳转到对应的页面和请求页面数据
        if (this.CurrentPage != 0) {
            this.GetTypeInfoData(this.CurrentPage)
            this.PageSwiper.slideTo(this.CurrentPage)
        }
    }

     // 修改地址栏id参数为下标，然后重新进入首页的时候，直接继续进入上次访问分类
    SetUrl(index) {
        // 本地保存下标
        localStorage.setItem("homeIndex", index)
    }

    /**
     * 获取分类下的列表数据
     */
    async GetTypeInfoData(index) {

        var res = await homeService.classList({
            page: this.TabsDatas[index - 1].page,
            id: this.TabsDatas[index - 1].id
        });
        this.TabsDatas[index - 1].page = res.current_page;
        this.TabsDatas[index - 1].TotalPage = res.total_page;
        this.TabsDatas[index - 1].content = [
            ...this.TabsDatas[index - 1].content,
            ...res.data
        ];

        var sWrapper = document.querySelectorAll(".s-wrapper .s-slide .list_content ul")
        res.data.forEach((v) => {
            sWrapper[index - 1].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>
                `
        });
    }

    // 获取首页的数据，并渲染各个布局
    async GetIndexData() {
        // 获取首页的数据
        var list = await homeService.GetHomeData({});
        // 轮播图模特的数据
        var ModelList = list.model.res;
        // 最新收录
        var newestList = list.newest.data;
        // 今日推荐
        var recommendedList = list.recommended.data;

        var swiperWrapper = document.querySelector(".swiper-wrapper");
        // 根据数据遍历生成banner 的 swiper-slide
        var slideElement = [];
        [1, 2].forEach(() => {
            var o = document.createElement("div");
            o.className = "swiper-slide";
            slideElement.push(o)
        })
        ModelList.forEach((v, i) => {
            if (i <= 3) {
                slideElement[0].innerHTML +=
                    `<div class="item">
                        <a href="./model_info.html?id=${v.id}&t=${v.title}">
                            <div class="top">
                                <img src="${v.preview}" alt="">
                                <span>${v.total}</span>
                            </div>
                            <p>${v.title}</p>
                        </a>
                    </div>`
            } else {
                slideElement[1].innerHTML +=
                    `<div class="item">
                        <a href="./model_info.html?id=${v.id}&t=${v.title}">
                            <div class="top">
                                <img src="${v.preview}" alt="">
                                <span>${v.total}</span>
                            </div>
                            <p>${v.title}</p>
                        </a>
                    </div>`
            }
        })
        // 将 swiper-slide 填入页面中
        slideElement.forEach(v => swiperWrapper.appendChild(v))

        new swiper('.swiper-container', {
            time: 3,
            auto: false,
            speed: 800
        });


        // 遍历 最新收录
        document.querySelector(".newest .title").innerHTML = `
            <i class="iconfont icon-huo color_theme"></i>
            最新收录
        `;
        newestList.forEach(v => {
            document.querySelector(".newest 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_page}套</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(".recommended .title").innerHTML = `
            <i class="iconfont icon-tuijian color_theme"></i>
            今日推荐
        `;
        recommendedList.forEach(v => {
            document.querySelector(".recommended 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_page}套</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>
            `
        })
    }
}

var home = new Home();