<template>
    <div class="cn-refresh-box" v-ele-click-outside="dropdownShowFalse">
        <span>
            <el-button-group size="mini">
              <el-button size="mini" @click="$emit('change')"><i class="cn-icon cn-icon-refresh1"></i></el-button>
              <el-button class="cn-button" size="mini" @click="showRefreshList">
                  <span class="cn-button-label" v-if="interLabel">{{interLabel}}</span>
                  <i class="cn-icon cn-icon-dropdown" :class="dropdownShow?'active' : ''"></i>
              </el-button>
            </el-button-group>
        </span>
        <transition name="el-zoom-in-top">
            <div v-if="dropdownShow" class="refresh-list">
                <div v-for="(item, index) in refreshArr" :key="index" @click="setRefresh(item)" class="refresh-list-item" :class="item.value==interval ? 'active' : ''">
                  {{item.label}}
                  <i v-if="item.value==interval" class="cn-icon cn-icon-check"></i>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
// import { ref } from 'vue'
export default {
  name: 'TimeRefresh',
  props: {
    endTime: {
      type: Number
    }
  },
  data () {
    return {
      searchTime: [],
      lastRefreshTime: '',
      intervalTimer: null,
      interval: -1,
      unit: 2,
      dropdownShow: false,
      interLabel: '',
      refreshArr: [
        { value: -1, label: 'off' },
        { value: 30, label: '30s' },
        { value: 60, label: '1m' },
        { value: 300, label: '5m' },
        { value: 900, label: '15m' },
        { value: 1800, label: '30m' }
      ]
    }
  },
  setup (props, ctx) {

  },
  methods: {
    setRefresh (val) {
      this.interval = val.value
      this.interLabel = val.value == -1 ? '' : val.label
      this.dropdownShow = false
      const now = window.$dayJs.tz().valueOf()
      if (val && val.value != -1) {
        // 设置定时器
        this.intervalTimer = setInterval(() => {
          this.$emit('change')
        }, val.value * 1000)
        // 设置定时器 比上次刷新间隔大于30s 立马刷新一次
        if ((now - this.endTime) / 1000 > 30) {
          this.$emit('change')
        }
        return
      }
      if (val && val.value == -1) {
        // 清除定时器
        clearInterval(this.intervalTimer)
      }
    },
    showRefreshList () {
      this.dropdownShow = !this.dropdownShow
    },
    dropdownShowFalse () {
      this.dropdownShow = false
    }
  }
}
</script>
