<template>
  <al-button :type="type" :plain="plain" :round="round" :circle="circle" :icon="icon" :disabled="disabled" :loading="loading||(blockClick)" @click="_click"><slot></slot></al-button>
</template>

<script>
    export default {
        name: "ThrottleButton",
        data(){
            return{
                isSlotted:false,//是否插入slot
                blockClick:false,
            }
        },
        props:{
            //按钮文案
            content:{
                type:String,
                default:"按钮"
            },
            //按钮类型
            type:{
                type:String,
                default:""
            },
            //icon
            icon:{
                type:String,
                default:""
            },
            //朴素风格
            plain:{
                type:Boolean,
                default:false
            },
            //圆角
            round:{
                type:Boolean,
                default:false
            },
            //失效状态
            disabled:{
                type:Boolean,
                default:false
            },
            //loading状态
            loading:{
                type:Boolean,
                default:false
            },
            //圆形
            circle:{
                type:Boolean,
                default:false
            },
            noThrottle:{
                type:Boolean,
                default:false
            }

        },
        methods:{
            _click(e){
                if(!this.noThrottle){
                    if(this.blockClick){
                        return false;
                    }
                    e['$button']=this;
                    this.blockClick=true;
                    this.$emit("click",e);
                }else{
                    this.$emit("click",e);
                }
            }
        },
        created(){
            //检查是否传入slot,有传入slot的话，则隐藏默认的文本元素
            if(this.$slots.default&&this.$slots.default.length){
                this.isSlotted=true;
            }
        }
    }
</script>

<style scoped lang="scss">
  .el-button{
    padding: 10px 19px;
    /deep/ i{
      font-size: 16px;
    }
    /deep/ *{
      font-size: 14px;
      line-height: 1;
    }
    &.is-round {
      border-radius: 20px;
      padding: 10px 23px;
    }
    &.is-circle {
      border-radius: 50%;
      padding: 5px;
    }
    /deep/{
      .el-icon-loading{
        line-height: 0;
        vertical-align: -1px;
      }
    }
  }
  .el-button--text{
    padding: 0;
  }
</style>
