<template>
  <div>
    <div v-if="!btnGroup">
      <el-button :type="type" :size="size" :icon="iconBtn" :circle="circle" :disabled="disabled" :plain="plain" @click="handleClick" :class="[
            type ? 'el-button--' + type : '',
            buttonSize ? 'el-button--' + buttonSize : '',
            circleBg?'el-button--'+circleBg:'',
            dashedBtn?'dashed-btn':'',
            {
                'is-disabled': buttonDisabled,
                'is-loading': loading,
                'is-plain': plain,
                'is-round': round,
                'is-circle': circle,
            }]">
        <span v-if=" !iconBtn">
          <i v-if="iconClassPre" style="margin-right:8px" :class="iconClassPre?iconClassPre:''"></i>
          {{text}}
          <i v-if="iconClassLater" style="margin-left:4px" :class="iconClassLater?iconClassLater:''"></i>
          <slot></slot>
        </span>
      </el-button>
    </div>
    <!-- 按钮组 -->
    <el-button-group v-if="btnGroup&&btnGroup.length">
      <el-button v-for="(item,index) in btnGroup" :key="index" :type="item.type" :disabled="disabled" @click="handleClick">{{item.name}}</el-button>
    </el-button-group>
  </div>

</template>

<script>
var timer, flag
export default {
  name: 'enoButton',
  inject: {
    elForm: {
      default: '',
    },
    elFormItem: {
      default: '',
    },
  },
  props: {
    circle: {
      type: Boolean,
      default: false
    },
    circleBg: {
      type: String,
      default: ''
    },
    iconBtn: {  //纯图标按钮
      type: String,
      default: ''
    },
    iconClassPre: { //按钮文字前显示icon类名
      type: String,
      default: ''
    },
    iconClassLater: { //按钮文字后显示icon类名
      type: String,
      default: ''
    },
    btnGroup: {  //按钮组
      type: Array
    },
    text: {  //按钮文字
      type: String,
      default: '新建',
    },
    type: {
      type: String,
      default: '',
    },
    dashedBtn: {
      type: Boolean
    },
    wait: {
      type: Number,
      default: 800,
    },
    optionType: String,
    optionParams: Object,
    size: String,
    icon: {
      type: String,
      default: '',
    },
    nativeType: {
      type: String,
      default: 'button',
    },
    loading: Boolean,
    disabled: {
      type: Boolean,
      default: false
    },
    plain: {
      type: Boolean,
      default: false
    },
    autofocus: Boolean,
    round: Boolean
  },
  computed: {
    _elFormItemSize() {
      return (this.elFormItem || {}).elFormItemSize
    },
    buttonSize() {
      return (
        this.size || this._elFormItemSize || (this.$ELEMENT || {}).size
      )
    },
    buttonDisabled() {
      return this.disabled || (this.elForm || {}).disabled
    },
  },
  methods: {
    handleClick(evt) {
      if (this.buttonDisabled) return
      if (this.wait === 0) {
        this.Click(evt)
      } else {
        if (!flag) {
          flag = true
          this.Click(evt)
          timer = setTimeout(() => {
            flag = false
          }, this.wait)
        }
      }

    },
    Click(evt) {
      this.$emit('click', evt)
    },
  },
}
</script>

<style lang="less" scoped>
@import "../../style/base.less"; 
/*按钮*/
.el-button {
  height: 32px;
  padding: 0;
  vertical-align: middle;
  border-color: @borderColor;
  color: @textColor;
  display: inline-block;
  margin-right: 12px;
  border-radius: 4px;

  &:visited,
  &:focus {
    border-color: @borderColor;
    color: @textColor;
    background-color: #fff;
  }

  &:hover,
  &active {
    border-color: @mainColor;
    color: @mainColor;
    background-color: #fff;
  }

  &.is-disabled {
    border-color: @borderColor;
    color: @borderColor;
  }

  span {
    height: 100%;
    display: inline-block;
    line-height: 32px;
    padding: 0;
  }

  .el-button-suffix {
    font-size: 14px;
    margin-right: 8px;
  }

  .el-button-prefix {
    font-size: 12px;
    margin-left: 4px;
  }

  &.el-button--primary {
    background-color: @mainColor;
    border-color: @mainColor;
    color: #fff;

    &.is-disabled {
      background-color: @borderColor;
      border-color: @borderColor;
      color: #fff;

      &:hover {
        background-color: @borderColor;
        border-color: @borderColor;
        color: #fff;
      }
    }

    &:hover {
      background-color: #3d6cd9;
      border-color: #3d6cd9;
    }
  }

  &.el-button--text {
    color: @mainColor;
    border: none;

    &.is-disabled {
      color: @borderColor;

      &:hover {
        color: @borderColor;
      }
    }

    &:hover {
      background-color: transparent;
      color: #3d6cd9;
    }
  }
  &.el-button--success {
    background-color: @successColor;
    border-color: @successColor;
    color: #fff;
  }
  &.el-button--info {
    background-color: @9cColor;
    border-color: @9cColor;
    color: #fff;
  }
  &.el-button--warning {
    background-color: @warningColor;
    border-color: @warningColor;
    color: #fff;
  }
  &.el-button--danger {
    background-color: @wrongColor;
    border-color: @wrongColor;
    color: #fff;
  }
  &.is-disabled {
    position: relative;

    &:after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: transparent;
    }
  }

  // & + .el-button {
  //   margin-left: 12px;
  // }
}
.el-button.is-circle {
  border: none;
}
.is-circle.el-button--primary-bg {
  width: 32px;
  background: rgba(72, 128, 255, 0.1);
  color: @mainColor;
  &:hover {
    color: #3d6cd9;
    background: rgba(72, 128, 255, 0.2);
  }
}
.dashed-btn {
  border: 1px dashed #ccc;
}
</style>
