  <!-- 地图工具 -->
<template>
<div class="box">
    <!-- <div id="toolMap" class="map-tool">
        <ul >
            <li id="layerCtroll" class="layer-ctroll" title="图层" v-if="(show.layerCtroll===false)?false:true"></li>
            <li id="fangda" class="fangda" title="放大" v-on:click="enlarge" v-if="(show.enlarge===false)?false:true"></li>
            <li id="suoxiao" class="suoxiao" title="缩小" v-on:click="narrow"  v-if="(show.narrow===false)?false:true"></li>
            <li id="clear" class="distance" title="清除" v-on:click="clear" v-if="(show.clear===false)?false:true"></li>
            <li id="distance" class="distance" title="测距" v-on:click="measure" v-if="(show.measure===false)?false:true"></li>
            <li id="huanyuan" class="area" title="还原" v-on:click="reset" v-if="(show.reset===false)?false:true"></li>
        </ul>
    </div> -->
      <!-- 工具栏 -->
        <div class="toolbar">
            <div class="tb_t" @click="toolbar($event,1)"></div>
            <div class="tb_c" @click="toolbar($event,2)"></div>
            <div class="tb_b" @click="toolbar($event,3)"></div>
            <div class="tb_dt" v-show="Evocation1">
                <span>地图选择</span>
                <br>
                <template>
                    <el-radio v-model="radio1" label="1">矢量地图</el-radio>
                    <br><br>
                    <el-radio v-model="radio1" label="2">影像地图</el-radio>
                </template>
                <br><br>
                <span>执法监察图层选择</span>
                <br>
                <template>
                    <el-radio v-model="radio" label="1">无</el-radio>
                    <br><br>
                    <el-radio v-model="radio" label="2">2017</el-radio>
                    <br><br>
                    <el-radio v-model="radio" label="3">2018</el-radio>
                    <br><br>
                    <el-radio v-model="radio" label="4">2019</el-radio>
                    <br><br>
                    <el-radio v-model="radio" label="5">2020</el-radio>
                </template>
            </div>
            <div class="tb_cl" v-show="Evocation2">
                <span>工具选择</span>
                <div class="cl_1" @click="MeasuringTools($event,1)">测距</div>
                <div class="cl_2" @click="MeasuringTools($event,2)">侧面</div>
                <div class="cl_3" @click="MeasuringTools($event,3)">标绘</div>
            </div>
            <div class="tb_qy" v-show="Evocation3">
                <p class="tb_qy_t">行政区划选择 <span class="tb_qy_x" @click="toolbar($event,1)">✖</span></p>
            </div>
        </div>
</div>
    
  
</template>
<style>
     .toolbar{
        width: 50px;
        height: 150px;
        background: #ffffff;
        position:relative;
        /* position: fixed;
        right: 20px; */
        /* top: 75px; */
        box-shadow: 1px 0px 10px #ccc;
        background: #fff;
    }
    .toolbar>div{
        width: 50px;
        height: 50px;
        cursor: pointer;
    }
    
    .toolbar .tb_t,.toolbar .tb_c,.toolbar .tb_b{
         background: url(./toolbar.fw.png)no-repeat; 
    }
    .toolbar .tb_t{
        background-position: -48px 0;
    }
    .toolbar .tb_c{
        background-position: -48px -50px;
    }
    .toolbar .tb_b{
        background-position: -48px -100px;
    }
    .toolbar .tb_dt,.toolbar .tb_cl,.toolbar .tb_qy{
        position: absolute;
        padding: 0 10px;
        background: #fff;
        font-size: 14px;
        box-shadow: 1px 0px 10px #ccc;
    }
    .toolbar .tb_qy{
        top: 0px;
        width: 400px;
        height: 400px;
        left: -410px;
        padding:  0;
    }
    .toolbar .tb_qy .tb_qy_t{
        height: 40px;
        font-size: 14px;
        line-height: 40px;
        color: #fff;
        background: #409EFF;
        padding-left: 20px;
    }
    .toolbar .tb_qy .tb_qy_x{
        position: absolute;
        right: 20px;
    }
    .toolbar .tb_cl{
        top: 100px;
        width: 100px;
        height: 170px;
        left: -130px;

    }
    .toolbar .tb_dt{
        top: 50px;
        width: 200px;
        height: 400px;
        left: -230px;
    }
    .toolbar .tb_dt>span,.toolbar .tb_cl>span{
        display: block;
        font-size: 14px;
        line-height: 40px;
        border-bottom: 1px solid #ccc;
    }
    .toolbar .cl_1,.toolbar .cl_2,.toolbar .cl_3{
        padding-left: 35px;
        margin: 15px 0;
    }
     .toolbar .cl_1{
        background: url(./ruler.png)no-repeat left center;
        background-size: 30% 150%;
    } 
    .toolbar .cl_2{
        background: url(./cemian.png)no-repeat 3px center;
        background-size: 25% 110%;
    }
    .toolbar .cl_3{
        background: url(./biaoji.png)no-repeat 3px center;
        background-size: 25% 110%;
    } 
    .el-radio {
    color: #606266;
    cursor: pointer;
    margin-right: 30px;
    }
    .el-radio__input.is-checked .el-radio__inner {
    border-color: #409EFF;
    background: #409EFF;
}

