<!--
 * @Description: 地图下方使用按钮
 * @Author: 王晓颖
 * @Date: 2021-04-07 11:31:37
 -->
<template>
  <div :class="{'btn-icon-choose':select}" :title="name" class="map-btn" @click="clickBtn(select)">
    <svg-icon :title="name" :icon-class="icon" class="btn-icon" />
  </div>
</template>

<script>
export default {
  name: 'SelectButton',
  props: {
    name: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      required: true
    },
    select: {
      type: Boolean,
      required: true
    }
  },
  methods: {
    clickBtn(select) {
      this.$emit('click', select)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.map-btn {
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  border: 1px solid #1B90E4;
  margin: 0.5rem;
  padding: 0.9rem;
  background-color: rgba(48, 64, 131, 0.8);
  .btn-icon {
    margin: auto;
    font-size: 2.2rem;
    color: #f0f0f0;
  }
  .btn-icon:hover {
    color: #1B90E4;
  }
}
.map-btn:hover{
  cursor: pointer;
}
.btn-icon-choose{
  border: 1px solid #1B90E4;
  .btn-icon{
    color:#1B90E4;
  }
  .btn-icon:hover{
    color:#1B90E4;
  }
}
</style>
