<template>
  <component
    :is="'button'"
    :type="nativeType"
    class="bx-button"
    :class="className"
    :disabled="disabled"
    @click="onClick"
    :ontouchstart="!disabled"
    >
    <span>
      <slot />
    </span>
  </component>
</template>
<script>
import { create } from '../utils/index'

const onlyValues = values => str => values.indexOf(str) !== -1

export default create({
  name: 'button',
  props: {
    plain: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    nativeType: {
      type: String,
      default: 'button',
    },
    type: {
      type: String,
      default: 'primary',
      validator: onlyValues(['primary', 'minor', 'assist']),
    },
    size: {
      type: String,
      default: 'normal',
      validator: onlyValues(['large', 'middle', 'normal', 'small', 'mini']),
    },
  },
  computed: {
    className() {
      const classArr = []
      classArr.push(`bx-button--${this.type}`)
      classArr.push(`bx-button--${this.size}`)
      if (this.plain) {
        classArr.push('bx-button--plain')
      }
      if (this.disabled) {
        classArr.push('bx-button--disabled')
      }
      return classArr.join(' ')
    },
  },
  methods: {
    onClick(event) {
      if (!this.loading && !this.disabled) {
        this.$emit('click', event)
      }
    },
  },
})
</script>
<style lang="postcss">
@import './index.css';
</style>
