class PreviewImage {

    // 属性都是全局的
    body = this.$("body");
    option = {};
    isBackMove = false;

    x1 = 0;
    y1 = 0;
    l = 0;
    t = 0;

    constructor(option) {
        if (!option.hasOwnProperty("image")) {
            throw new Error("参数image缺少，请检查")
        }

        if (!option.hasOwnProperty("showIndex")) {
            throw new Error("参数showIndex缺少，请检查")
        }

        this.option = option
        console.log(this.option);

        this.created();
        this.BindClose();

        this.BindPrevious();
        this.BindNext();
        this.BindSuoXiao();
        this.BindFangDa();
        this.BindFullScreen();

        this.BindXuanZhuan();
        this.MouseEvent();
    }

    // 1：把图片预览的html插入到网页上
    created() {
        this.body.insertAdjacentHTML("beforeend", `<div class="previewImage">
                        <div class="zhezhao"></div>
                        <div class="preview">
                            <div class="closed">x</div>

                            <div class="action">
                                <div class="left d">&lt;</div>
                                <div class="right d">&gt;</div>
                            </div>

                            <img class="mainImg" style="transform: scale(1) rotate(0deg);margin-left: 0;margin-top: 0;"
                                src="${this.option.image[this.option.showIndex]}" alt="">

                            <ul class="operation">
                                <li>
                                    <i class="iconfont icon-suoxiao suoxiao"></i>
                                </li>
                                <li>
                                    <i class="iconfont icon-fangda fangda"></i>
                                </li>
                                <li>
                                    <i class="iconfont icon-fullscreen fullscreen"></i>
                                </li>
                                <li class="xz">
                                    <i class="iconfont icon-shuaxin leftshuaxin"></i>
                                </li>
                                <li>
                                    <i class="iconfont icon-shuaxin rightshuaxin"></i>
                                </li>
                            </ul>


                        </div>
                    </div>`)

    }

    // 缩小
    BindSuoXiao() {
        this.$(".suoxiao").onclick = () => {
            var value = this.Scale() - 0.2;
            if (value != 0) {
                this.$(".mainImg").style.transform = `scale(${value}) rotate(${this.Rotate()}deg)`
            }
        }
    }

    // 全屏
    BindFullScreen() {

        this.$(".fullscreen").onclick = () => {
            // true 缩小
            if (this.$(".fullscreen").classList.contains("icon-fullscreen")) {
                this.$(".fullscreen").classList.remove("icon-fullscreen")
                this.$(".fullscreen").classList.add("icon-suoxiao1")

                this.$(".mainImg").style = `
                    transform: scale(2) rotate(${this.Rotate()}deg);
                    margin-left: 0;
                    margin-top: 0;
                `

            // 放大
            } else {
                this.$(".fullscreen").classList.remove("icon-suoxiao1")
                this.$(".fullscreen").classList.add("icon-fullscreen")

                this.$(".mainImg").style = `
                    transform: scale(1) rotate(0deg);
                    margin-left: 0;
                    margin-top: 0;
                `
            }
        }
    }

    // 放大
    BindFangDa() {
        this.$(".fangda").onclick = () => {
            this.$(".mainImg").style.transform = `scale(${this.Scale() + 0.2}) rotate(${this.Rotate()}deg)`
        }
    }

    // 旋转
    BindXuanZhuan() {
        // -90
        this.$(".leftshuaxin").onclick = () => {
            this.xuanzhuan(-90)
        }

        // +90
        this.$(".rightshuaxin").onclick = () => {
            this.xuanzhuan(90)
        }
    }

    MouseEvent() {

        // 鼠标滑动的时候放大缩小网页
        document.onmousewheel = (e) => {
            if (e.wheelDelta == 210) {
                this.$(".fangda").onclick()
            } else {
                this.$(".suoxiao").onclick()
            }
        }

        // document.addEventListener('mousewheel',(e) => {
        //     if (e.wheelDelta == 210) {
        //         this.$(".fangda").onclick()
        //     } else {
        //         this.$(".suoxiao").onclick()
        //     }
        // },false)

        // 鼠标在图片上按下的时候
        this.$(".mainImg").onmousedown = (e) => {

            e.preventDefault()

            this.isBackMove = true

            //获取鼠标按下的坐标
            this.x1 = e.clientX;
            this.y1 = e.clientY;

            this.l = parseInt(this.$(".mainImg").style.marginLeft);
            this.t = this.$(".mainImg").offsetTop;

            this.ImgMove(".mainImg")
        }
        // 按住拖动，但鼠标从图片上离开的
        // 给背景层绑定鼠标移动事件
        this.$(".mainImg").onmouseleave = () => {
            console.log("鼠标从图片上离开的，给背景层绑定鼠标移动事件");
            if (this.isBackMove) {
                this.ImgMove(".preview")
            }
        }

        // 鼠标在背景层上松开
        this.$(".preview").onmouseup = (ev) => {
            console.log("鼠标在背景层上松开");
            this.isBackMove = false
            this.$(".mainImg").onmousemove = null;
            this.$(".preview").onmousemove = null;
        }

        // 鼠标在图片上松开
        this.$(".mainImg").onmouseup = (ev) => {
            console.log("鼠标在图片上松开");
            this.$(".mainImg").onmousemove = null;
            this.$(".preview").onmousemove = null;
        }
    }

    ImgMove(className) {
        this.$(className).onmousemove = (ev) => {
            var x2 = ev.clientX;
            var y2 = ev.clientY;

            //计算出鼠标的移动距离
            var x = x2 - this.x1;
            var y = y2 - this.y1;

            //移动的数值与元素的left，top相加，得出元素的移动的距离
            var lt = y + this.t;
            var ls = x + this.l;

            //更改元素的left，top值
            this.$(".mainImg").style.marginLeft = ls + 'px';
            this.$(".mainImg").style.marginTop = lt + 'px';
        }
    }

    xuanzhuan(offset) {
        this.$(".mainImg").style.transform = `scale(${this.Scale()}) rotate(${this.Rotate() + offset}deg)`
    }

    // 关闭按钮
    BindClose() {
        //1  var ddddc = this;

        //2 es6 => 箭头函数
        console.log("this1: ", this);

        // this 指向
        this.$(".closed").onclick = () => {
            this.body.removeChild(this.$(".previewImage"))
        }
    }

    // 上一页
    BindPrevious() {
        this.$(".left").onclick = () => {
            this.option.showIndex -= 1;
            if (this.option.showIndex < 0) {
                this.option.showIndex = this.option.image.length - 1
            }
            this.$(".mainImg").src = this.option.image[this.option.showIndex]
        }
    }

    // 下一页
    BindNext() {
        this.$(".right").onclick = () => {
            this.option.showIndex += 1;
            if (this.option.showIndex > this.option.image.length - 1) {
                this.option.showIndex = 0
            }
            this.$(".mainImg").src = this.option.image[this.option.showIndex]
        }
    }

    Scale() {
        return Number(this.$(".mainImg").style.transform.match(/scale\(([\s\S]*?)\) /)[1])
    }

    Rotate() {
        return Number(this.$(".mainImg").style.transform.match(/rotate\(([\s\S]*?)deg\)/)[1])
    }

    $(className) {
        return document.querySelector(className)
    }


}