<template>
    <div class="aos-refresh">
        <div class="aos-refresh__primary" v-if="copyType==='primary'" @click="handleClick"> 
            <div :style="{'transform': 'rotate(' + rotate+ 'deg)'}" style="transition: all 1s;">
                <i class="el-icon-refresh-right" :style="{'transform': 'rotate(' + rotate+ 'deg)'}"></i>
            </div>
            <span>刷新</span>
        </div>
        <div v-if="copyType==='icon'" :style="{'transform': 'rotate(' + rotate+ 'deg)'}" style="transition: all 1s;"> 
            <i class="el-icon-refresh-right"  @click="handleClick" :style="{'transform': 'rotate(' + rotate+ 'deg)'}"></i>
        </div>
        <div  v-if="copyType==='text'"> 
            <span  @click="handleClick">刷新</span>
        </div>
        <div  v-if="copyType==='button'">
            <el-button type="primary"  @click="handleClick">刷新</el-button>
        </div>
    </div>
</template>

<script >
import throttle from 'throttle-debounce/throttle';
export default {
    name: "aosRefresh",
    props:{
        type:{
            type:String,
            default:'primary'
        },
        refreshSuccess:{
            type:Boolean,
            default:true
        },
        throttle: Number,
        debounce: Number,
        debounceImmediate: {
        type: Boolean,
        default: true
      }
    },
    watch:{
        type:{
            handler:function(val,oldVal){
                if(val !==oldVal){
                    this.copyType = this.$_.cloneDeep(val)
                }
            },
            immediate: true
        }
    },
    data() {
        return {
            copyType:'',
            rotate:0,
        }
    },
    created(){
        if (this.debounce) {
        this.debounceClick = this.$utils.debounce( this.click, this.debounce, this.debounceImmediate)
      }
        if (this.throttle) {
        this.throttleClick = throttle(this.throttle, this.click)
      }
    },
    components: {},
    methods: {
        handleClick(evt){
        if (this.debounce) {
          this.debounceClick(evt)
        } else if (this.throttle) {
          this.throttleClick(evt)
        } else {
          this.click(evt)
        }
        },
        click(evt){
            this.rotate += 180
            this.$emit('refresh-click',evt)
        }
    }
}
</script>
