<!--公用组件：按钮
/**
* @author 廖阳
* @date 2019年6月14日
* @param 参考el-button
* 用法：
  <zl-button :disabled="disabled"></zl-button>              
*/
-->
<template>
 <!-- <button class="zl-button" type="button" :disabled="disabled || isDisabled || loading" @click="handleClick" :class="btnClass">
    <template v-if="iconDirection === 'left'">
      <i class="el-icon-loading" v-if="loading" />
      <svg-icon class="left-icon" v-if="icon && !loading" :icon-class="icon" />
      <span class="border-s"></span>
      <span class="border-left"></span>
    </template>
    <template v-if="iconDirection === 'top'">
      <div class="zl-button-icon">
        <svg-icon v-if="icon && !loading" :icon-class="icon" class="top-icon" />
      </div>
    </template>
    <span :class="fontClass" :style="{color:color}">
      <slot/>
    </span>
    <template v-if="iconDirection === 'right'">
      <span class="border-s"></span>
      <span class="border-left"></span>
      <i class="el-icon-loading" v-if="loading" />
      <svg-icon class="right-icon" v-if="icon && !loading" :icon-class="icon" />
    </template>
  </button> -->
	<el-button :loading="loading" @click="handleClick" :disabled="isDisabled" :type="type">保存</el-button>
</template>

<script>
export default {
  props: {
    icon: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: ''
    },
    loading: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'default',
      validator: val => ['default', 'primary', 'danger', 'flat', 'metal', 'common', 'success', 'submit', 'warn', 'border'].indexOf(val) > -1
    },
  },
  data() {
    return {
      isDisabled: false
    }
  },
  methods: {
    handleClick(e) {
      // 添加防重操作，1秒内只能触发一次
      this.isDisabled = true
      setTimeout(() => {
        this.isDisabled = false
      }, 1000)
      this.$emit('click', e)
    }
  }
}
</script>