<template>
  <button
    :class="[
      'ni-button',
      `ni-button--${type}`,
      `ni-button--${size}`,
      {
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle,
        'is-disabled': disabled,
        'is-loading': loading
      }
    ]"
    :disabled="disabled || loading"
    @click="handleClick"
  >
    <slot></slot>
  </button>
</template>

<script lang="ts" setup>
defineProps({
  type: {
    type: String,
    default: 'default'
  },
  size: {
    type: String,
    default: 'default'
  },
  plain: {
    type: Boolean,
    default: false
  },
  round: {
    type: Boolean,
    default: false
  },
  circle: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits<{
  (e: 'click', evt: MouseEvent): void
}>()

const handleClick = (evt: MouseEvent) => {
  emit('click', evt)
}
</script>

<style lang="scss" scoped>
.ni-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  height: 32px;
  white-space: nowrap;
  cursor: pointer;
  color: #606266;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  transition: .1s;
  font-weight: 500;
  padding: 8px 15px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  background-color: #ffffff;

  &:hover,
  &:focus {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
  }

  &--primary {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;

    &:hover,
    &:focus {
      background: #66b1ff;
      border-color: #66b1ff;
      color: #fff;
    }
  }

  &--success {
    color: #fff;
    background-color: #67c23a;
    border-color: #67c23a;

    &:hover,
    &:focus {
      background: #85ce61;
      border-color: #85ce61;
      color: #fff;
    }
  }

  &--warning {
    color: #fff;
    background-color: #e6a23c;
    border-color: #e6a23c;

    &:hover,
    &:focus {
      background: #ebb563;
      border-color: #ebb563;
      color: #fff;
    }
  }

  &--danger {
    color: #fff;
    background-color: #f56c6c;
    border-color: #f56c6c;

    &:hover,
    &:focus {
      background: #f78989;
      border-color: #f78989;
      color: #fff;
    }
  }

  &--small {
    height: 24px;
    padding: 5px 11px;
    font-size: 12px;
  }

  &--large {
    height: 40px;
    padding: 12px 19px;
    font-size: 16px;
  }

  &.is-disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  &.is-plain {
    background: #fff;
    border-color: #dcdfe6;
    color: #606266;

    &:hover,
    &:focus {
      background: #fff;
      border-color: #409eff;
      color: #409eff;
    }

    &.ni-button--primary {
      color: #409eff;
      background: #ecf5ff;
      border-color: #b3d8ff;

      &:hover,
      &:focus {
        color: #fff;
        background: #409eff;
        border-color: #409eff;
      }
    }

    &.ni-button--success {
      color: #67c23a;
      background: #f0f9eb;
      border-color: #c2e7b0;

      &:hover,
      &:focus {
        color: #fff;
        background: #67c23a;
        border-color: #67c23a;
      }
    }

    &.ni-button--warning {
      color: #e6a23c;
      background: #fdf6ec;
      border-color: #f5dab1;

      &:hover,
      &:focus {
        color: #fff;
        background: #e6a23c;
        border-color: #e6a23c;
      }
    }

    &.ni-button--danger {
      color: #f56c6c;
      background: #fef0f0;
      border-color: #fbc4c4;

      &:hover,
      &:focus {
        color: #fff;
        background: #f56c6c;
        border-color: #f56c6c;
      }
    }
  }

  &.is-round {
    border-radius: 20px;
  }

  &.is-circle {
    border-radius: 50%;
    padding: 8px;
  }
}
</style> 