<template>
  <div
    class="svg-btn"
    :class="{ disabled: disabled }"
    @mouseover="itemHover"
    @mouseout="removeHover"
    @click="clickHandler"
    :style="{ background: bgColor }"
  >
    <svg-icon :name="name" :color="color || svgColor"></svg-icon>
    <span class="svg-btn-text" :style="{ color: color || '#262626' }">
      <slot />
    </span>
  </div>
</template>
<script>
export default {
  name: "SvgBtn",
  props: {
    name: {
      type: String,
      require: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    color: {
      type: String,
      default: "",
    },
    hoverBgColor: {
      type: String,
      default: "",
    },
  },
  computed: {
    svgColor() {
      return this.disabled ? "#bfbfbf" : this.isHover ? "#262626" : "#595959";
    },
    bgColor() {
      return this.isHover ? this.hoverBgColor || "#eee" : "transparent";
    },
  },
  data() {
    return {
      isHover: false,
    };
  },
  methods: {
    itemHover() {
      this.isHover = true;
    },
    removeHover() {
      this.isHover = false;
    },
    clickHandler() {
      !this.disabled && this.$emit("click");
    },
  },
};
</script>
<style lang="scss" scoped>
.svg-btn {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 8px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s;
  &.disabled {
    cursor: not-allowed;
    .svg-btn-text {
      color: #bfbfbf !important;
    }
  }
  .svg-btn-text {
    margin-left: 3px;
    // color: #262626;
    position: relative;
  }
}
</style>
