<template>
  <div
    :class="[this.$parent.prefixCls+'-button',this.$parent.prefixCls+'-button-'+this.type]"
    @click="onClick"
  >
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'swipeoutButton',
  props: {
    autoClose: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: 'default'
    }
  },
  methods: {
    onClick () {
      if (this.autoClose) {
        this.$parent.onButtonClick()
      }
      this.$emit('on-click')
    }
  }
}
</script>
<style>
.vui-swipeout-button {
  width: 80px;
  height: 100%;
  color: #fff;
  font-size: 14px;
  text-align: center;
}
.vui-swipeout-button-default {
  background-color: #336DD6;
}
.vui-swipeout-button-delete{
  background-color: #D23934;
}
.vui-swipeout-button-success{
  background-color: #1AAD19;
}
.vui-swipeout-button-info{
  background-color: #46b8da;
}
.vui-swipeout-button-warning{
  background-color: #f0ad4e;
}
.vui-swipeout-button-gray{
  background-color: #c8c7cd;
}
</style>
