<template>
	<el-button v-if="hasAuth" @click="_onClickOnce" v-bind="_allProps" :loading="isLoading" :size="sizeSync" :type="typeSync" :link="isLink" :disabled="disabled">
		<div v-if="!!icon" :class="icon" class="mr5 inline"></div>
		<div class="inline">
			<slot></slot>
		</div>
	</el-button>
</template>

<script>
export default {
		name : "st-btn" ,
		emits:["tap"],
		props:{
		    auth : String ,
		    disabled : Boolean ,
            icon : String ,
            type : {
		        type : String ,
                default : "btn"
            },
			debounceTime : {
				type : Number,
				default: 0
			},
			to : [Object,String]
		},
        computed:{
		    hasAuth(){
		        return !this.auth || this.$s.hasAuth([this.auth]);
            },
            isLink(){
		        return this.type == "text" ;
            },
            sizeSync(){
		        switch (this.type) {
                    case "text" :
                        return "small" ;
                    default :
                        return "default" ;
                }
            },
	        typeSync(){
		    	return this.type == "default" ? "" : "primary" ;
	        },
            _allProps(){
		        let { icon , ...props} = this.$props ;
		        return props ;
            }
        },
		data(){
			return {
				isLoading : false 
			};
		},
		created() {
            this._onClickOnce = this.$s.debounce(this._onClick , this.debounceTime , {leading : true , trailing :false }) ;
		},
		unmounted() {
			this._onClickOnce.cancel();
		},
		methods:{
			loading(isLoading){
				this.isLoading = isLoading !== false ;
				return this ;
			},
			_onClick(e){
			    if(this.isLoading || this.disabled) return ;
				this.$emit('tap',e);
				if (this.to){
					this.$router.push(this.to).catch((err) => {
						console.log("err: ", err);
					});
				}
			}
		}
	}
</script>
