// ==UserScript==
// @name         淘宝天猫图片打包下载,历史价格,分类排行优惠券
// @namespace    https://hlelf.com/
// @version      0.3.6
// @description  淘宝主图，主图视频，详情图打包下载。【说明】请先将页面下拉到最后，确认所有详情图完全显示后再点击右下侧的按钮，否则会获取不到图片资源，如果有视频，请等到视频加载后再进行操作。
// @author       lelf
// @match        *://item.taobao.com/*
// @match        *://detail.tmall.com/*
// @connect      www.gwdang.com
// @connect      tsr.itwashot.com
// @require      https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js
// @require      https://cdn.bootcss.com/materialize/1.0.0-rc.2/js/materialize.min.js
// @require      https://cdn.bootcss.com/jszip/3.2.2/jszip.min.js
// @require      https://cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.min.js
// @require      https://cdn.bootcss.com/jszip-utils/0.1.0/jszip-utils.min.js
// @require      https://code.highcharts.com/highcharts.js
// @resource     lelf-materialcss https://cdn.jsdelivr.net/gh/lelf2005/cdn/material.css?v=20200424
// @license      GPL License
// @run-at       document-end
// @grant        GM_addStyle
// @grant        GM_getResourceText
// @grant        GM_xmlhttpRequest
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    var $ = $ || window.$;
    var materialcss = GM_getResourceText('lelf-materialcss');
    GM_addStyle(materialcss);
    addMenu();
    var zipImgs;
    var zipDetailImgs;

    function addMenu() {
        var sidenav = '<div class="fixed-action-btn">'+
            '<a class="btn-floating btn-large red">'+
            '<div class="lelf-icon-menu"></div>'+
            '</a>'+
            '<ul>'+
            '<li><a id="lelf_tb" class="btn-floating green waves-effect waves-light modal-trigger" href="#lelf_modal2" title="下载图片"><div class="lelf-icon-download"></div></a></li>'+
            '<li><a id="lelf_rank" class="btn-floating green waves-effect waves-light modal-trigger" href="#lelf_modal_rank" title="类目排行"><div class="lelf-icon-rank"></div></a></li>'+
            '<li><a id="lelf_price" class="btn-floating green waves-effect waves-light modal-trigger" href="#lelf_modal_price" title="历史价格"><div class="lelf-icon-chart"></div></a></li>'+
            '<li><a id="lelf_comments" class="btn-floating green waves-effect waves-light modal-trigger" href="#lelf_modal_comments" title="留言"><div class="lelf-icon-chat"></div></a></li>'+
            '</ul>'+
            '</div>';
        $("body").append(sidenav);
        $('.fixed-action-btn').floatingActionButton({
            hoverEnabled: false
        });

        $("#lelf_tb").click(function(){
            getTBPics();
            $('#lelf_modal2').modal();
        });

        $("#lelf_price").click(function(){
            getHistoryPrice();
            $('#lelf_modal_price').modal();
        });
        $("#lelf_rank").click(function(){
            getTopItems();
            $('#lelf_modal_rank').modal();
        });
        $("#lelf_comments").click(function(){
            addComment();
            $('#lelf_modal_comments').modal();
        });
    }

    function getTBPics(){
        zipImgs = [];
        zipDetailImgs = [];
        var imgHtml = '';
        var imgSrc = '';
        var detailImgSrc = '';
        var detailImgHtml = '';
        var mainVideo = $("video").find("source");
        var isBlobVideo = false;
        var mainVideoHtml = '';
        if(mainVideo.length > 0){
            mainVideoHtml = '<div class="row"><video class="responsive-video" controls><source src="'+mainVideo[0].src+'" type="video/mp4"></video></div>';
            zipImgs.push(mainVideo[0].src);
        }else if($("video").length > 0){
            mainVideoHtml = '<div class="row">这个视频隐藏了真实地址，暂时无法解析。</div>';
        }
        var mainImg = $("#J_UlThumb").find("img");
        for(var i =0; i< mainImg.length;i++){
            imgSrc = mainImg[i].src;
            if(imgSrc.lastIndexOf("webp")>-1){
                imgSrc = imgSrc.substring(0, imgSrc.lastIndexOf('_', imgSrc.lastIndexOf('_') - 1));
            }else{
                imgSrc = imgSrc.substring(0, imgSrc.lastIndexOf("_"));
            }
            zipImgs.push(imgSrc);
            imgHtml += '<div class="col s2"><img class="materialboxed" width="100" src="'+imgSrc+'"></div>';
        }
        var detailImg = $("#description > .content").find("img");
        for(var k =0; k< detailImg.length;k++){
            if(detailImg[k].getAttribute("data-ks-lazyload") !== null){
                detailImgSrc = detailImg[k].getAttribute("data-ks-lazyload");
            }else{
                detailImgSrc = detailImg[k].src;
            }
            var theImage = new Image();
            theImage.src = detailImgSrc;
            if(theImage.width > 100 ){
                detailImgHtml += '<div class="col s12"><img class="materialboxed" width="100%" src="'+detailImgSrc+'"></div>';
                zipDetailImgs.push(detailImgSrc);
            }
        }
        addTBHtml(mainVideoHtml,imgHtml,detailImgHtml);

        $('.materialboxed').materialbox();
    }
    function addTBHtml(video,imgs,detailImgs){
        var isAdded = $("#lelf_modal2");
        if(isAdded.length > 0){
            isAdded.remove();
        }
        var s = '  <div id="lelf_modal2" class="modal modal-fixed-footer">'+
            '    <div class="modal-content">'+
            '      <h4 class="h4">打包下载工具</h4>'+
            '<div class="row">'+
            '    <div class="col s12">'+
            '      <ul class="tabs">'+
            '        <li class="tab col s2"><a class="active" href="#main_pics">主图</a></li>'+
            '        <li class="tab col s2"><a  href="#detail_pics">详情图</a></li>'+
            '      </ul>'+
            '    </div>'+
            '    <div id="main_pics" class="col s12">'+video+'<div class="row">'+imgs+'</div></div>'+
            '    <div id="detail_pics" class="col s12">'+detailImgs+'</div>'+
            '  </div>'+
            '    </div>'+
            '    <div class="modal-footer">'+
            '       <a href="#!" id="lelf-msg" class="modal-close waves-effect waves-green btn-flat"></a>'+
            '       <a id="lelf_tbpic_download" class="waves-effect waves-light btn">下载</a>'+
            '      <a href="#!" class="modal-close waves-effect waves-green btn-flat">关闭</a>'+
            '    </div>'+
            '  </div>';
        $("body").append(s);
        var instance = M.Tabs.init($('.tabs'), '{}');
        $('.tabs').tabs('updateTabIndicator');

        $("#lelf_tbpic_download").click(function(){
            var zip = new JSZip();
            var mainImgs = zip.folder("main");
            var detailImgs = zip.folder("detail");
            var suffix = '';
            var totalAssets = zipImgs.length + zipDetailImgs.length;
            var currentAsset = 0;
            for(var i=0;i<zipImgs.length;i++){
                suffix = zipImgs[i].substring(zipImgs[i].lastIndexOf(".") + 1, zipImgs[i].length);
                mainImgs.file(i.toString()+'.'+suffix, urlToPromise(zipImgs[i]), {binary:true});
                currentAsset++;
                $("#lelf-msg").text("处理中:"+currentAsset+"/"+totalAssets);
            }
            for(var j=0;j<zipDetailImgs.length;j++){
                suffix = zipDetailImgs[j].substring(zipDetailImgs[j].lastIndexOf(".") + 1, zipDetailImgs[j].length);
                detailImgs.file(j.toString()+'.'+suffix, urlToPromise(zipDetailImgs[j]), {binary:true});
                currentAsset++;
                $("#lelf-msg").text("处理中:"+currentAsset+"/"+totalAssets);
            }
            var itemId = window.location.href.split("id=")[1].split('&')[0];
            if(itemId === null && itemId.toString().length<0){
                itemId="unknown";
            }
            zip.generateAsync({type:"blob"})
                .then(function callback(blob) {
                $("#lelf-msg").text("打包中:"+currentAsset+"/"+totalAssets);
                saveAs(blob, itemId+".zip");
                $("#lelf-msg").text("已完成:"+currentAsset+"/"+totalAssets);
            });
        });
    }
    function getHistoryPrice(){
        var isAdded = $("#lelf_modal_price");
        if(isAdded.length > 0){
            isAdded.remove();
        }
        var s = '  <div id="lelf_modal_price" class="modal modal-fixed-footer">'+
            '    <div class="modal-content">'+
            '      <h4 class="h4">历史价格</h4>'+
            '<div class="row">'+
            '    <div class="col s12">'+
            '        <div id="max_min_price"></div>'+
            '        <div id="chart_price" style="width:100%; height:350px;"></div>'+
            '    </div>'+

            '  </div>'+
            '    </div>'+
            '    <div class="modal-footer">'+
            '      <a href="#!" class="modal-close waves-effect waves-green btn-flat">关闭</a>'+
            '    </div>'+
            '  </div>';
        $("body").append(s);

        var dp_id = window.location.href.split("id=")[1].split('&')[0];
        GM_xmlhttpRequest({
            method: 'GET',
            url: 'https://www.gwdang.com/trend/data_www?dp_id='+dp_id+'&show_prom=true&v=2&get_coupon=1&price=',
            onload: response => {
                var rsp = JSON.parse(response.responseText);
                var seriesData = [];
                var maxPrice = [];
                var minPrice = [];
                if(rsp.is_ban == 1){
                    $("#max_min_price").html("请稍后再试");
                }else{
                    var d = rsp.series[0].data;
                    maxPrice = [rsp.series[0].max_stamp*1000,rsp.series[0].max/100];
                    minPrice = [rsp.series[0].min_stamp*1000,rsp.series[0].min/100];
                    $.each(d,function (index,element) {
                        seriesData.push([element.x*1000,element.y/100]);
                    })
                    $("#max_min_price").html("<span style='color:red'>最高:&nbsp;"+maxPrice[1]+"&nbsp;元&nbsp;("+formatDate(maxPrice[0])+")</span>&nbsp;&nbsp;<span style='color:green'>最低:&nbsp;"+minPrice[1]+"&nbsp;元&nbsp;("+formatDate(minPrice[0])+")</span>");

                    ////
                    Highcharts.chart('chart_price', {
                        chart: {
                            type: 'line'
                        },
                        title: {
                            text: ''
                        },
                        xAxis: {
                            type: 'datetime',
                            labels: {
                                formatter:function(){
                                    return formatDate(this.value);
                                }
                            }
                        },
                        yAxis: {
                            title: {
                                text: ''
                            }
                        },
                        tooltip: {
                            formatter : function (){
                                var s = '<span>'+formatDate(this.x)+':'+this.y+'元</span>';
                                return s;
                            }
                        },
                        legend: {
                            enabled: false
                        },

                        plotOptions: {
                            series: {
                                marker: {
                                    enabled: true
                                },
                                step: 'left'
                            }
                        },

                        credits: {
                            enabled: false
                        },

                        series: [{
                            name: "历史价格",
                            data: seriesData
                        }],

                        responsive: {
                            rules: [{
                                condition: {
                                    maxWidth: 500
                                },
                                chartOptions: {
                                    plotOptions: {
                                        series: {
                                            marker: {
                                                radius: 2.5
                                            }
                                        }
                                    }
                                }
                            }]
                        }
                    }); ////
                }
            }
        });



    }
    function getTopItems(){
        var isAdded = $("#lelf_modal_rank");
        if(isAdded.length > 0){
            return;
        }
        var s = '  <div id="lelf_modal_rank" class="modal modal-fixed-footer">'+
            '    <div class="modal-content">'+
            '      <h5 class="h5 header" id="itemcat">加载中，请稍等</h5>'+
            '<div id="lelf-top-items">'+

            '</div>'+
            '    </div>'+
            '    <div class="modal-footer">'+
            '      <a href="#!" class="modal-close waves-effect waves-green btn-flat">关闭</a>'+
            '    </div>'+
            '  </div>';
        $("body").append(s);

        var dp_id = window.location.href.split("id=")[1].split('&')[0];
        toggleLoader(true);
        GM_xmlhttpRequest({
            method: 'GET',
            url: 'https://tsr.itwashot.com/api/index?id='+dp_id,
            onload: response => {
                if(isJSON(response.responseText)){
                    var colors = ["lelf-gold","lelf-silver","lelf-orange","lelf-blue"];
                    var item_color = 0;

                    var rsp = JSON.parse(response.responseText);
                    if(rsp.category_id){
                        $("#itemcat").html("当前商品分类销量前20<a href='https://tsr.itwashot.com' target='_blank' style='position: absolute;right:5px;font-size:16px;'>更多排行点这里</a><div style='font-size:20px;margin-top: 10px;'>"+rsp.level_one_category_name+"-"+rsp.category_name+"</div>");
                        var topItems = rsp.top;
                        var htmlItems = '';
                        for(var i=0;i<topItems.length;i++){
                            item_color = i<3?i:3;
                            var strCoupon ='';
                            if(topItems[i].coupon_amount > 0){
                                strCoupon = '<span class="lelf-ribbon4">'+topItems[i].coupon_amount+'元券</span>';
                            }
                            htmlItems = htmlItems + '<div class="row">'+
                                '<div class="col s1">'+

                                '<div class="lelf-badge-container"><div class="lelf-badge '+colors[item_color]+'">'+
                                '<div class="lelf-circle"> <div class="h5 strong" style="margin-top:3px;">'+(i+1)+'</div></div></div>'+

                                '</div>'+
                                '</div>'+
                                '<div class="col s11">'+
                                '<div class="card horizontal">'+
                                '      <div class="card-image">'+
                                '        <img src="'+topItems[i].pic_url+'_200x200.jpg">'+
                                '      </div>'+
                                '      <div class="card-stacked">'+
                                '        <div class="card-content">'+
                                '          <p class="h6">'+topItems[i].title+'</p>'+
                                '          <div style="margin-top:18px;">价格 <span class="h5 red-text"> ￥'+topItems[i].current_price+'</span>'+strCoupon+'</div>'+
                                '        </div>'+
                                '        <div class="card-action">'+
                                '<div class="btn-flat"  style="text-decoration:none;font-size:18px;">30天销售<span class="red-text">'+topItems[i].volume+'</span>件</div>'+
                                '          <a href="'+topItems[i].url+'" target="_blank" class="btn waves-effect waves-light red lighten-2" style="text-decoration:none;font-size:20px;float: right;">查看商品</a>'+
                                '        </div>'+
                                '      </div>'+
                                '    </div>'+
                                '</div>'+
                                '  </div>'
                        }
                        $("#lelf-top-items").html(htmlItems);

                    }
                }else{
                    $("#itemcat").html("服务器错误，请稍后再试");
                }
                toggleLoader(false);
            },
            onerror:err =>{
                toggleLoader(false);
            }
        });

    }
    function addComment(){
        var isAdded = $("#lelf_modal_comments");
        if(isAdded.length > 0){
            isAdded.remove();
        }
        var s = '  <div id="lelf_modal_comments" class="modal modal-fixed-footer">'+
            '    <div class="modal-content">'+
            '      <h5 class="h5 header" id="comment_msg">留言</h5>'+
            '<div id="lelf-comment">'+
            '<div class="row"><form class="col s12"><div class="row"><div class="input-field col s12">'+
            '<textarea id="comment" class="materialize-textarea" data-length="120"></textarea>'+
            '<label for="comment">如需回复，请留下邮箱地址</label><a class="waves-effect waves-light btn" id="btnAddComment">提交</a></div></div></form></div>'+
            '        <img src="https://cdn.jsdelivr.net/gh/lelf2005/cdn/images/pdx.jpg" style="width:200px;height:200px;">'+
            '</div>'+
            '    </div>'+
            '    <div class="modal-footer">'+
            '      <a href="#!" class="modal-close waves-effect waves-green btn-flat">关闭</a>'+
            '    </div>'+
            '  </div>';
        $("body").append(s);

        $("#btnAddComment").click(function(){

            GM_xmlhttpRequest({
                method: 'POST',
                url: 'https://tsr.itwashot.com/api/hello',
                data : JSON.stringify({'comment':$("#comment").val()}),
                headers:{
                    "Content-Type": "application/json"
                },
                onload: response => {
                    if(isJSON(response.responseText)){
                        var rsp = JSON.parse(response.responseText);
                        if(rsp.status == "success"){
                            $("#comment_msg").html("提交成功，感谢您的留言");
                        }
                    }else{
                        $("#comment_msg").html("服务器错误，请稍后再试");
                    }
                },
                onerror:err =>{
                    $("#comment_msg").html("服务器错误，请稍后再试");
                }
            });

        });

        
    }

    function toggleLoader(flag){

        if(flag){
            var strHtml='<div class="lelf-loader" id="loader"><div class="lelf-dot"></div><div class="lelf-dot"></div><div class="lelf-dot"></div><div class="lelf-dot"></div><div class="lelf-dot"></div></div>';
            $("#lelf-top-items").append(strHtml);
        }else{
            $("#loader").remove();
        }
    }

    function isJSON(str) {
        if (typeof str == 'string') {
            try {
                var obj=JSON.parse(str);
                if(typeof obj == 'object' && obj ){
                    return true;
                }else{
                    return false;
                }

            } catch(e) {
                return false;
            }
        }
    }

    function urlToPromise(url) {
        return new Promise(function(resolve, reject) {
            JSZipUtils.getBinaryContent(url, function (err, data) {
                if(err) {
                    reject(err);
                } else {
                    resolve(data);
                }
            });
        });
    }
    function formatDate(date) {
        var d = new Date(date),
            month = '' + (d.getMonth() + 1),
            day = '' + d.getDate(),
            year = d.getFullYear();

        if (month.length < 2){month = '0' + month;}
        if (day.length < 2){day = '0' + day;}

        return [year, month, day].join('-');
    }

    // Your code here...
})();