<template>
  <el-row type="flex" justify="space-around">
    <el-col :span="8" class="fb f-s-14 fc">
      {{ online ? showState : '离线' }}
    </el-col>
    <el-col :class="online ? heartAnimation ? 'icon-heart online' : 'icon-heart1 online' : 'icon-xinsui offline'"
      class="iconfont f-s-26 fc" :span="8"></el-col>
    <el-col :span="8" class="fb f-s-14 fc">
      {{ getPlaneMode }}
    </el-col>
  </el-row>
</template>

<script>

export default {
  name: 'HeartTag',
  data () {
    return {
      heartAnimation: false, // 控制心跳动画图标
      online: false,
      isOnlineSetTimeout: null
    }
  },
  props: {
    heartBeat: {
      deep: true
    },
    heartRandom: {
      default: null,
      deep: true
    },
    getPlaneMode: {
      deep: true
    }
  },
  computed: {
    // 显示状态
    showState () {
      let str = ''
      if (Number(this.heartBeat) & 128) {
        str += '已解'
      } else {
        str += '已锁'
      }
      return str
    }
  },
  watch: {
    heartRandom: {
      handler (val) {
        // 心跳动画
        this.heartAnimation = true
        setTimeout(() => {
          this.heartAnimation = false
        }, 500)
        // 在线状态
        if (this.isOnlineSetTimeout) { // 进入本次心跳 删除掉线计时 既以下会重新计时
          clearInterval(this.isOnlineSetTimeout)
        }
        this.online = true
        this.isOnlineSetTimeout = setTimeout(() => { // 计时10秒后 掉线
          this.online = false
        }, 10000)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/theme.scss";

.el-row {
  border-radius: 5px;
  height: 36px;
  line-height: 36px;
  background-color: rgba($color: $white-color, $alpha: 0.5);
  overflow: hidden;
}

.online {
  background-color: rgba($color: $success-color, $alpha: 0.5);
}

.offline {
  background-color: rgba($color: $danger-color, $alpha: 0.5);
}
</style>
