<template>
<div class="mch-draw-bar tc">
  <div class="toolbox" :class="{active:drawMode===item.mode}" @click="clickTool(item)" v-for="item in filteredTools" :key="item.id">
    <Icon :custom="`iconfont ${item.icon}`" size="18"/>
    <div>{{item.name}}</div>
  </div>
</div>
</template>

<script>
export default {
  props: {
    drawMode: {
      type: String,
      default: ''
    },
    tools: {
      type: Array,
      default: () => ['draw_point', 'draw_line_string', 'draw_polygon']
    }
  },
  methods: {
    clickTool (tool) {
      this.$emit('on-click', tool)
    }
  },
  computed: {
    filteredTools() {
      const t = [
        {
          type: 'draw_point',
          mode: 'draw_point',
          name: '标点',
          icon: 'icon-locate'
        },
        {
          type: 'draw_line_string',
          mode: 'draw_line_string',
          name: '标线',
          icon: 'icon-line'
        },
        {
          type: 'draw_polygon',
          mode: 'draw_polygon',
          name: '标面',
          icon: 'icon-polygon'
        }
      ]
      return t.filter(d => this.tools.includes(d.type))
    }
  }
}
</script>