var tipPosition = "bottom"; //分享提示信息位置,middle,bottom
var tipText="长按保存图片";
var tipStyle="";
var topInto="";

(function(window){
	if (tipPosition =="middle"){ //中间样式
		tipText = "长按保存图片";
		tipStyle = "tipsBtn";
	}else if (tipPosition =="bottom"){ //底部样式
		tipText = "点击图片，长按分享给好友";
		tipStyle ="buttomtips";
	}
	if (tipPosition =="bottom"){	//页面顶部信息
		topInto ='<div class="synthHead">'+
				'    <img src="/h5/public/static/logo.png" style="width: 30px;height: 30px;" alt=""/>'+
				'    <div>'+ $("#publishDateTime").text() +'</div>'+
				'</div>';
	}

    var designWidth = 750,
        maxWidth = 750,
        doc = document,
        win = window,
        docEl = doc.documentElement,
        remStyle = document.createElement("style"),
        tid;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        maxWidth = maxWidth || 540;
        width > maxWidth && (width = maxWidth);
        var rem = width * 100 / designWidth;
        var remnew = width / designWidth;
       // remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
       remStyle.innerHTML = 'html{font-size:' +62.5*remnew+'% !important;}';
    }

    if (docEl.firstElementChild) {
        docEl.firstElementChild.appendChild(remStyle);
    } else {
        var wrap = doc.createElement("div");
        wrap.appendChild(remStyle);
        doc.write(wrap.innerHTML);
        wrap = null;
    }

    //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；

    win.addEventListener("resize", function () {
        clearTimeout(tid); //防止执行两次
        tid = setTimeout(refreshRem, 300);
    }, false);

    win.addEventListener("pageshow", function (e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === "complete") {
        doc.body.style.fontSize = "16px";
    } else {
        doc.addEventListener("DOMContentLoaded", function (e) {
            doc.body.style.fontSize = "16px";
        }, false);
    }

    var PosterSplicing=function(selector){
        return new PosterSplicing.fn.init(selector)
    }
    var imagesNum = [1,2,4,8],//海报需要的图片数量
        logoSrc = "/h5/public/static/logo.png",//logo的图片
        posterTime= $("#publishDateTime").text(),//版面的日期
        haibaoImg = $.Deferred();//海报canvas生成的图片
        twoHorHaibaoImg = $.Deferred();//两张横向海报canvas生成的图片
        qrcodeImg = $.Deferred();//二维码canvas生成的图片
        imgUrlHeight = $.Deferred();//报纸的高度;

    PosterSplicing.fn={
        show:function(value){//显示图片列表
            refreshRem();
            console.log('show');
            $("body").append('<div class="posterMask active"></div>')
            var posterHtml = '<div class="posterSplicingWrap">'+
                                '<div class="closePoster"><i></i></div>'+
                                '<div class="posterChoseWrap">';
            $(this).map((i,v)=>{
                if($(v)[0].currentSrc!=''){
                    posterHtml  +=  '<div class="item" id="images'+i+'">'+
                        '<img class="itemPic" src="'+$(v)[0].currentSrc+'" alt=""/>'+
                        '<div class="itemMask">'+
                            '<i class="choseBtn"></i>'+
                        '</div>'+
                    '</div>';
                }
            });
            posterHtml += '</div>'+
                            '<div class="chosedBoxList">'+
                                '<div class="chosedHead">'+
                                    '<p class="allPageBtn">一键拼图</p>'+
//                                    '<p class="tips">请选择1、2、4、8张图片</p>'+
                                    '<p class="tips">请选择版面，拼图分享</p>'+
                                    '<p class="chosedBtn">开始拼图</p>'+
                                '</div>'+
                                '<div class="chosedPicList">'+
                                '</div>'+
                            '</div>'+
                        '</div>'
            $('body').append(posterHtml);
            this.loading(false);
            $("body .posterSplicingWrap").on("click",".closePoster",function(){
                $('.posterSplicingWrap,.posterMask').remove();
                remStyle.innerHTML = 'html{font-size:initial}';
            })
        },
        jigsawPuzzleBeginBtn:function(value){//开始拼图按钮数值变化
            if($("body .chosedBoxList .chosedPicList>.item").length>0){
                $("body .chosedBoxList .chosedBtn").addClass("active").html('开始拼图('+$("body .chosedBoxList .chosedPicList>.item").length+')');
            }else
                $("body .chosedBoxList .chosedBtn").removeClass("active").html('开始拼图');
        },
        choseImage:function(value){//选择海报需要图片
            if($('body .chosedBoxList .chosedPicList .item[chose-id="'+$(this).attr("id")+'"]').length>0){
                $('body .chosedBoxList .chosedPicList .item[chose-id="'+$(this).attr("id")+'"]').remove();
                $("body .posterChoseWrap").children("#"+$(this).attr("id")).removeClass("active");
                PosterSplicing.fn.jigsawPuzzleBeginBtn();
            }else{
                $("body .chosedBoxList .chosedPicList").append('<div class="item" chose-id="'+$(this).attr("id")+'">'+
                    '<img class="itemPic" src="'+$(this).children(".itemPic").attr("src")+'" alt=""/>'+
                    '<i class="choseBtn" chose-id="'+$(this).attr("id")+'"></i>'+
                '</div>');
                $("body .posterChoseWrap").children("#"+$(this).attr("id")).addClass("active");
                PosterSplicing.fn.jigsawPuzzleBeginBtn();
            }
        },
        cancelImage:function(value){//取消选择的图片
            $("body .posterChoseWrap").children("#"+$(this).attr("chose-id")).removeClass("active");
            $(this).parents('.item').remove();
            PosterSplicing.fn.jigsawPuzzleBeginBtn();
        },
        choseWraringTips:function(value,text){//显示提示弹层
            var tipsHtml = '<div class="wraringWrapper"><div class="wraningBox">'+
                    '<div class="title">提示</div>'+
                    '<div class="tips">'+text+'</div>'+
                    '<div class="btn">确定</div>'
                '</div></div>';
            $(".posterSplicingWrap").append(tipsHtml);
        },
        hideWraringTips:function(){//隐藏提示弹层
            $(".posterSplicingWrap .wraringWrapper").remove();
        },
        piecingTogether:function(){//点击拼图按钮
            var itemLength = $("body .chosedBoxList .chosedPicList>.item").length;
            if(itemLength==0){
                this.choseWraringTips(this,'请至少选择一张图片！');
                return ;
            }
            //if(!imagesNum.includes(itemLength)){
            //    this.choseWraringTips(this,'请选择1张、2张、4张或者8张图片！');
            //    return ;
            //}
            var iamgesArry = [];
            $("body .chosedBoxList .chosedPicList>.item").map((i,v)=>{
                iamgesArry.push($(v).children('img').attr("src"))
            });
            this.loading(true);
            switch(itemLength){
                case 1:
                    this.onePoster(iamgesArry)
                    break;
                case 2:
                    this.twoPoster(iamgesArry)
                    break;
                case 4:
                    this.fourPoster(iamgesArry)
                    break;
                case 8:
                    this.eightPoster(iamgesArry)
                    break;
				default:
					this.twoPoster(iamgesArry)
            }
        },
        piecingTogetherAll:function(){//点击一键拼图按钮，全部拼图
            this.loading(true);
            var iamgesArry = [];
            $("body .posterChoseWrap>.item").map((i,v)=>{
                iamgesArry.push($(v).children('img').attr("src"))
            });
            this.twoPoster(iamgesArry);
        },
        onePoster:function(value){//一张拼图
            var onePosterHtml='<div class="posterWrapper">'+
                    '<div class="closeBtn"><i></i></div>'+
                    '<div class="originalWrapper onePoster" id="originalWrapper">'+
                        '<div class="defalutLayoutPoster">'+topInto+
                            '<div class="imageBox">'+
                                '<img class="imgPic" src="'+value[0]+'" alt=""/>'+
                            '</div>'+
                            '<div class="footer">'+
                                '<div class="logo"><img src="'+logoSrc+'" alt="logo"/></div>'+
                                '<div class="time">'+(tipPosition =="middle"?posterTime:'识别二维码<br>查看该版内容')+'</div>'+
                                '<div class="code" id="qrcode"></div>'+
                            '</div>'+
                        '</div>'+
                    '</div>'+
                    '<div id="newPosterWrapper" class="newPosterWrapper">'+
                        '<img src="" alt=""/>'+
                        '<div class="'+ tipStyle +'">'+tipText+'</div>'+
                    '</div>'+
                '</div>';
            $(".posterSplicingWrap").append(onePosterHtml);
            setTimeout(function(){
                codeImg("originalWrapper","newPosterWrapper");
            },1000)

        },
        twoPoster:function(value){//两张拼图
            var fourImages = '';
            value.map((v,i)=>{
                fourImages += '<div class="imageBox">'+
                                '<img class="imgPic" src="'+v+'" alt=""/>'+
                            '</div>'
            });
            var twoPosterHtml='<div class="posterWrapper" style="padding-bottom:26rem">'+
                    '<div class="closeBtn"><i></i></div>'+
                    '<div class="verticalPoster active">'+
                        '<div class="originalWrapper onePoster" id="originalWrapper">'+
                            '<div class="defalutLayoutPoster">'+topInto+
                                fourImages +
                                '<div class="footer">'+
                                    '<div class="logo"><img src="'+logoSrc+'" alt="logo"/></div>'+
                                    '<div class="time">'+(tipPosition =="middle"?posterTime:'识别二维码<br>查看该版内容')+'</div>'+
                                    '<div class="code" id="qrcode"></div>'+
                                '</div>'+
                            '</div>'+
                        '</div>'+
                        '<div id="newPosterWrapper" class="newPosterWrapper">'+
                            '<img src="" alt=""/>'+
                            '<div class="'+ tipStyle +'">'+tipText+'</div>'+
                        '</div>'+
                    '</div>'+
                    '<div class="horizontalPoster">'+
                        '<div class="originalWrapper " id="horOriginalWrapper">'+
                            '<div class="defalutLayoutPoster">'+topInto+
                                fourImages +
                                '<div class="footer">'+
                                    '<div class="logo"><img src="'+logoSrc+'" alt="logo"/></div>'+
                                    '<div class="time">'+(tipPosition =="middle"?posterTime:'识别二维码<br>查看该版内容')+'</div>'+
                                    '<div class="code" id="qrcodeHor"></div>'+
                                '</div>'+
                            '</div>'+
                        '</div>'+
                        '<div id="newHorPosterWrapper" class="newPosterWrapper">'+
                            '<img src="" alt=""/>'+
                            '<div class="'+ tipStyle +'">'+tipText+'</div>'+
                        '</div>'+
                    '</div>'+
                    '<div class="choseDirectionBox">'+
                        '<div class="left active" type="verticalPoster"></div>'+
                        '<div class="right" type="horizontalPoster"></div>'+
                    '</div>'+
                '</div>';
            $(".posterSplicingWrap").append(twoPosterHtml);
            $("body .choseDirectionBox>item");
            setTimeout(function(){
                codeImg("originalWrapper","newPosterWrapper");
            },1000)

            $("body .choseDirectionBox").on("click",".left",function(){
                $(this).addClass("active").siblings().removeClass("active");
                $("body .verticalPoster").addClass("active").siblings(".horizontalPoster").removeClass("active");
            });
            $("body .choseDirectionBox").on("click",".right",function(){
                $(this).addClass("active").siblings().removeClass("active");
                $("body .horizontalPoster").addClass("active").siblings(".verticalPoster").removeClass("active");
                if($("#newHorPosterWrapper img").attr("src")==""){
                    setTimeout(function(){
                        codeImg("horOriginalWrapper","newHorPosterWrapper");
                    },1000)

                }
            })
        },
        fourPoster:function(value){//四张拼图
            var fourImages = '';
            value.map((v,i)=>{
                fourImages += '<div class="imageBox">'+
                                '<img class="imgPic" src="'+v+'" alt=""/>'+
                            '</div>'
            });
            var fourPosterHtml='<div class="posterWrapper">'+
                    '<div class="closeBtn"><i></i></div>'+
                    '<div class="originalWrapper fourPoster" id="originalWrapper">'+
                        '<div class="defalutLayoutPoster">'+topInto+
                            fourImages +
                            '<div class="footer">'+
                                '<div class="logo"><img src="'+logoSrc+'" alt="logo"/></div>'+
                                '<div class="time">'+(tipPosition =="middle"?posterTime:'识别二维码<br>查看该版内容')+'</div>'+
                                '<div class="code" id="qrcode"></div>'+
                            '</div>'+
                        '</div>'+
                    '</div>'+
                    '<div id="newPosterWrapper" class="newPosterWrapper">'+
                        '<img src="" alt=""/>'+
                        '<div class="'+ tipStyle +'">'+tipText+'</div>'+
                    '</div>'+
                '</div>';
            $(".posterSplicingWrap").append(fourPosterHtml);
            setTimeout(function(){
              codeImg('originalWrapper',"newPosterWrapper");
            },1000)

        },
        eightPoster:function(value){//八张拼图
            var eightImages = '';
            value.map((v,i)=>{
                if(i==4){
                    eightImages += '<div class="imageBox">'+
                                    '<div class="code" id="qrcode"></div>'+
                                '</div>'+
                                '<div class="imageBox">'+
                                    '<img class="imgPic" src="'+v+'" alt=""/>'+
                                '</div>'
                }else
                    eightImages += '<div class="imageBox">'+
                                '<img class="imgPic" src="'+v+'" alt=""/>'+
                            '</div>'
            });
            var eightPoster='<div class="posterWrapper">'+
                    '<div class="closeBtn"><i></i></div>'+
                    '<div class="originalWrapper eightPoster" id="originalWrapper">'+
                        '<div class="defalutLayoutPoster">'+topInto+
                            eightImages +
                            '<div class="footer">'+
                                '<div class="logo"><img src="'+logoSrc+'" alt="logo"/></div>'+
                                '<div class="time">'+(tipPosition =="middle"?posterTime:'识别二维码<br>查看该版内容')+'</div>'+
                            '</div>'+
                        '</div>'+
                    '</div>'+
                    '<div id="newPosterWrapper" class="newPosterWrapper">'+
                        '<img src="" alt=""/>'+
                        '<div class="'+ tipStyle +'">'+tipText+'</div>'+
                    '</div>'+
                '</div>';
            $(".posterSplicingWrap").append(eightPoster);
            setTimeout(function(){
                codeImg('originalWrapper',"newPosterWrapper");
            },1000)

        },
        closePosterGenerate:function(){//关闭生成的海报层
            $(".posterSplicingWrap .posterWrapper").remove();
            haibaoImg = $.Deferred();
            twoHorHaibaoImg = $.Deferred();
        },
        loading:function(value){//loading显示隐藏
            if(value){
                $(".posterMask").addClass('active');
            }else{
                $(".posterMask").removeClass('active');
            }
        },
    }

    var init  = PosterSplicing.fn.init = function(selector){
        var slice = Array.prototype.slice
        var dom = slice.call($('.'+selector))
        console.log('进入',dom)
        var i, len = dom ? dom.length : 0
        for (i = 0; i < len; i++) {
            this[i] = dom[i]
        }
        this.length = len
        this.selector = selector || ''
    }
    init.prototype = PosterSplicing.fn;

    window.POSTER = PosterSplicing

    //点击事件
    //选择图片
    $('body').on('click','.posterChoseWrap .item',function(){
        PosterSplicing.fn.choseImage.apply(this)
    });
    //取消选择的图片
    $('body').on('click','.chosedPicList .item .choseBtn',function(){
        PosterSplicing.fn.cancelImage.apply(this)
    });
    $('body').on('click','.chosedBoxList .chosedBtn',function(){
        PosterSplicing.fn.piecingTogether(this)
    });
    $('body').on('click','.chosedBoxList .allPageBtn',function(){
        PosterSplicing.fn.piecingTogetherAll(this)
    });
    //提示
    $('body').on('click','.wraningBox .btn',function(){
        PosterSplicing.fn.hideWraringTips(this)
    });
    //关闭生成的海报
    $('body').on('click','.posterWrapper .closeBtn i',function(){
        PosterSplicing.fn.closePosterGenerate(this)
    });

    //二维码生成图片
    function codeImg(psterBox,newPosterBox){
        var url = window.location.href;
        url = url.indexOf("?")<0?url+"?v=10000":url;
        $('body').find('#qrcode').qrcode({ width: 150,height:150,correctLevel:0,render:"table",margin:'0 auto', text:url});
        synthesisImg('qrcode',qrcodeImg);//生成二维码
        $.when(qrcodeImg).done(function ( v1 ) {
            $('body').find('#qrcode').addClass('active').html('<img src="'+v1+'" alt="" />');
            if($("body").find("#qrcodeHor")){
                $('body').find('#qrcodeHor').addClass('active').html('<img src="'+v1+'" alt="" />');
            }
            //loadImage();//报纸图片加载
            synthesisImgLoad(psterBox,newPosterBox);
        });
    }
    //图片加载完成后生成海报
    function synthesisImgLoad(psterBox,newPosterBox){
        if(newPosterBox=='newHorPosterWrapper'){
            synthesisImg(psterBox,twoHorHaibaoImg);//生成海报
            $.when(twoHorHaibaoImg).done(function ( v1) {
                $('#'+newPosterBox+' img').attr('src',v1);
                $('#'+psterBox).hide();
                PosterSplicing.fn.loading(false)
            });
        }else{
            synthesisImg(psterBox,haibaoImg);//生成海报
            $.when(haibaoImg).done(function ( v1) {
                $('#'+newPosterBox+' img').attr('src',v1);
                $('#'+psterBox).hide();
                PosterSplicing.fn.loading(false);
            });
        }
    }
    //生成图片
    function synthesisImg(sourceHtml,canvasImg) {
        //clearInterval(synthesisImgLoad)
        var canvas = document.createElement('canvas') // 创建一个canvas节点
        var shareContent = document.getElementById(sourceHtml) // 需要截图的包裹的（原生的）DOM 对象
        var width = shareContent.offsetWidth // 获取dom 宽度
        var height = shareContent.offsetHeight // 获取dom 高度
        var scale = 2 // 定义任意放大倍数 支持小数
        canvas.getContext('2d').scale(scale, scale) // 获取context,设置scale
        var rect = shareContent.getBoundingClientRect() // 获取元素相对于视口的
        html2canvas(document.getElementById(sourceHtml),{
            x: rect.left, // 绘制的dom元素相对于视口的位置
            y: rect.top,
            width: width, // dom 原始宽度
            height: height,
            windowWidth: document.body.scrollWidth,
            windowHeight: document.body.scrollHeight,
            // x: 0,
            // y: 0,
            useCORS: true, // 开启跨域
            dpi: window.devicePixelRatio * 2,
            scale: scale, // 添加的scale 参数
        }).then((canvas)=>{
            var context = canvas.getContext('2d')
            //关闭抗锯齿
            context.mozImageSmoothingEnabled = false
            context.msImageSmoothingEnabled = false
            context.imageSmoothingEnabled = false
            canvasImg.resolve(canvas.toDataURL());
        })
    }
})(window)