<template>
  <button :type="nativeType" :class="classes" :style="styles" :disabled="disabled" @click="handleClick">
    <u-icon class="uif-btn-icon-l" v-if="icon" :type="icon"></u-icon>
    <span v-if="$slots.default"><slot></slot></span>
    <u-icon class="uif-btn-icon-r" v-if="suffixIcon" :type="suffixIcon"></u-icon>
    <u-icon v-if="loading" class="uif-btn-icon-loading" type="loading"></u-icon>
  </button>
</template>
<script>
import UIcon from '@uif/hq/src/components/icon'
import { oneOf } from '@uif/hq/src/utils/assist'

export default {
  name: 'u-button',
  components: {UIcon},
  props: {
    size: {
      validator (value) {
        return oneOf(value, ['small', 'middle', 'large'])
      },
      default: 'middle'
    },
    type: {
      validator (value) {
        return oneOf(value, ['default', 'main', 'primary', 'text'])
      },
      default: 'default'
    },
    nativeType: {
      validator (value) {
        return oneOf(value, ['button', 'submit', 'reset'])
      },
      default: 'button'
    },
    outline: {
      type: Boolean,
      default: false
    },
    spacing: {
      type: [String, Number],
      default: 0
    },
    hover: {
      type: Boolean,
      default: false
    },
    active: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: ''
    },
    // 后置Icon
    suffixIcon: {
      type: String,
      default: ''
    },
    long: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
    }
  },
  computed: {
    classes () {
      return [
        'uif-btn',
        'uif-btn-' + this.size,
        'uif-btn-' + this.type,
        {
          hover: this.hover,
          active: this.active,
          'uif-btn-outline': this.outline,
          'uif-btn-long': this.long,
          'uif-btn-loading': this.loading
        }
      ]
    },
    styles () {
      const style = {}
      if (this.spacing) {
        style['letter-spacing'] = this.spacing + 'px'
        style['text-indent'] = this.spacing + 'px'
      }
      return style
    }
  },
  mounted () {
  },
  methods: {
    handleClick (event) {
      this.$emit('click', event)
    }
  }
}
</script>
