// json/product.js文件
let productData = null;
let xhr = new XMLHttpRequest();//=> 创建AJAX实例
xhr.open('GET', 'json/product.json', false);//=> 打开一个请求的地址(一般地址都是服务器提供好的, 会给我们一个API接口文档), 最后一个参数是设置同步还是异步(false: 同步 true: 异步), 真实项目中最常使用的是异步
xhr.onreadystatechange = () => {
    if (xhr.readyState === 4 && xhr.status === 200){
        productData = xhr.responseText;
    }
};

xhr.send(null);
console.log(productData);

let productData = null;
let xhr = new XMLHttpRequest();
xhr.open('GET', 'json/product.json', false);
xhr.onreadystatechange = () => {
    if (xhr.readyState === 4 && xhr.status === 200){
        productData = xhr.responseText;
    }
};
xhr.send(null);

//=> 把字符串数据转换为对象
productData = JSON.parse(productData);
console.log(productData);

let list = document.getElementById('list');
let str = '';
for(let i = 0; i< productData.length; i++) {
    let item = productData[i];
    str += '<li><a href="javascript:;">';
    str += '<img src="'+ item.img +'" alt="">';
    str += '<p>'+ item.title +'</p>';
    str += '<span>￥'+ item.price +'</span>';
    str += '</a></li>';
}
list.innerHTML = str;

let list = document.getElementById('list');
let str = ``;// ES6模板字符串
for(let i =0; i < productData.length; i++) {
    let {
        img = 'img/1.jpg',//=> 没有返回img, 我们用默认图占位
        title,
        price
    } = productData[i];

    str += `<li><a href="javascript:;">
            <img src="${img}" alt="">
            <p>${title}</p>
            <span>${price}</span>
            </a></li>`;
}
list.innerHTML = str;

let list = document.getElementById('list');
for (let i = 0; i<productData.length; i++) {
    let item = productData[i];
    let oLi = document.createElement('li');
    //li标签中再加a标签...
    list.appendChild(oLi);
}

let listBox = document.getElementById('list'),
    headerBox = document.getElementById('header'),
    linkList = headerBox.getElementsByTagName('a'),
    productList = listBox.getElementsByTagName('li');//=> 在元素绑定前, 我们获取容器中元素,得到一个空的元素集合, 元素数据绑定后, 我们不需要重新获取, DOM的映射机制会帮我们把新增加的元素映射到之前获取的空集合中, 让其变为有元素的集合.

~function () {
    //=> ajax
    let productData = null,
        xhr = new XMLHttpRequest;
    xhr.open('GET', 'json/product.json', false);
    xhr.onreadystatechange = () => {
        xhr.readyState === 4 && xhr.status === 200 ? productData = xhr.responseText : null;

        // format data (格式化数据)
        productData ? productData = JSON.parse(productData) : null;
    };
    xhr.send(null);

    let str = ``;
    for (let i = 0; i < productData.length; i++) {
        let {
            title,
            img,
            price,
            hot,
            time
        } = productData[i];
        // 自定义属性
        str += `
        <li data-price="${price}"
            data-hot= "${hot}"
            data-time = "${time}">
        <a href="javascript:;">
            <img src="${img}" alt="">
            <p>${title}</p>
            <span>￥${price}</span>
        </a></li>    
        `;
    }
    listBox.innerHTML = str;
}();

//=> HANDLE CLICK
~function () {
    let sortList = () => {
        // 1.2.基于getElementsBysTagName获取的元素集合是一个类数组, 不能直接使用数组中的sort方法(先把它转换为数组, 然后再排序)
        let productAry = [].slice.call(productList);

        // 3.基于sort方法给所有的li按照其价格进行排序
        productAry.sort((a, b) => {
            let aP = a.getAttribute('data-price'),
                bP = b.getAttribute('data-price');
            return aP - bP;
        })

        // 4.按照排好序的数组, 我们把li重新增加到页面中
        for (let i = 0; i < productAry.length; i++) {
            let curLi = productAry[i];
            listBox.appendChild(curLi);//=> appendChild: 向容器的末尾追加新元素, 但是页面中不是20个, 还是原有的10个, 只不过顺序改变了, 这是为什么?
        }

    }
    linkList[1].onclick = function () {
        sortList();
    };
}();

let ary = [12,23,14,15,26,1,7,19,28];
ary.sort((a, b)=> {
    return 1;
})

let ary = [12,23,14,15,26,1,7,19,28];
ary.sort((a, b) => {
    return Math.round(Math.random()*10 - 5);//-5~5随机一个数
})

