<!--
 * @Description: 图形框选工具
 * @Author: 王晓颖
 * @Date: 2021-03-10 09:50:44
 -->
<template>
  <div class="draw-card">
    <el-button title="绘制矩形选框" class="icon-btn" @click="draw('Rectangle')">
      <img src="@/assets/overview/square.png" style="height: 18px;width: 18px;">
    </el-button>
    <el-button title="绘制圆形选框" class="icon-btn" @click="draw('Circle')">
      <img src="@/assets/overview/circle.png" style="height: 18px;width: 18px;">
    </el-button>
    <el-button title="绘制多边形选框" class="icon-btn" @click="draw('Polygon')">
      <img src="@/assets/overview/polygon.png" style="height: 18px;width: 18px;">
    </el-button>
    <el-button v-show="clearShow" title="清除选区" class="icon-btn" @click="clear">
      <img src="@/assets/overview/delete.png" style="height: 18px;width: 18px;">
    </el-button>
  </div>
</template>

<script>
export default {
  name: 'DrawTool',
  props: {
    squareShow: {
      type: Boolean,
      default: true
    }, // 矩形框选工具是否开启
    polygonShow: {
      type: Boolean,
      default: true
    } // 多边形框选工具是否开启
  },
  data() {
    return {
      clearShow: false
    }
  },
  methods: {
    // 点击框选
    draw(type) {
      this.$notify({
        title: '框选工具开启',
        message: '您可以开始框选区域'
      })
      this.$emit('click', type)
      this.clearShow = true
    },
    // 清除
    clear() {
      this.$emit('clear')
      this.clearShow = false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.draw-card{
  margin: 0px 0px;
  .icon-btn{
    height: 40px;
    width: 40px;
    padding: 0px;
    -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */
    box-shadow: 0px 1px 3px #d9d9d9;
  }
}

</style>