// ==UserScript==
// @name         淘宝天猫图片打包下载,历史价格
// @namespace    https://hlelf.com/
// @version      0.2.1
// @description  淘宝主图，主图视频，详情图打包下载。【说明】请先将页面下拉到最后，确认所有详情图完全显示后再点击右下侧的按钮，否则会获取不到图片资源，如果有视频，请等到视频加载后再进行操作。
// @author       lelf
// @match        *://item.taobao.com/*
// @match        *://detail.tmall.com/*
// @connect      www.gwdang.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=20200111
// @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_price" class="btn-floating green waves-effect waves-light modal-trigger" href="#lelf_modal_price" title="历史价格"><div class="lelf-icon-chart"></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();
        });
    }

    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 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...
})();