//=> HANDLE CLICK
~function () {

    let sortList = function () {
        //=> this:当前操作的a标签(用call修改了this指向)
        let productAry = [].slice.call(productList);

        /* let _this = this;
        productAry.sort(function () {
            //this: window
            _this.flag
        }); */
        productAry.sort((a, b) => {
            //=> this:当前操作的a标签
            let aP = a.getAttribute('data-price'),
                bP = b.getAttribute('data-price');
            return (aP - bP) * this.flag;
        });
        for (let i = 0; i < productAry.length; i++) {
            let curLi = productAry[i];
            listBox.appendChild(curLi);
        }

    }

    linkList[1].flag = -1;
    linkList[1].onclick = function () {
        //=> this: 当前操作的a标签(价格a标签)
        this.flag *= -1;//=> 每次点击可以让flag的值从1~-1来回切换(第一次点击变为1, 第二次点击变为-1...)
        sortList.call(this);//=> 执行sortList, 让方法中的this关键字改为操作的a标签(箭头函数虽然很强大, 但是不可以乱用, 尤其是在需要改变函数中的this情况下, 箭头函数中的this不受管控, 都是默认继承上下文的, 我们用call也改不了)
    };


}();

//=> HANDLE CLICK
~function () {

    let sortList = function () {
        //=>this: 点击的a标签
        let productAry = [].slice.call(productList);
        productAry.sort((a, b) => {
            let aInn,
                bInn;
            switch (this.index) {
                case 0:
                    aInn = a.getAttribute('data-time').replace(/-/g, '');
                    bInn = b.getAttribute('data-time').replace(/-/g, '');
                    break;
                case 1:
                    aInn = a.getAttribute('data-price');
                    bInn = b.getAttribute('data-price');
                    break;
                case 2:
                    aInn = a.getAttribute('data-hot');
                    bInn = b.getAttribute('data-hot');
                    break;
                
            }
            return (aInn - bInn) * this.flag;
        });
        for (let i = 0; i < productAry.length; i++) {
            let curLi = productAry[i];
            listBox.appendChild(curLi);
        }

    }
    
    //=> 给每一个link都绑定点击切换
    for(let i =0;i<linkList.length;i++){
        let curLink = linkList[i];
        curLink.index = i;//=> 设置自定义属性存储a的索引
        curLink.flag = -1;//=> 每一个a标签上都有一个flag属性, 能够在点击的时候实现1~-1之间的切换, 点击都要执行sortList, 同时方法中的this也都改为当前点击的a标签
        curLink.onclick = function () {
            this.flag *= -1;
            sortList.call(this);
        };
    }
}();

//=> HANDLE CLICK
~function () {

    let sortList = function () {
        let { index: _index, flag: _flag } = this,
            productAry = [].slice.call(productList);
        productAry.sort((a, b) => {
            let ary = ['data-time', 'data-price', 'data-hot'];
            let aInn = a.getAttribute(ary[_index]),
                bInn = b.getAttribute(ary[_index]);
            if (_index === 0) {
                aInn = aInn.replace(/-/g, '');
                bInn = bInn.replace(/-/g, '');
            }
            return (aInn - bInn) * _flag;
        });
        for (let i = 0; i < productAry.length; i++) {
            let curLi = productAry[i];
            listBox.appendChild(curLi);
        }

    }

    for (let i = 0; i < linkList.length; i++) {
        let curLink = linkList[i];
        curLink.index = i;
        curLink.flag = -1;
        curLink.onclick = function () {
            //=> 点击当前的a标签, 我们需要让其余的a标签的flag回归原始值-1, 这样下一次再点击某一个a标签, 还是从-1开始乘, 变为1, 也就是从升序开始的
            for (let j = 0; j < linkList.length; j++) {
                let item = linkList[j];
                if (item !== this) {
                    item.flag = -1;
                }
            }
            this.flag *= -1;
            sortList.call(this);
        };
    }
}();

let productRender = (function () {
    
    //=> GET-DATA: 基于AJAX从服务器端获取数据
    let getData = function () {

    }
    //=> BIND-HTML: 完成数据绑定(基于ES^模板字符串)
    let bindHTML = function () {

    }

    return {
        init: function () {
            // init是当前模块的入口, 想要实现完整的业务逻辑, 我们执行init即可, 在init中, 我们根据具体的业务需求, 规划哪些方法先, 哪些方法后执行, init相当于当前模块的指挥官.("命令设计模式")
            getData();
            bindHTML();
        }
    }
})();
productRender.init();

let ary = [12, 23, 34];
ary.forEach((item, index) => {
    console.log(item, index);
    //=> 12 0
    //   23 1
    //   34 2
})

