<template>
    <!-- <div class="mapbox" id="mapbox" :style="'width:'+width+';height:'+height"> -->
    <div class="mapbox" id="mapbox" style="width:100%;height:100%;">
        <table class="imgbox" id="imgbox" :style="'top: '+imgtop+'px;left: '+imgleft+'px;'" border="0" cellpadding="0" cellspacing="0">
            <tr style="width:100%;height:100%;">
                <td style="position: relative;width:100%;height:100%;">
<!--                    <canvas class="canvas" id="canvas"></canvas>-->
                    <img id="backgroundImg" draggable="false" style="height: 560px;" :src="img" usemap="#Map"/>
                        <!-- 图片点击 -->
<!--                    <map name="Map" id="Map">-->
<!--                        &lt;!&ndash; 1栋  &ndash;&gt;-->
<!--                        <area shape="poly"  coords="969, 278, 999, 268, 943, 252, 927, 266" data-index="1-1"  href="#" alt="1栋1单元">-->
<!--                        <area shape="poly" coords="928, 265, 944, 250, 891, 236, 876, 250"  data-index="1-2" href="#" alt="" />-->
<!--                        <area shape="poly" coords="876, 250, 890, 235, 831, 221, 815, 233"   data-index="1-3" href="#" alt="" />-->
<!--                        <area shape="poly" coords="816, 232, 832, 220, 783, 206, 763, 218"  data-index="1-4" href="#" alt="" />-->
<!--                        &lt;!&ndash; 2栋  &ndash;&gt;-->
<!--                        <area shape="poly" coords="921, 293, 952, 281, 899, 265, 876, 279"  data-index="2-1" href="#" alt="" />-->
<!--                        <area shape="poly" coords="876, 278, 897, 264, 836, 246, 815, 260"  data-index="2-2" href="#" alt="" />-->
<!--                        <area shape="poly" coords="815, 260, 835, 245, 782, 231, 760, 244"  data-index="2-3" href="#" alt="" />-->
<!--                        <area shape="poly" coords=" 760, 244, 782, 231, 739, 218, 714, 230"  data-index="2-4" href="#" alt="" />-->
<!--                        &lt;!&ndash; 3栋  &ndash;&gt;-->
<!--                        <area shape="poly" coords="870, 308, 905, 296, 846, 278, 825 , 294"  data-index="3-1" href="#" alt="" />-->
<!--                        <area shape="poly" coords="825 ,294, 846, 278, 792, 261, 776 , 277"  data-index="3-2" href="#" alt="" />-->
<!--                        <area shape="poly" coords="776 ,277, 792, 261, 733, 242, 715 , 258"  data-index="3-3" href="#" alt="" />-->
<!--                        <area shape="poly" coords="715 , 258, 733, 242, 689, 231, 666 , 243"  data-index="3-4" href="#" alt="" />-->
<!--                    </map>-->
                    <div class="box-content">
                      <div :class="['next_box', position === '1-4' ? 'bg_red' : '']" @click="jump('1-4', 33)"></div>
                      <div :class="['next_box', position === '1-3' ? 'bg_red' : '']" @click="jump('1-3', 31)"></div>
                      <div :class="['next_box', position === '1-2' ? 'bg_red' : '']" @click="jump('1-2', 29)"></div>
                      <div :class="['next_box', position === '1-1' ? 'bg_red' : '']" @click="jump('1-1', 27)"></div>
                    </div>
                    <div class="box-content box-content1">
                      <div :class="['next_box', position === '2-4' ? 'bg_red' : '']" @click="jump('2-4', null)"></div>
                      <div :class="['next_box', position === '2-3' ? 'bg_red' : '']" @click="jump('2-3', 40)"></div>
                      <div :class="['next_box', position === '2-2' ? 'bg_red' : '']" @click="jump('2-2', 38)"></div>
                      <div :class="['next_box', position === '2-1' ? 'bg_red' : '']" @click="jump('2-1', 36)"></div>
                    </div>
                    <div class="box-content box-content2">
                      <div :class="['next_box', position === '3-4' ? 'bg_red' : '']" @click="jump('3-4', 47)"></div>
                      <div :class="['next_box', position === '3-3' ? 'bg_red' : '']" @click="jump('3-3', 45)"></div>
                      <div :class="['next_box', position === '3-2' ? 'bg_red' : '']" @click="jump('3-2', 44)"></div>
                      <div :class="['next_box', position === '3-1' ? 'bg_red' : '']" @click="jump('3-1', 43)"></div>
                    </div>
