<!-- type  -->
<!--  default: 默认按钮 -->
<!--  primary: 主要按钮 -->
<!--  success: 成功按钮 -->
<!--  warning: 警告按钮 -->
<!--  danger: 危险按钮 -->
<!--  text: 文字按钮 -->
<!--  smallIcon: 小图表按钮 -->
<!--  wideIcon: 大图表按钮 -->
<!--  hoverIcon: 带hover按钮 -->
<template>
  <el-button
    class="adb-button"
    :type="getType()"
    v-bind="$attrs"
    v-on="$listeners"
    :class="`adb-${type}`"
  >
    <slot></slot>
    <adb-icon v-if="adbIcon" :icon-class="adbIcon"></adb-icon>
  </el-button>
</template>

<script>
export default {
  name: 'adb-button',
  props: {
    type: {
      type: String,
      default: 'default',
    },
    adbIcon: String,
  },
  methods: {
    getType() {
      const _primarys = ['smallIcon', 'wideIcon'];
      if (_primarys.includes(this.type)) {
        return 'primary';
      }
      return this.type;
    },
  },
};
</script>

<style lang="scss" scoped>
.adb-button {
  font-size: 14px;
  border-radius: 6px;
  font-weight: 400;
  padding-left: 24px;
  padding-right: 24px;
}
.el-button--small.adb-button {
  padding: 8px 16px;
}
.el-button--mini.adb-button {
  padding: 6px 16px;
}
.adb-smallIcon {
  padding: 10px;
  &.el-button--small {
    padding: 9px;
  }
  &.el-button--mini {
    padding: 7px;
  }
}
.adb-wideIcon {
  padding-left: 32px;
  padding-right: 32px;
  &.el-button--small {
    padding-left: 32px;
    padding-right: 32px;
  }
  &.el-button--mini {
    padding-left: 24px;
    padding-right: 24px;
  }
}
.adb-hoverIcon {
  border: none;
  padding: 11px;
  transition: 0.2s;
  &:hover,
  &:active,
  &:focus {
    color: #5c6570;
    background: #eaedf0;
    transition: 0.2s;
  }
}
</style>