let productRender = (function () {
    let productData = null,
        productBox = document.getElementById("productBox");

    //=> GET-DATA: 基于AJAX从服务器端获取数据
    let getData = function () {
        let xhr = new XMLHttpRequest;
        xhr.open('GET', 'json/product.json', false);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                productData = JSON.parse(xhr.responseText);//=>把从服务器获取的JSON字符串转换为对象, 方便后续操作
            }
        };
        xhr.send(null);
    };
    //=> BIND-HTML: 完成数据绑定(基于ES6模板字符串)
    let bindHTML = function () {
        let str = ``;
        productData.forEach(({title, price, hot, time, img}, index) => {
            // let {title, price, hot, time, img} = item; 直接放到形参中解构
            //=> ES6模板字符串中出现的${}里面存放的是JS代码(包含需要动态绑定数据的JS变量的值)
            str += `<li>
                        <a href="#">
                            <img src="${img}" alt="">
                            <p title="${title}">${title}</p>
                            <span>￥${price}</span>
                            <span>时间: ${time}</span>
                            <span>热度: ${hot}</span>
                        </a>
                    </li>`
        });
        productBox.innerHTML = str;
    };

    return {
        init: function () {
            getData();
            bindHTML();
        }
    }
})();
productRender.init();

let productRender = (function () {
    let productData = null,
        productBox = document.querySelector('.productBox'),
        headerBox = document.querySelector('.headerBox'),
        linkList = headerBox.querySelectorAll('a'),
        productList = null;

    //=> GET-DATA: 基于AJAX从服务器端获取数据
    let getData = function () {
        let xhr = new XMLHttpRequest;
        xhr.open('GET', 'json/product.json', false);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                productData = JSON.parse(xhr.responseText);
            }
        };
        xhr.send(null);
    };
    //=> BIND-HTML: 完成数据绑定(基于ES6模板字符串)
    let bindHTML = function () {
        let str = ``;
        productData.forEach(({title, price, hot, time, img}, index) => {
            str += `<li>
                        <a href="#">
                            <img src="${img}" alt="">
                            <p title="${title}">${title}</p>
                            <span>￥${price}</span>
                            <span>时间: ${time}</span>
                            <span>热度: ${hot}</span>
                        </a>
                    </li>`
        });
        productBox.innerHTML = str;
        productList = document.querySelectorAll('li');
    };

    return {
        init: function () {
            getData();
            bindHTML();
        }
    }
})();
productRender.init();

let productRender = (function () {
    let productData = null,
        productBox = document.querySelector('.productBox'),
        headerBox = document.querySelector('.headerBox'),
        linkList = headerBox.querySelectorAll('a'),
        productList = null;

    //=> GET-DATA: 基于AJAX从服务器端获取数据
    let getData = function () {
        let xhr = new XMLHttpRequest;
        xhr.open('GET', 'json/product.json', false);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                productData = JSON.parse(xhr.responseText);
            }
        };
        xhr.send(null);
    };
    //=> BIND-HTML: 完成数据绑定(基于ES6模板字符串)
    let bindHTML = function () {
        let str = ``;
        productData.forEach(({ title, price, hot, time, img }, index) => {
            str += `<li data-time="${time}" data-hot="${hot}" data-price="${price}">
                        <a href="#">
                            <img src="${img}" alt="">
                            <p title="${title}">${title}</p>
                            <span>￥${price}</span>
                            <span>时间: ${time}</span>
                            <span>热度: ${hot}</span>
                        </a>
                    </li>`
        });
        productBox.innerHTML = str;
        productList = document.querySelectorAll('li');
    };

    //=> BIND-CLICK: 给三个排序标签绑定点击事件
    let bindClick = function () {
        [].forEach.call(linkList, (curlink, index) => {
            //=> 循环三次, 执行三次这个方法, 每一次执行都会形成一个闭包, 每一个闭包中保存了当前这个A对应的索引indes
            curlink.flag = -1;
            curlink.onclick = function () {
                //1. 给productList进行排序(依据点击列的不同进行排序)

                //=> 点击的时候需要获取每一个li的价格/热度等信息, 此时我们可以在绑定的时候, 把这些信息存储到自定义属性上, 点击的时候根据自定义属性获取即可

                curlink.flag *= -1;

                //A: 根据点击li的索引,索引是谁按照谁排序
                let ary = ['data-time', 'data-price', 'data-hot'];
                productList = [].slice.call(productList);
                productList.sort((a, b) => {
                    let aInn = a.getAttribute(ary[index]);
                    let bInn = b.getAttribute(ary[index]);
                    if (index === 0) {//=> 对于日期来说, 需要去除字符串之间的'-',才能实现数学相减
                        aInn = aInn.replace(/-/g, '');
                        bInn = bInn.replace(/-/g, '');
                    }
                    return (aInn - bInn) * this.flag;
                });


                //2. 按照最新顺序依次添加到容器中
                productList.forEach(curList => {
                    productBox.appendChild(curList);
                });
            }
        });


    };

    return {
        init: function () {
            getData();
            bindHTML();
            bindClick();
        }
    }
})();
productRender.init();