.el-radio__inner {
    border: 1px solid #DCDFE6;
    border-radius: 100%;
    width: 14px;
    height: 14px;
    background-color: #FFF;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.el-radio, .el-radio__inner, .el-radio__input {
    position: relative;
    display: inline-block;
}






    ul,li{
        margin:0px;
        padding:0px;
        list-style:none;
    }
    .map-tool{
        width: 30px;
        background-color: #f5f5f5;
        font-size: 12px;
        box-shadow: 0 0 5px #727272;
        padding: 3px 0px;
        z-index: 99;
    }
    .map-tool ul li {
        display: block;
        color: #fff;
        height: 30px;
        width:100%;
        line-height: 30px;
        text-indent: 35px;
        cursor: pointer;
        border-bottom: 1px solid #3289d2;
        background: url(./tool-icon2.png) no-repeat center center;
    }

    /* .layer-ctroll {
        border-top:1px solid #4fb9e5;
        background: url(./layer-ctroll.png) no-repeat 8px 5px !important;
    } */

    .fangda {
        background-position: 0px -120px !important;
    }

    .suoxiao {
        background-position: 0px -90px !important;
    }

    .distance {
        background-position: 0px 2px !important;
    }

    .area {
        border-bottom: none !important;
        background-position: 0px -30px !important;
    }

    .tagging {
        background-position: 5px -60px !important;
    } 
</style>
<script>
    export default{
        name:'jy-toolbar',
        props: {
            show:{
                default:{
                    layerCtroll:true,
                    enlarge:true,
                    narrow:true,
                    clear:true,
                    measure:true,
                    reset:true
                }
            }
        },
        data () {
            return{
                Evocation1: false,
                Evocation2: false,
                Evocation3: false,
                 radio: '1',
                radio1: '1',
               
            }
        },
        methods:{
             toolbar(event,index){
                var arr = event.toElement.parentNode.children
                var str = event.toElement.style.backgroundPositionX
                for(var i = 0;i<=arr.length-1;i++){
                    arr[i].style.backgroundPositionX = "-48px"
                }
                if(str != "2px"){
                    event.toElement.style.backgroundPositionX = "2px"
                }else{
                    event.toElement.style.backgroundPositionX = "-48px"
                }
                if(index == 1){
                    console.log(index)
                    this.Evocation3 = !this.Evocation3
                }else if(index == 2){
                    this.Evocation1 = !this.Evocation1
                }else if(index == 3){
                    this.Evocation2 = !this.Evocation2
                }
                if(this.Evocation1){
                    arr[1].style.backgroundPositionX = "2px"
                }
                if(this.Evocation2){
                    arr[2].style.backgroundPositionX = "2px"
                }
                if(this.Evocation3){
                    arr[0].style.backgroundPositionX = "2px"
                }
            },
             MeasuringTools(event,index){
                console.log(event,index)
                var arr = event.toElement.parentNode.children
                var str = event.toElement.style.color
                for(var i = 1;i<=arr.length-1;i++){
                    arr[i].style.color = ""
                }
                
                if(str){
                    event.toElement.style.color = ""
                }else{
                    event.toElement.style.color = "#056EC6"
                }
            },
            enlarge:function(){
                this.$emit('enlarge');
            },
            narrow:function(){
                this.$emit('narrow');
            },
            clear:function(){
                this.$emit('clear');
            },
            measure:function(){
                this.$emit('measure');
            },
            reset:function(){
                this.$emit('reset');
            },
            
            
        }
    }
</script>