<template>
  <Tooltip
    :transfer="true"
    v-if="tooltip"
    :content="tooltip"
    :placement="placement"
  >
    <i
      @click="onClick"
      class="icon-button iconfont"
      :class="getClass()"
      style="cursor: pointer"
    ></i>
  </Tooltip>
  <i
    @click="onClick"
    v-else
    class="icon-button iconfont"
    :class="getClass()"
    style="cursor: pointer"
  ></i>
</template>

<script>
export default {
  props: ["icon", "tooltip", "type", "placement"],
  name: "f-icon",
  methods: {
    onClick() {
      this.$emit("click");
    },
    getClass() {
      return this.type ? `text-${this.type} ${this.icon}` : `${this.icon}`;
    }
  }
};
</script>

<style lang="less" scoped>
.icon-button {
  &.text-primary {
    color: #2d8cf0;
  }
  &.text-error {
    color: #ed4014;
  }

  &.text-info {
    color: #2db7f5;
  }
  &.text-success {
    color: #19be6b;
  }
}
</style>
