/**

 * created by wangcheng on 2020/9/24.

 */

function showzoomimg(domname, model) {

    var len = 0; //预览总图片数默认为零

    var domimg; //img dom

    var arrpic = new array(); //定义一个数组src

    var arrname = new array(); //定义一个数组name

    var num = 0; //当前预览的

    var numnow = 1; //当前预览序号,最小为1

    var leftpoint; //向左移动范围

    var rightpoint; //右移动范围

    var spin_n = 0; //旋转角度

    var zoom_n = 1;//缩放 放大



    showmodel(model); //判断显示方式



    function showmodel(model) {

        if(model == "img") { //图片直接查看

            $("body").on('click', domname, function() {

                domimg = $(this).parents('.zoomimgbox').find(domname);

                len = domimg.length;

                arrpic = [];

                arrname = [];

                for(var i = 0; i < len; i++) {

                    arrpic[i] = domimg.eq(i).attr("src"); //将所有img路径存储到数组中

                    if(domimg.eq(i).attr("data-caption")) {

                        arrname[i] = domimg.eq(i).attr("data-caption");

                    } else {

                        arrname[i] = '图片' + (i + 1);

                    }

                }

                var img_index = domimg.index(this); //获取点击的索引值

                num = img_index;

                numnow = num + 1;



                addmasklater(); //添加弹出dom

            });

        } else if(model == "text") {

            $("body").on('click', domname, function() {

                domimg = $(this).children('.zoomimg-hide-box').find('img');

                len = domimg.length;

                if(len < 1) {

                    layui.use('layer', function() {

                        var layer = layui.layer;

                        layer.msg('暂未上传资料图片');

                    });

                    return;

                }

                num = 0;

                numnow = 1;

                arrpic = [];

                arrname = [];

                for(var i = 0; i < len; i++) {

                    arrpic[i] = domimg.eq(i).attr("src"); //将所有img路径存储到数组中

                    if(domimg.eq(i).attr("data-caption")) {

                        arrname[i] = domimg.eq(i).attr("data-caption");

                    } else {

                        arrname[i] = '图片' + (i + 1);

                    }



                }



                addmasklater();

            })

        }

    }



    //给body添加弹出层的html

    function addmasklater() {

        var maskbg =

            "<div class=\"mask-layer\">" +

            "<div class=\"mask-layer-black\"></div>" +

            "<div class=\"mask-layer-container\">" +

            "<div class=\"mask-layer-imgbox\"></div>" +

            "<div class=\"mask-layer-close\"></div>" +

            "<div class=\"img-pre\"></div>" +

            "<div class=\"img-next\"></div>" +

            "<ul class=\"contextmenu\" id='contextmenu'>" +

            "<li>" +

            "<a class=\"clockwise\">顺时针旋转90°</a>" +

            "</li>" +

            "<li>" +

            "<a class=\"counterclockwise\">逆时针旋转90°</a>" +

            "</li>" +

            "</ul>" +

            "</div>" +

            "</div>";

        $("body").append(maskbg);



        if(len > 1) {

            showsmall(); //加载缩略图

        } else {

            $(".img-pre").css('display', 'none');

            $(".img-next").css('display', 'none');

        }



        showimg(); //图片加载

        showctrl(); //插件操作

    }



    /*加载图片 及图片操作*/

    function showimg() {

        $(".mask-layer-imgbox").empty();

        var imgcont = '<div class="mask-layer-imgname">' + arrname[num] + '</div>' +

            '<div class="layer-img-box"><img src="' + arrpic[num] + '" alt=""></div>';

        $(".mask-layer-imgbox").append(imgcont);

        imginit(); //图片操作

    }



    /*插件操作*/

    function showctrl() {

        //上一张

        $(".img-pre").on("click", function() {

            num--;

            if(num == -1) {

                num = len - 1;

            }

            showimg();

            showsmallthis(); //显示当前选中

        });

        //下一张

        $(".img-next").on("click", function() {

            num++;

            if(num == len) {

                num = 0;

                boxreset();

            }

            showimg();

            showsmallthis(); //显示当前选中

        });

        /*关闭*/

        $(".mask-layer-close").click(function() {

            $(".mask-layer").remove();

        });



        /*缩略图操作方法*/

        if(arrpic.length > 1) {

            showsmallthis(); //显示当前选中

        }

        /*缩略图当前*/

        function showsmallthis() { //显示当前选中的小图

            $('.mask-small-img').removeclass('onthis');

            $($('.mask-small-img')[num]).addclass('onthis');

            allowshow();

        }



        /*小图点击切换*/

        $('.mask-small-img').on("click", function() {

            num = $('.mask-small-img').index(this);

            showimg();

            showsmallthis(); //显示当前选中

        });



        /*box-go-left 内容向右移动*/

        $('.box-go-left').on('click', function() {

            boxgoright();

        });



        $('.box-go-right').on('click', function() {

            boxgoleft();

        });



        function boxgoleft(inttime) { //向左移动

            inttime ? inttime : inttime = 1;

            if(leftpoint > 0) {

                $('.small-img-box').animate({

                    left: '-=' + 600 * inttime

                }, 500);

                leftpoint = leftpoint - inttime;

                rightpoint = rightpoint + inttime;

            }

        }



        function boxgoright() { //向右移动

            if(rightpoint > 0) {

                $('.small-img-box').animate({

                    left: '+=600'

                }, 500);

                leftpoint++;

                rightpoint--;

            }

        }



        function allowshow() { //保持选中的图片在容器中能看到

            /*跟随切换*/

            var boxleft = $('.small-content').offset().left; //盒子距离顶部

            var thisleft = $('.mask-small-img.onthis').offset().left; //当前选中图片距离顶部

            var inttime = math.floor((thisleft - boxleft) / 600);

            if(thisleft - boxleft >= 600) {

                boxgoleft(inttime);



            } else if(thisleft < boxleft) {

                boxgoright();

            } else {

                //console.log('不需移动')

            }

        }

        /*复位*/

        function boxreset() {

            $('.small-img-box').animate({

                left: '0'

            }, 500);

            leftpoint = math.ceil(arrpic.length / 5) - 1;

            rightpoint = 0;

        }

        $(".clockwise").click(function() {

            clockwise(); //顺时针旋转

        });

        $(".counterclockwise").click(function() {

            counterclockwise(); //逆时针旋转

        })

        /*顺时针旋转*/

        function clockwise() {

            spin_n += 90;

            $(".mask-layer-imgbox img").css({

                "transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",

                "-moz-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",

                "-ms-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",

                "-o-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",

                "-webkit-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")"

            });

        };

        /*逆时针旋转*/

        function counterclockwise() {

            spin_n -= 90;

            $(".mask-layer-imgbox img").css({

                "transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",

                "-moz-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",

                "-ms-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",

                "-o-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",

                "-webkit-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")"

            });

        }

        rightmenu('.mask-layer-container');



        function rightmenu(dom) {

            // 鼠标右键事件

            $(dom).contextmenu(function(e) {

                // 获取窗口尺寸

                var winwidth = $(document).width();

                var winheight = $(document).height();

                // 鼠标点击位置坐标

                var mousex = e.clientx;

                var mousey = e.clienty;

                // ul标签的宽高

                var menuwidth = $(".mask-layer .contextmenu").width();

                var menuheight = $(".mask-layer.contextmenu").height();

                // 最小边缘margin(具体窗口边缘最小的距离)

                var minedgemargin = 10;

                // 以下判断用于检测ul标签出现的地方是否超出窗口范围

                // 第一种情况：右下角超出窗口

                if(mousex + menuwidth + minedgemargin >= winwidth &&

                    mousey + menuheight + minedgemargin >= winheight) {

                    menuleft = mousex - menuwidth - minedgemargin + "px";

                    menutop = mousey - menuheight - minedgemargin + "px";

                }

                // 第二种情况：右边超出窗口

                else if(mousex + menuwidth + minedgemargin >= winwidth) {

                    menuleft = mousex - menuwidth - minedgemargin + "px";

                    menutop = mousey + minedgemargin + "px";

                }

                // 第三种情况：下边超出窗口

                else if(mousey + menuheight + minedgemargin >= winheight) {

                    menuleft = mousex + minedgemargin + "px";

                    menutop = mousey - menuheight - minedgemargin + "px";

                }

                // 其他情况：未超出窗口

                else {

                    menuleft = mousex + minedgemargin + "px";

                    menutop = mousey + minedgemargin + "px";

                };

                // ul菜单出现

                $(".mask-layer .contextmenu").css({

                    "left": menuleft,

                    "top": menutop

                }).show();

                // 阻止浏览器默认的右键菜单事件

                return false;

            });

            // 点击之后，右键菜单隐藏

            $(document).click(function() {

                $(".contextmenu").hide();

            });

        }



    }



    /*图片操作方法*/

    function imginit() {

        zoom_n = 1;//重置缩放比例

        /*图片拖拽*/

        var $div_img = $(".layer-img-box img");

        //绑定鼠标左键按住事件

        $div_img.bind("mousedown", function(event) {

            event.preventdefault && event.preventdefault(); //去掉图片拖动响应

            //获取需要拖动节点的坐标

            var offset_x = $(this)[0].offsetleft; //x坐标

            var offset_y = $(this)[0].offsettop; //y坐标

            //获取当前鼠标的坐标

            var mouse_x = event.pagex;

            var mouse_y = event.pagey;

            //绑定拖动事件

            //由于拖动时，可能鼠标会移出元素，所以应该使用全局（document）元素

            $(".layer-img-box").bind("mousemove", function(ev) {

                // 计算鼠标移动了的位置

                var _x = ev.pagex - mouse_x;

                var _y = ev.pagey - mouse_y;

                //设置移动后的元素坐标

                var now_x = (offset_x + _x) + "px";

                var now_y = (offset_y + _y) + "px";

                //改变目标元素的位置

                $div_img.css({

                    top: now_y,

                    left: now_x

                });

            });

            //当鼠标左键松开，接触事件绑定

            $(".layer-img-box").bind("mouseup", function() {

                $(".layer-img-box").unbind("mousemove");

            });

        });

        //绑定鼠标滚轮缩放图片

        $div_img.bind("mousewheel dommousescroll", function(e) {

            e = e || window.event;

            var delta = e.originalevent.wheeldelta || e.originalevent.detail;

            var dir = delta > 0 ? 'down' : 'up';

            zoomimg(this, dir);

            return false;

        });



        //鼠标滚轮缩放图片

        function zoomimg(o, delta) {

            if(delta == 'up') {

                zoom_n -= 0.2;

                zoom_n = zoom_n <= 0.2 ? 0.2 : zoom_n;

            } else {

                zoom_n += 0.2;

            }

            $(".mask-layer-imgbox img").css({

                "transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",

                "-moz-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",

                "-ms-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",

                "-o-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",

                "-webkit-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")"

            });

        }

    }



    /*缩略图显示*/

    function showsmall() {

        leftpoint = math.ceil(arrpic.length / 6) - 1;

        rightpoint = 0;



        $(".mask-layer-imgbox").addclass('has-small');

        var sdom = "<div class='small-content'><div class='small-img-box'></div></div>"

        $(".mask-layer-container").append(sdom);

        /*添加缩略图显示*/

        for(var i = 0; i < arrpic.length; i++) {

            $('.small-img-box').append('<img class="mask-small-img" src=' + arrpic[i] + '>');

        }

        if(arrpic.length > 6) { //大于六张出现左右移动按钮

            $(".small-img-box").width(math.ceil(arrpic.length / 6) * 600);

            $('.small-content').append('<span class="box-go-left"></span><span class="box-go-right"></span>');

        }

    }

}