<!--                    <canvas class="canvas" id="canvas"></canvas>-->
                    <!-- <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg" :style="'height: '+imgheight+'%;'">
                        <polyline points="417,245 457,235 629,297 589,307 417,245"
                        style="fill:#96E2FA66;" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg" :style="'height: '+imgheight+'%;'">
                        <polyline points="467,230 507,220 679,282 639,292 467,230"
                        style="fill:#96E2FA66;" />
                    </svg> -->
                </td>
            </tr>
            <!-- style="fill:#f008;stroke:black;stroke-width:3" /> -->

        </table>
    </div>
</template>
<script>
export default {
    props: {
        //图片路径 imgDragScale
        img: {
            type: String,
            default: "",
        },
        //盒子的宽
        // width: {
        //     type: String,
        //     default: "100%",
        // },
        // //盒子的高
        // height: {
        //     type: String,
        //     default: "100%",
        // },
    },
    data() {
        return {
            imgtop: 0, //图片距离左边的距离
            imgleft: 0, //图片距离上边的距离
            imgheight: 100, //图片高度百分比
            DownUp: false, //用来判断鼠标是否长按
            position: '',
        };
    },
    mounted() {
        document.onmousemove = this.mouseMove;
        //等待图片加载
        setTimeout((e) => {
            this.getbackgroundImgWidth();
        }, 500);

    },
    beforeDestroy() {
        document.onmousemove = null;
    },
    methods: {
        //鼠标按下
        holdDown() {
            this.DownUp = true;
        },
        //鼠标松开
        holdUp() {
            this.DownUp = false;
        },
        //ev：鼠标对象，id：盒子的id 判断鼠标是否在盒子内
        inBoxIsoutbox(id, ev = event || window.event) {
            let map = document.getElementById(id);
            if (
                this.mousePosition(ev).x > map.offsetLeft + map.offsetWidth ||
                this.mousePosition(ev).x < map.offsetLeft ||
                this.mousePosition(ev).y > map.offsetTop + map.offsetHeight ||
                this.mousePosition(ev).y < map.offsetTop
            ) {
                return false;
            } else {
                return true;
            }
        },
        //兼容后，返回X，Y
        mousePosition(ev) {
            if (ev.pageX || ev.pageY) {
                return { x: ev.pageX, y: ev.pageY };
            }
            return {
                x:
                    ev.clientX +
                    document.body.scrollLeft -
                    document.body.clientLeft,
                y:
                    ev.clientY +
                    document.body.scrollTop -
                    document.body.clientTop,
            };
        },
        // 鼠标移动触发该方法
        mouseMove(ev) {
            ev = ev || window.event;
            if (this.inBoxIsoutbox("mapbox", ev)) {
                // 鼠标在盒子内
                this.runWheel(true);
            } else {
                // 鼠标在盒子外
                this.runWheel(false);
                this.holdUp();
            }
            if (this.DownUp) {
                // 鼠标长按时改变图片位置
                this.imgtop = this.imgtop + ev.movementY;
                this.imgleft = this.imgleft + ev.movementX;
            }
        },
        // 开启监听鼠标滑轮
        runWheel(isWheel) {
            //判断依据是 是否在盒子内部
            //true 就是开启
            if (isWheel) {
                document.documentElement.style.overflow = "hidden";
                //兼容性写法，该函数也是网上别人写的，不过找不到出处了，蛮好的，所有我也没有必要修改了
                //判断鼠标滚轮滚动方向
                if (window.addEventListener) {
                    //FF,火狐浏览器会识别该方法
                    window.addEventListener(
                        "DOMMouseScroll",
                        this.wheel,
                        false
                    );
                }
                window.onmousewheel = document.onmousewheel = this.wheel; //W3C
            } else {
                //false就是关闭
                document.documentElement.style.overflow = "";
                if (window.addEventListener) {
                    //FF,火狐浏览器会识别该方法
                    window.addEventListener("DOMMouseScroll", null, false);
                }
                window.onmousewheel = document.onmousewheel = null; //W3C
            }
        },
        //统一处理滚轮滚动事件，中间件
        wheel(event) {
            let delta = 0;
            if (!event) event = window.event;
            if (event.wheelDelta) {
                //IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
                delta = event.wheelDelta / 120;
                if (window.opera) delta = -delta; //因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
            } else if (event.detail) {
                //FF浏览器使用的是detail,其值为“正负3”
                delta = -event.detail / 3;
            }
            if (delta) this.handle(delta);
        },
        //上下滚动时的具体处理函数
        handle(delta) {
            if (delta < 0) {
                //向下滚动
                if (this.imgheight > 10) {
                    this.imgheight = this.imgheight - 1;
                }
            } else {
                //向上滚动
                if (this.imgheight < 500) {
                    this.imgheight = this.imgheight + 1;
                }
            }
            // let arr = [];
            // let updateArr = [];
            // let pic = document.getElementsByTagName('area');
            // // console.log(pic);
            // pic.forEach(item => {
            //     var coordsArray = item.getAttribute('coords').split(',');
            //     // console.log(coordsArray);
            //     arr.push(coordsArray);
            //     // coordsArray.forEach(e => {
            //     //     console.log(e);
            //     // });
            // });
            // arr.forEach(item => {
            //   for(var i = 0; i < item.length; i++) {
            //     item[i] = item[i] * this.imgheight / 100;
            //   }
            //   updateArr.push(item);
            // });
            // this.updateCoord(updateArr);
            // // console.log(arr);
            // // console.log(updateArr);
        },
        updateCoord(arr) {
          let pic =  document.getElementsByTagName('area');
          arr.forEach((item, i) => {
            let coords = item.join(',');
            pic[i].setAttribute('coords', coords);
            console.log(pic[i].getAttribute('coords'));
          });
        },
        //获取背景图片的宽度或高度，和实际距离相除得到 系数distanceCoefficient
        getbackgroundImgWidth() {
            if (this.actualDistanceWidth !== 0) {
                let backgroundImg = document.getElementById("backgroundImg");
                this.distanceCoefficient =
                    backgroundImg.width / this.actualDistanceWidth;
            } else if (this.actualDistanceHeight !== 0) {
                let backgroundImg = document.getElementById("backgroundImg");
                this.distanceCoefficient =
                    backgroundImg.height / this.actualDistanceWidth;
            }
        },
        example(e) {
          console.log(e);
            var ev = e || window.event;
            var target = ev.target || ev.srcElement;
            if(target.nodeName.toLowerCase() == 'area') {
                let text = target.getAttribute('data-index');
               this.$emit('openVideo', text);
            } else {
              return;
            }
            // console.log(dom);

        },
        jump(position, id) {
          let params = {
            position: position,
            id: id
          };
          // this.position = data;
          this.$emit('openVideo', params);
        }
    },
};
</script>
<style scoped>
.mapbox {
    overflow: hidden;
    position: relative;
    text-align: center;
    box-sizing: border-box;
}
.imgbox {
    width:100%;
    height:100%;
    position: absolute;
}
.imgbox img {
    cursor: pointer;
}
.canvas {
    cursor: pointer;
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
  .box-content {
    width: 30px;
    height: 220px;
    /*transform: skewX(45deg);*/
    transform: rotate(-72.5deg);
    position: absolute;
    top: 130px;
    left: 860px;
    /*z-index: 99;*/
  }
  .box-content1 {
    top: 146px;
    left: 811px;
  }
  .box-content2 {
    top: 161px;
    left: 760px;
  }
  .next_box {
    width: 30px;
    height: 24%;
    cursor: pointer;
    background-color: white;
    opacity: .5;
    margin-bottom: 2px;
  }
  .bg_red {
    background-color: red;
  }
</style>
