<template>
  <button class="n-btn" :class="classes" :disabled="disabled" @click="onClick">
    <i class="n-btn-loading-svg inherit flex-center" v-if="loading">
      <n-loading-icon size="16"></n-loading-icon>
    </i>
    <n-icon class="n-btn-i n-btn-i-prefix" v-if="icon" :type="icon"></n-icon>
    <span v-if="$slots.default"><slot></slot></span>
    <n-icon class="n-btn-i n-btn-i-suffix" v-if="suffixIcon" :type="suffixIcon"></n-icon>
  </button>
</template>
<script>
import NIcon from '@uif/next/lib/components/icon'
import NLoadingIcon from '@uif/next/lib/components/loading-icon'
import {prop} from '@uif/next/lib/utils/tools'

export default {
  name: 'n-button',
  components: {
    NLoadingIcon,
    NIcon
  },
  props: {
    // 大小
    size: prop.inArray(['small', 'middle', 'large'], 'middle'),
    // 类型
    type: prop.inArray(['default', 'primary', 'success', 'warning', 'danger', 'link', 'text', 'none'], 'default'),
    // 宽度
    breadth: prop.inArray(['tight', 'long'], null, true),
    // 圆角
    shape: prop.inArray(['radius', 'circle'], 'radius'),
    // 线框模式
    outline: prop.boolean(),
    // hover样式
    hover: prop.boolean(),
    // active样式
    active: prop.boolean(),
    // 禁用
    disabled: prop.boolean(),
    // 加载中
    loading: prop.boolean(),
    // 前置Icon
    icon: prop.string(),
    // 后置Icon
    suffixIcon: prop.string()
  },
  computed: {
    classes ({size, type, shape, hover, active, outline, breadth, loading}) {
      return [
        'n-btn-' + size,
        'n-btn-' + type,
        'n-btn-' + shape,
        {
          hover,
          active,
          outline,
          loading,
          [breadth]: breadth
        }
      ]
    }
  },
  mounted () {
  },
  methods: {
    onClick (event) {
      if (!this.disabled) {
        this.$emit('click', event)
      }
    }
  }
}
</script>
