<template>
    <div class="pop-up-main">
        <div class="paln-box">
            <div class="movableItem" :style="{ width: width, height: height }" @mousewheel="rollImg($event)"
                @mousedown="drag($event, 1)" ref="bigImage">
                <!-- 图片不可选中 或不可拖拽到新标签打开-->
                <slot name="svg" oncontextmenu="return false;" onselectstart="return false;" draggable="false"></slot>
                <template v-if="isEdit && iconWidth">
                    <img ref="signImage" :src="iconImgUrl" @mousedown="dragSign($event, key)"
                        v-for="(item, key) in equipment" :key="key" :style="{
              top: equipment[key].top + '%',
              left: equipment[key].left + '%',
              width: iconWidth,
              height: iconHeight,
            }" class="equipment" />
                </template>
                <el-popover width="200" placement="bottom-start" trigger="hover" :close-delay="100" content="暂无描述"
                    v-else-if="!isEdit && iconWidth && arrIcon.length == equipment.length"
                    v-for="(item, key) in equipment" :key="key" popper-class="preview-popover">
                    <!-- &&arrIcon.length==equipment.length -->
                    <template>
                        <div v-if="equipment[key].describe" class="describe">
                            <p class="describe-top">
                                {{ equipment[key].describe.deviceName }}
                            </p>
                            <p class="describe-center">
                                {{ equipment[key].describe.remark }}
                            </p>
                            <p class="describe-bottom">
                                {{ equipment[key].describe.location }}
                            </p>
                        </div>
                    </template>
                    <!-- <img oncontextmenu="return false;" onselectstart="return false;" draggable="false" slot="reference"
						ref="signImage" :src="$baseUrl + equipment[key].iconImgUrl"
						:style="{top:equipment[key].top+'%',left:equipment[key].left+'%',width:arrIcon[key].iconWidth,height:arrIcon[key].iconHeight}"
						class="equipment" /> -->
                </el-popover>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            equipment: {
                type: Array,
                default: () => {
                    return [{
                        iconImgUrl: "",
                        top: 0,
                        left: 0,
                    }, ];
                },
            },
            isEdit: {
                default: false,
            },
            imgUrl: {},
        },

        data() {
            return {
                // 定时器
                timer: "",
                // 图片加载失败
                imgOnerror: false,
                imgIndex: 0,
                isChange: true,
                // 图片显示默认大小
                width: "1600px",
                height: "0",
                // 可缩小倍数,为空则可无限缩小
                minification: 3,
                // 可放大倍数 为空则可无限放大
                magnification: "",
                bigMaxWidth: 1100,
                bigMaxHeight: 1200,

                // 小图标信息
                iconImgUrl: "",
                iconWidth: "",
                // 存储每个小图标处理好的宽高
                iconHeight: "",
                arrIcon: [],
                iconMaxWidth: 32,
                iconMaxHeight: 32,
                tog: 1,
            };
        },
        methods: {
            // 获取图片大小
            getImgInfo(
                imgUrl,
                MaxWidth,
                MaxHeight,
                StrWidth,
                StrHeight,
                Array = false,
                arr,
                num = 0
            ) {
                let img = new Image();

                // img.src = imgUrl;
                img = document.getElementsByClassName("svg");
                let _this = this;
                img.onerror = () => {
                    // console.log("加载失败！！", _this.arrIcon.length);
                    // console.log(imgUrl, MaxWidth, MaxHeight, StrWidth, StrHeight);
                    _this.imgOnerror = true;
                    _this.imgIndex =
                        _this.arrIcon.length - 1 < 0 ? 0 : _this.arrIcon.length - 1;
                    this.timer = setTimeout(() => {
                        if (num <= 5) {
                            _this.getImgInfo(
                                imgUrl,
                                MaxWidth,
                                MaxHeight,
                                StrWidth,
                                StrHeight,
                                Array,
                                arr,
                                num + 1
                            );
                        }
                        clearInterval(this.timer);
                    }, 2000);
                };
                img.onload = function (e) {
                    //  显示时 初始 最大宽度
                    let maxWidth = MaxWidth;
                    //  显示时 初始 最大高度
                    let maxHeight = MaxHeight;
                    if (
                        e.path[0].naturalWidth <= maxWidth &&
                        e.path[0].naturalHeight <= maxHeight
                    ) {
                        _this[StrWidth] = e.path[0].naturalWidth + "px";
                        _this[StrHeight] = e.path[0].naturalHeight + "px";
                    } else {
                        _this[StrWidth] = e.path[0].naturalWidth + "px";
                        _this[StrHeight] = e.path[0].naturalHeight + "px";
                        if (
                            e.path[0].naturalWidth > maxWidth &&
                            e.path[0].naturalHeight <= maxHeight
                        ) {
                            let ratio = e.path[0].naturalWidth / e.path[0].naturalHeight;
                            _this[StrWidth] = "1600px";
                            _this[StrHeight] = maxWidth / ratio + "px";
                        } else if (
                            e.path[0].naturalWidth <= maxWidth &&
                            e.path[0].naturalHeight > maxHeight
                        ) {
                            let ratio = e.path[0].naturalWidth / e.path[0].naturalHeight;
                            _this[StrWidth] = maxHeight * ratio + "px";
                            _this[StrHeight] = "800px";
                        } else if (
                            e.path[0].naturalWidth > maxWidth &&
                            e.path[0].naturalHeight > maxHeight
                        ) {
                            let ratio = e.path[0].naturalWidth / e.path[0].naturalHeight;
                            let w = maxWidth;
                            let h = w / ratio;
                            if (h > maxHeight) {
                                let ratio2 = w / h;
                                h = maxHeight;
                                w = h * ratio2;
                            }
                            _this[StrWidth] = w + "px";
                            _this[StrHeight] = h + "px";
                        }
                    }
                    if (Array) {
                        _this[arr].push({
                            iconWidth: _this[StrWidth],
                            iconHeight: _this[StrHeight],
                        });
                        // console.log(
                        // 	"tow#################################arrIcon",
                        // 	_this[arr].length
                        // );
                    }
                    // _this[StrWidth] = `${e.path[0].naturalWidth}px`;
                    // _this[StrHeight] = `${e.path[0].naturalHeight}px`;
                    // vm.$set(vm.imgInfo, "width", img.width);
                    // vm.$set(vm.imgInfo, "height", img.height);
                    // console.log("打印图片信息", imgUrl, _this[StrWidth], _this[StrHeight]); // 打印图片信息

                    // console.log("打印图片信息", e.path[0].naturalHeight); // 打印图片信息
                    // console.log("打印图片信息", e); // 打印图片信息
                    // console.log("打印图片信息this.width", _this[StrWidth]); // 打印图片信息
                    // console.log("打印图片信息this.height", _this[StrHeight]); // 打印图片信息
                };
            },
            // 缩放
            rollImg() {
                let that = this;
                // let oImg = document.getElementsByClassName("movableItem")[0];
                let oImg = this.$refs.bigImage;
                // console.log(
                // 	"length",
                // 	document.getElementsByClassName("movableItem").length
                // );
                // console.log("oImg", oImg);
                let _this = this;

                function fnWheel(obj, fncc) {
                    obj.onmousewheel = fn;
                    if (obj.addEventListener) {
                        obj.addEventListener("DOMMouseScroll", fn, false);
                    }

                    function fn(ev) {
                        let oEvent = ev || window.event;
                        let down = true;
                        if (oEvent.detail) {
                            down = oEvent.detail > 0;
                        } else {
                            down = oEvent.wheelDelta < 0;
                        }
                        if (fncc) {
                            fncc.call(this, down, oEvent);
                        }
                        if (oEvent.preventDefault) {
                            oEvent.preventDefault();
                        }
                        return false;
                    }
                }
                fnWheel(oImg, function (down, oEvent) {
                    let oldWidth = this.offsetWidth;
                    let oldHeight = this.offsetHeight;
                    let oldLeft = this.offsetLeft;
                    let oldTop = this.offsetTop;
                    let parent = oEvent.path[2];
                    // 获取父元素距离页面可视区域的位置
                    let parentLeft = parent.getBoundingClientRect().left;
                    let parentTop = parent.getBoundingClientRect().top;
                    // 比例 = （点击位置距离可视窗口位置 - 父元素距离可视窗口位置 - 相对定位的left）/ 本身宽度
                    let scaleX = (oEvent.clientX - parentLeft - oldLeft) / oldWidth; //比例
                    let scaleY = (oEvent.clientY - parentTop - oldTop) / oldHeight;

                    let nowWidth = this.style.width.split("p")[0];
                    let initWidth = _this.width.split("p")[0];
                    let initHeight = _this.height.split("p")[0];

                    let miniFlag = true;
                    let magniFlag = true;
                    if (_this.minification) {
                        // 限制缩小范围
                        if (nowWidth <= parseInt(initWidth / _this.minification)) {
                            miniFlag = false;
                            // console.log("限制缩小范围");
                            // console.log(
                            // 	"限制缩小范围",
                            // 	nowWidth,
                            // 	parseInt(initWidth / _this.minification)
                            // );
                            this.style.width = parseInt(initWidth / _this.minification) + "px";
                            this.style.height =
                                parseInt(initHeight / _this.minification) + "px";
                        }
                        if (_this.magnification) {
                            // 限制放大范围
                            if (nowWidth >= parseInt(initWidth * _this.magnification)) {
                                magniFlag = false;
                                // console.log("限制放大范围");
                                this.style.width =
                                    parseInt(initWidth * _this.magnification) + "px";
                                this.style.height =
                                    parseInt(initHeight * _this.magnification) + "px";
                            }
                        }
                    }

                    if (down && miniFlag) {
                        this.style.width = parseInt(this.offsetWidth * 0.9) + "px";
                        this.style.height = parseInt(this.offsetHeight * 0.9) + "px";

                        that.width = parseInt(this.offsetWidth * 0.9) + "px";
                        that.height = parseInt(this.offsetHeight * 0.9) + "px";
                    } else if (!down && magniFlag) {
                        // console.log("放大");
                        this.style.width = parseInt(this.offsetWidth * 1.1) + "px";
                        this.style.height = parseInt(this.offsetHeight * 1.1) + "px";
                        that.width = parseInt(this.offsetWidth * 1.1) + "px";
                        that.height = parseInt(this.offsetHeight * 1.1) + "px";
                    }
                    let newWidth = this.offsetWidth;
                    let newHeight = this.offsetHeight;

                    // 新的相对位置left = 原先的相对位置left - 比例 *（本身新的宽度-旧的宽度）
                    this.style.left =
                        Math.round(this.offsetLeft - scaleX * (newWidth - oldWidth)) + "px";
                    this.style.top =
                        Math.round(this.offsetTop - scaleY * (newHeight - oldHeight)) + "px";
                });
                // console.log(that.width)
            },
            // },
            //拖拽
            drag(ev) {
                // let ie = document.all;
                let nn6 = document.getElementById && !document.all;
                let isdrag = false;
                let y, x;
                let nTY, nTX;
                let oDragObj;

                function moveMouse(e) {
                    if (isdrag) {
                        oDragObj.style.top =
                            (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) + "px";
                        oDragObj.style.left =
                            (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) + "px";
                        return false;
                    }
                }

                function initDrag(e) {
                    // console.log("点击图片initDrag");
                    let oDragHandle = nn6 ? e.target : event.srcElement;
                    let topElement = "HTML";
                    while (
                        oDragHandle.tagName != topElement &&
                        oDragHandle.className != "movableItem"
                    ) {
                        oDragHandle = nn6 ?
                            oDragHandle.parentNode :
                            oDragHandle.parentElement;
                    }
                    if (oDragHandle.className == "movableItem") {
                        isdrag = true;
                        oDragObj = oDragHandle;
                        // 父元素宽高
                        let width = e.path[2].offsetWidth;
                        let height = e.path[2].offsetHeight;
                        // 这里判断第一次获取不到style 样式 默认为 居中50%
                        if (oDragObj.style.top == "") {
                            nTY = 0;
                            nTX = parseInt((50 * width) / 100 + 0);
                        } else {
                            nTY = parseInt(oDragObj.style.top + 0);
                            nTX = parseInt(oDragObj.style.left + 0);
                        }
                        y = nn6 ? e.clientY : event.clientY;
                        x = nn6 ? e.clientX : event.clientX;
                        oDragObj.style.cursor = "move";
                        document.onmousemove = moveMouse;
                        return false;
                    }
                }
                document.onmousemove = initDrag;
                // document.onmouseup = new Function("isdrag=false");
                document.onmouseup = function (e) {
                    isdrag = false;
                    document.onmousemove = null;
                    document.onmouseup = null;
                    let oDragHandle = nn6 ? e.target : event.srcElement;
                    let topElement = "HTML";
                    while (
                        oDragHandle.tagName != topElement &&
                        oDragHandle.className != "movableItem"
                    ) {
                        oDragHandle = nn6 ?
                            oDragHandle.parentNode :
                            oDragHandle.parentElement;
                    }
                    if (oDragHandle.className == "movableItem") {
                        oDragObj = oDragHandle;
                        oDragObj.style.cursor = "Default";
                    }
                };
                ev = event || window.event;

                // 取消事件冒泡行为
                // window.event ? (window.event.cancelBubble = true) : ev.stopPropagation();
            },
            // 拖拽标记
            // eslint-disable-next-line no-unused-lets
            dragSign(ev, key) {
                let nn6 = document.getElementById && !document.all;
                let isdrag = false;
                let y, x;
                let nTY, nTX;
                let oDragObj;
                let _this = this;

                function moveMouse(e) {
                    if (isdrag) {
                        this.equipmentKey = key;
                        // console.log("thisequipmentKey", this.equipmentKey);

                        let widthItem = e.path[1].style.width.split("p");
                        let heightItem = e.path[1].style.height.split("p");
                        let width = widthItem[0];
                        // eslint-disable-next-line no-unused-lets
                        let height = heightItem[0];
                        let top =
                            ((nn6 ?
                                    (nTY / 100) * height + e.clientY - y :
                                    (nTY / 100) * height + event.clientY - y) /
                                height) *
                            100;
                        let left =
                            ((nn6 ?
                                    (nTX / 100) * width + e.clientX - x :
                                    (nTX / 100) * width + event.clientX - x) /
                                width) *
                            100;

                        if (top >= 0 && top <= 100) {
                            _this.equipment[key].top = top;
                        }
                        if (left >= 0 && left <= 100) {
                            _this.equipment[key].left = left;
                        }

                        return false;
                    }
                }
                // eslint-disable-next-line no-unused-vars
                function initDrag(e) {
                    // console.log("_this", _this);
                    let oDragHandle = nn6 ? e.target : event.srcElement;
                    let topElement = "HTML";
                    while (
                        oDragHandle.tagName != topElement &&
                        oDragHandle.className.indexOf("equipment") == -1
                    ) {
                        oDragHandle = nn6 ?
                            oDragHandle.parentNode :
                            oDragHandle.parentElement;
                    }
                    if (oDragHandle.className.indexOf("equipment") != -1) {
                        isdrag = true;
                        oDragObj = oDragHandle;
                        // 父元素宽高
                        let width = e.path[1].offsetWidth;
                        // let height = e.path[1].offsetHeight;
                        // console.log(width, height);
                        // console.log("oDragObj.style", oDragObj.style);
                        // 这里判断第一次获取不到style 样式 默认为 居中50%
                        if (oDragObj.style.top == "") {
                            // nTY = parseInt((50 * height) / 100 + 0);
                            nTY = 0;
                            nTX = parseInt((50 * width) / 100 + 0);
                        } else if (oDragObj.style.top.indexOf("%") != -1) {
                            nTY = oDragObj.style.top.split("%")[0];
                            nTX = oDragObj.style.left.split("%")[0];
                        } else {
                            nTY = parseInt(oDragObj.style.top + 0);
                            nTX = parseInt(oDragObj.style.left + 0);
                        }
                        y = nn6 ? e.clientY : event.clientY;
                        x = nn6 ? e.clientX : event.clientX;

                        oDragObj.style.cursor = "move";
                        document.onmousemove = moveMouse;
                        return false;
                    }
                }

                // document.onmousedown = initDrag;
                document.onmousemove = initDrag;

                document.onmouseup = function (e) {
                    isdrag = false;
                    document.onmousemove = null;
                    document.onmouseup = null;
                    let oDragHandle = nn6 ? e.target : event.srcElement;
                    let topElement = "HTML";
                    while (
                        oDragHandle.tagName != topElement &&
                        oDragHandle.className != "equipment"
                    ) {
                        oDragHandle = nn6 ?
                            oDragHandle.parentNode :
                            oDragHandle.parentElement;
                    }
                    if (oDragHandle.className == "equipment") {
                        oDragObj = oDragHandle;
                        oDragObj.style.cursor = "Default";
                    }
                };

                // _this.equipmentKey = key;
                // _this.equipment[_this.equipmentKey].left = l;
                // _this.equipment[_this.equipmentKey].top = t;
                ev = event || window.event;

                // 取消事件冒泡行为
                window.event ? (window.event.cancelBubble = true) : ev.stopPropagation();
            },
        },

        watch: {
            equipment() {
                if (this.equipment.length != 0) {
                    this.arrIcon = [];
                    let finish = true;
                    this.equipment.filter((item) => {
                        if (!item.iconImgUrl) {
                            finish = false;
                        }
                        return true;
                    });
                    // console.log("finish", finish);
                    if (finish) {
                        this.equipment.filter((item, index) => {
                            if (index >= this.imgIndex) {
                                console.log("iconImgUrl", this.equipment[index].iconImgUrl);
                                this.getImgInfo(
                                    this.$baseUrl + item.iconImgUrl,
                                    this.iconMaxWidth,
                                    this.iconMaxHeight,
                                    "iconWidth",
                                    "iconHeight",
                                    true,
                                    "arrIcon"
                                );
                            }
                            console.log("22filter", index);
                            return true;
                        });
                    }
                }
            },
        },
        created() {
            this.getImgInfo(
                this.imgUrl,
                this.bigMaxWidth,
                this.bigMaxHeight,
                "width",
                "height"
            );
            if (this.equipment.length != 0) {
                this.arrIcon = [];
                let finish = true;
                this.equipment.filter((item) => {
                    if (!item.iconImgUrl) {
                        finish = false;
                    }
                    return true;
                });
                // console.log("finish", finish);
                if (finish) {
                    this.equipment.filter((item, index) => {
                        if (index >= this.imgIndex) {
                            // console.log("iconImgUrl", this.equipment[index].iconImgUrl);
                            this.getImgInfo(
                                this.$baseUrl + item.iconImgUrl,
                                this.iconMaxWidth,
                                this.iconMaxHeight,
                                "iconWidth",
                                "iconHeight",
                                true,
                                "arrIcon"
                            );
                        }
                        // console.log("22filter", index);
                        return true;
                    });
                }
            }

            this.iconImgUrl = JSON.parse(
                JSON.stringify(this.$baseUrl + this.equipment[0].iconImgUrl)
            );
            // console.log("imgUrl", this.imgUrl);
            // console.log("equipment", this.equipment);
            // //禁止鼠标右键
            // document.oncontextmenu = function() {
            //   return false;
            // };
        },
    };
