<template>
  <div class="th-icon-btn" :class="{active:selected}" style="margin: 0 5px;">
    <Icon class="btn disabled" :type="name" :size="size" color="#bbb" v-if="disabled"/>
    <Icon class="btn" :type="name" :size="size" :color="selected?'#ffffff':'#2d8cf0'" @click="doClick" v-else/>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: ''
    },
    size: {
      type: Number,
      default: 18
    },
    disabled: {
      type: Boolean,
      default: false
    },
    selected: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    doClick() {
      this.$emit('on-click')
    }
  }
}
</script>
