class Cation {
    constructor() {
        this.getCation();
        // 这里的俩个数组不能直接为空数组，不然刷新之后就会被立即置空，应该是从本地里面动态的读出来的
        this.topList = localStorage.getItem('type')==null?[]:JSON.parse(localStorage.getItem('type'));
        this.bottomList = localStorage.getItem('bottom_type')==null?[]:JSON.parse(localStorage.getItem('bottom_type'));
    }

    getCation() {
        //吧type里面的值赋值给空数组topList
        this.topList = JSON.parse(localStorage.getItem('type'));
        console.log(this.topList);

        // 遍历，渲染进上面的页面
        $('.top_li').html('');
        $(this.topList).each((index,item) => {
            $('.top_li').append(`<li>${item.title}</li>`);
        })
        //调用onclick函数
        this.onclick();


        //jq情况网页元素使用html
        $('.bottom_li').html('');
        //从localStorage取出来赋值
        this.bottomList=JSON.parse(localStorage.getItem('bottom_type'));
        //遍历渲染
        $(this.bottomList).each((index,item)=>{
            $('.bottom_li').append(`<li>${item.title}</li>`)
        })
        console.log(this.bottomList);
        this.bottomLick();

    }

    // 点击事件函数
    onclick() {
        //拿到上面页面的li
        $('.top_li li').each((index,item) => {
            // 注册点击事件
            $(item).click(()=>{

                //点谁就把谁追加近bottomList
                this.bottomList.push(JSON.parse(localStorage.getItem('type'))[index]);
                //存入localStorage
                localStorage.setItem('bottom_type',JSON.stringify(this.bottomList))
               
               
                //过滤好的值查询赋值给res
                let res = JSON.parse(localStorage.getItem('type')).filter((i, j) => {
                    //i。id就是所有的值，JSON.parse(localStorage.getItem('type'))[index].id)是我们点击时的当前值
                    //这句话的意思就是点击谁就把其他返回出去，点击的过滤掉
                    if (i.id != JSON.parse(localStorage.getItem('type'))[index].id) {
                        return i;
                    }
                });
                // 然后存入localStorage中，记得使用JSON.stringify()转换
                localStorage.setItem('type',JSON.stringify(res));
                // 在重新调用上面的方法，遍历渲染进页面，就完成了点谁去除谁的骚操作了
                this.getCation();
            })
        })
    }

    bottomLick(){
       $('.bottom_li li').each((j,i)=>{
           $(i).click(()=>{

            this.topList.push(JSON.parse(localStorage.getItem('bottom_type'))[j]);
            localStorage.setItem('type',JSON.stringify(this.topList))
           

             let msg=  JSON.parse(localStorage.getItem('bottom_type')).filter((x,y)=>{
                  if(x.id != JSON.parse(localStorage.getItem('bottom_type'))[j].id){
                      return x;
                  }
              });
              localStorage.setItem('bottom_type',JSON.stringify(msg));
              this.getCation();
           })
       })
    }



}

new Cation();