</script>
<style lang="less">
    .preview-popover {
        background-color: #d3edf7dd;
        padding: 12px;

        .popper__arrow::after {
            border-bottom-color: #d3edf7dd !important;
        }

        .describe {
            p {
                padding-bottom: 5px;

                &:last-child {
                    padding-bottom: 0px;
                }
            }

            .describe-top {
                // color: sandybrown;
                // color: red;
                color: rgb(21, 110, 110);
            }

            .describe-center {
                color: rgb(79, 21, 206);
            }

            .describe-bottom {
                color: rgb(30, 31, 29);
            }
        }
    }
</style>
<style lang="less" scoped>
    .pop-up-main {
        width: 100%;
        // height: calc(100vh - 13vh);
        height: 100vh;
        overflow-y: hidden;

        .paln-box {
            width: 100%;
            height: 100%;
            position: relative;

            .movableItem {
                position: absolute;
                // top: 75%;
                left: 50%;
                transform: translate(-50%, -15%);

                img,
                .svg {
                    z-index: 1;
                    width: 100%;
                    height: 100%;
                }

                .equipment {
                    position: absolute;
                    top: 0;
                    left: 0;
                    transform: translate(-50%, -50%);
                    z-index: 2;
                    font-size: 40px;
                    // color: red;
                    // background: blue;
                    zoom: 1;
                }
            }

            .shuaxin {
                position: absolute;
                z-index: 2;
                font-size: 40px;
                top: 20px;
                left: 20px;
                cursor: pointer;

                &:hover {
                    color: yellowgreen;
                }
            }

            .equipment {
                color: white;
            }

            .el-button {
                z-index: 2;
                position: absolute;
                bottom: 60px;
                right: 20px;
                width: 60px;
                height: 35px;

                span {
                    display: inline-block;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

                i {
                    display: inline-block;
                    position: absolute;
                    top: 50%;
                    left: 25%;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }
</style>