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
            //调用的方法
        this.created();
        this.BindClose();
        this.BindPrevious();
        this.BindNext();
        this.BindSuoXiao();
        this.BindFangDa();
        this.BindFullScreen();
        this.BindXuanZhuan();
        this.MouseEvent();
    }
    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 = () => {
            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() {
        this.$(".leftshuaxin").onclick = () => {
            this.xuanzhuan(-90)
        }
        this.$(".rightshuaxin").onclick = () => {
            this.xuanzhuan(90)
        }
    }

    MouseEvent() {
        document.onmousewheel = (e) => {
            if (e.wheelDelta == 210) {
                this.$(".fangda").onclick()
            } else {
                this.$(".suoxiao").onclick()
            }
        }
        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;
            var lt = y + this.t;
            var ls = x + this.l;
            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() {
        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)
    }


}