/**
 * 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>');
        }
    }
}