let productRender = (function () {
    let productData = null,
        productBox = document.querySelector('.productBox'),
        headerBox = document.querySelector('.headerBox'),
        linkList = headerBox.querySelectorAll('a'),
        productList = null;

    //=> GET-DATA: 基于AJAX从服务器端获取数据
    let getData = function () {
        let xhr = new XMLHttpRequest;
        xhr.open('GET', 'json/product.json', false);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                productData = JSON.parse(xhr.responseText);
            }
        };
        xhr.send(null);
    };

    //=> BIND-HTML: 完成数据绑定(基于ES6模板字符串)
    let bindHTML = function () {
        let str = ``;
        productData.forEach(({ title, price, hot, time, img }, index) => {
            str += `<li data-time="${time}" data-hot="${hot}" data-price="${price}">
                        <a href="#">
                            <img src="${img}" alt="">
                            <p title="${title}">${title}</p>
                            <span>￥${price}</span>
                            <span>时间: ${time}</span>
                            <span>热度: ${hot}</span>
                        </a>
                    </li>`
        });
        productBox.innerHTML = str;
        productList = document.querySelectorAll('li');
    };

    //=> BIND-CLICK: 给三个排序标签绑定点击事件
    let bindClick = function () {
        [].forEach.call(linkList, (curlink, index) => {
            curlink.flag = -1;
            curlink.onclick = function () {
                curlink.flag *= -1;
                let ary = ['data-time', 'data-price', 'data-hot'];
                productList = [].slice.call(productList);
                productList.sort((a, b) => {
                    let aInn = a.getAttribute(ary[index]);
                    let bInn = b.getAttribute(ary[index]);
                    if (index === 0) {
                        aInn = aInn.replace(/-/g, '');
                        bInn = bInn.replace(/-/g, '');
                    }
                    return (aInn - bInn) * this.flag;
                });

                //=> 基于文档碎片减少DOM回流
                let frg = new document.createDocumentFragment();
                productList.forEach(curList => {
                    frg.appendChild(curList);
                });
                productBox.appendChild(frg);
                frg = null;
            }
        });
    };

    return {
        init: function () {
            getData();
            bindHTML();
            bindClick();
        }
    }
})();
productRender.init();

box.style.top = '100px';
console.log(box.style.top);//=> '100px'
box.style.left = '100px';

box.style.top = '100px';
box.style.left = '100px';
console.log(box.style.top);//=> '100px'

let data = [
    {
      "id": 1,
      "title": "HUAWEI Mate 10 4GB+64GB 全网通版（亮黑色）",
      "price": 3899,
      "time": "2017-03-15",
      "hot": 198,
      "img": "img/1.jpg"
    }
]
data.forEach((item, index) => {
    let curLi = document.createElement('li');
    curLi.innerHTML = `<a href="#">
        <img src="img/1.jpg" alt="">
        <p title="华为畅享7 Plus 4GB+64GB 全网通高配版（香槟金）">华为畅享7 Plus 4GB+64GB 全网通高配版（香槟金）</p>
        <span>￥1699</span>
        <span>2018-01-01</span>
        <span>2</span>
    </a>`;
    document.querySelector('.productBox').appendChild(curLi);
});

let frg = document.createDocumentFragment();//=> 创建文档碎片容器
data.forEach((item, index) => {
    let curLi = document.createElement('li');
    curLi.innerHTML = `<a href="#">
        <img src="img/1.jpg" alt="">
        <p title="华为畅享7 Plus 4GB+64GB 全网通高配版（香槟金）">华为畅享7 Plus 4GB+64GB 全网通高配版（香槟金）</p>
        <span>￥1699</span>
        <span>2018-01-01</span>
        <span>2</span>
    </a>`;
    frg.appendChild(curLi);
});
document.querySelector('.productBox').appendChild(frg);//=> 把文档碎片中的内容, 统一存放到页面中
frg = null;

let str = ``;
productData.forEach(({ title, price, hot, time, img }, index) => {
    str += `<li>
    <a href="#">
        <img src="img/1.jpg" alt="">
        <p title="华为畅享7 Plus 4GB+64GB 全网通高配版（香槟金）">华为畅享7 Plus 4GB+64GB 全网通高配版（香槟金）</p>
        <span>￥1699</span>
        <span>2018-01-01</span>
        <span>2</span>
    </a>
</li>`
});
document.querySelector('.productBox').innerHTML = str;// 只引发一次DOM回流