<template>
<div class="Right" id="Right" ref="Right"><!--主面板（包含Right_test为小图标）-->
    <div class="Right_test" id="Right_nav" ref="Right_nav" @onmouseover="mOver(this)" @onmouseout="mOut(this)" @click="btnPress()">
        <label id='sideMenuControl' for='sideToggle'>=</label>
    </div>
     <right-tab :poiMap="poiMap"></right-tab>
</div>
</template>
<script>
import rightTab from './rightFloatPanelTab.vue';
export default{
    name:'rightPanel',
    components:{
      rightTab: rightTab
    },
    data () {
      return {
          flage:false,
        }
    },
    props: {
            poiMap: {
                type: Object
            }
    },
    methods: {
        mOver(obj)
            {
                obj.style.backgroundColor="#0a68f6c";
            },
         mOut(obj)
            {
                obj.style.backgroundColor="#0a68f6c";
            },
        btnPress(){  
            if(this.flage){//退回去
                this.$refs.Right.setAttribute("class","Right RightPush")
                this.$refs.Right_nav.setAttribute("class","Right_test Right_test-navPush")
                this.flage=false;
            }
            else{//拉出来
                this.$refs.Right.setAttribute("class","Right RightPull")
                this.$refs.Right_nav.setAttribute("class","Right_test Right_test-navPull")
                this.flage=true;
            }
        }
    }
}
</script>
<style scoped>
.Right{
		width: 0px;
		height: 530px;
		float: left;
		background: #fefefe;
		position: fixed;
		right: -3px;
		bottom: 0;
        z-index: 10;
        top: 13%;
        border:#0000002e 3px solid
}
.RightPull{
	/* width: 25%; */
    width: 39%;
	transition: width 0.5s ease;
    right:2px;
}
.RightPush{
  width:0px;
  transition: width 0.5s ease;
}
.Right_test{
	/* display: block;
	width: 17px;
	height: 61px;
	position: relative;
	left: -17px;
	bottom: 50%;
	top: 40%;
	z-index: 10;
    background-color: #0a68f6c7;
    border-radius: 5px; */
      /* float:left; */
      display: block;
      width: 30px;
      height: 30px;
      position: relative;
      background:#005e99;
      border-radius:50px;
      color: #FFF;
      cursor: pointer;
      left: -33px;
	  bottom: 50%;
      top: 40%;
      display: block;
      font-family: Courier New;
      font-size: 25px;
      font-weight: bold;
      line-height: 35px;
      text-align: center;
      text-shadow: 0 -4px;
}
.Right_test-navPull{/*拉出来*/
  transform:translate3d(0,100%,0);
  transition:transform 1s ease;
}
.Right_test-navPush{/*退回去*/
  transform:translate3d(0,100%,0);
  transition:transform 1s ease;
}

.Right_test:hover{
	text-decoration:none; 
	background-position:right 0;
}
</style>