<template>
  <div style="width: 100%;height: 100%">
    <MapGl @handlerClick="handlerClick"></MapGl>
    <!-- 底部图层切换按钮菜单栏 -->
    <div id="Dock">
        <ul id="Icons">
            <li class="iconBox">
                <img class="icon-menu" src="/img/menuicon/video.png" @click="playVideo()"/>
                <p class="pp">待处理案件</p>
            </li>
            <li class="iconBox">
                <img class="icon-menu" src="/img/menuicon/trans.png" data-id="901011111" @click="showLayer('901011111')"/>
                <p class="pp">已上报案件</p>
            </li>
            <li class="iconBox">
                <img class="icon-menu" src="/img/menuicon/park.png" data-id="903000001" @click="showLayer('903000001')"/>
                <p class="pp">办结案件</p>
            </li>
           
            
        </ul>
    </div>
  </div>
  

</template>

<script>
import MapGl from "./MapGl";

export default {
  name: "mapboxindex",
  components: {MapGl},
  data() {
    return {
      
    }
  },
  mounted(){
    this.bottomMenuEffect();
    this.$store.dispatch('ToggleSideBar')
  },
  methods: {
    handlerClick(){

    },
    bottomMenuEffect:function(){
      var icons = document.getElementsByClassName("icon-menu")
      var dock = document.getElementById("Dock");
      document.onmousemove = function (ev) {
        for (var i = 0; i < icons.length; i++) {
            var x = icons[i].offsetLeft + icons[i].offsetWidth / 2;
            var y = icons[i].offsetTop + icons[i].offsetHeight / 2 + dock.offsetTop;
            var a = ev.clientX - x;
            var b = ev.clientY - y;
            var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
            var scale = 1 - c / 300;
            if (scale < 0.5) {
                scale = 0.5;
            }
            icons[i].style.width = scale * 80 + "px";
            icons[i].style.height = scale * 80 + "px";
          };
        };

        $(".icon-menu").mouseover(function () {
            $(this).prev().stop().fadeIn(500);
        });
        $(".iconBox").mouseout(function () {
            $(this).children('ul').stop().fadeOut(500);
        });
        $(".iconBox>ul").mouseover(function () {
            $(this).stop().fadeIn(500);
        });
        $(".iconBox>ul").mouseout(function () {
            $(this).stop().fadeOut(500);
        });
    }
    
  }
}
</script>

<style scoped>

#Dock .iconBox {
    display: inline-block;
}

#Dock a {
    text-decoration: none;
    color: #fff;
}

#Dock ul,li {
    list-style: none;
}

#Dock .pp {
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    margin-left: 15px;
}
#Dock .iconBox>ul {
    width: 140px;
    background-color: #ccc;
    position: absolute;
    bottom: 110px;
    display: none;
    background-color:rgba(255,255,255,.1);
    margin-left: -15px;
    border-radius: 5px;
    border: 1px solid #29486D;
    padding: 0;
    z-index: 9999;
}

#Dock .iconBox>ul>li {
    width: 100%;
    height: auto;
    font-size: 18px;
    line-height:35px;
    background-color: rgba(61,73,74,0.5);
}


#Dock .iconBox>ul>li>a {
    width: 100%;
    height: 100%;
    display: block;
}

#Dock .iconBox>ul>li>a:hover{
    background-color: #25456B;
}

#Dock .iconBox>ul>li>a>img {
    width: 12px;
    height: 12px;
    display: inline;
    opacity: 0.5;
}

#Dock .icon-menu {
    width: 40px;
    height: 40px;
    margin-left: 15px;
    display: inline-block;
}

#Dock {
    position: absolute;
    width: 100%;
    height: auto;
    bottom: 25px;
    margin-bottom: 15px;
    cursor: pointer;
    z-index: 9999;
}

#Dock #Icons {
    font-size: 0;
    width: 100%;
    height: auto;
    bottom: 1px;
    position: absolute;
    z-index: 15;
    text-align: center;
    margin: auto;
}

#Dock #box {
    font-size: 0;
    width: 100%;
    height: 300px;
    bottom: 145px;
    position: absolute;
    text-align: center;
    background-color: #ccc;
}

</style>