<template>
  <div class='map'>
    <el-amap
      ref='map'
      :center="center"
      :zoom="zoom"
    >
      <el-amap-marker  :position=" circleCenter"></el-amap-marker>
      <el-amap-mouse-tool
        v-if="created"
        :type="type"
        :auto-clear="true"
        @draw="draw"
      />
      <el-amap-circle
        :center="circleCenter"
        :radius="radius"
        :visible="true"
        ref='circle'
      />
    </el-amap>
    <div class='btnBox'>
      <VaButton
        color="info"
        gradient
        :round='false'
        @click='created = true'
        icon='edit'
        class="mr-6 mb-2"
      >
        开始绘制
      </VaButton>
      <VaButton
        :round='false'
        color="danger"
        gradient
        @click='deleteDraw'
        icon='delete'
      >
        删除绘制
      </VaButton>
    </div>
  </div>

</template>

<script>
  export default {
    name: 'amap',
    data(){
      return {
        zoom:11,
        center:[119.508417,32.422529],
        created:false,
        type:'circle',
        circleCenter:[0,0],
        radius:0
      }
    },
    methods:{
      deleteDraw(){
        this.circleCenter = []
        this.radius = 0
      },
      setCircle(data){
        this.circleCenter = data.center
        this.radius = data.radius
        setTimeout(()=>{this.$refs.map.$$getInstance().setBounds(this.$refs.circle.$$getInstance().getBounds())},1000)

        // console.log(this.$refs.circle.$$getInstance().getBounds())
      },
      draw(e,target){
        this.circleCenter = e.center
        this.radius = e.radius
        this.$emit('drawEnd',e)
        this.created = false
      },
    },
  }
</script>

<style scoped>
  .map{
    width: 100%;
    height: 400px;
    position: relative;
  }
  .btnBox{
    position: absolute;
    right: 0px;
    top:10px;
  }
</style>
