<template>
  <div class="refreshtimer">
    <div style="width: 150px">倒计时<span style="color: red;font-weight: bold">{{time}}</span>秒刷新</div>
    <el-button type="primary" icon="el-icon-search" size="small" style="margin: -6px 0px -6px 10px;" title="刷新" @click="time=0">刷新</el-button>
  </div>
</template>

<script>

export default {
  name: 'RefreshTimer',
  props: {
    defaultTime: {
      type: Number,
      default: 30
    },
  },
  computed: {
  },
  data() {
    return {
      timer :null,
      time: this.defaultTime
    }
  },
  mounted() {
    this.timer = setInterval(this.setTime, 1000);
  },
  methods: {
    setTime() {
      this.time--
      if(this.time <= 0) {
        this.time = this.defaultTime
        this.$emit('search')
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.refreshtimer {
  z-index: 11111111;
  position: absolute;
  left: 2px;
  top: 10px;
  color: #2f2f2f;
  border-radius: 5px;
  background-color: rgba(203, 209, 217, 0.9);
  display: flex;
  height: 37px;
  letter-spacing: 1px;
  //line-height: 30px;
  padding: 9px 10px;
  width: 230px;
  font-family: 微软雅黑;
}


</style>