<template>
  <div class="dot-status" :class="{ 'is-active': active }">
    <el-tooltip :content="active ? activeText : inactiveText" placement="top">
      <div class="status-wrapper">
        <span class="status-dot"></span>
        <span v-if="showText" class="status-text">{{ active ? activeText : inactiveText }}</span>
      </div>
    </el-tooltip>
  </div>
</template>

<script>

export default {
  name: 'DotStatus',
  props: {
    showText: {
      type: Boolean,
      default: false
    },
    activeText: {
      type: String,
      default: '在线'
    },
    inactiveText: {
      type: String,
      default: '离线'
    },
    active: {
        type: Boolean,
        default: false,
    }
  },
}
</script>

<style lang="scss" scoped>
.dot-status {
  display: inline-flex;
  align-items: center;
  margin: 0 4px;

  .status-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #f56c6c;
    transition: all 0.3s ease;
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: inherit;
      opacity: 0.5;
      animation: pulse 2s infinite;
    }
  }

  .status-text {
    font-size: 12px;
    color: #f56c6c;
    line-height: 1;
  }

  &.is-active {
    .status-dot {
      background-color: #67c23a;
    }
    .status-text {
      color: #67c23a;
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  70% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
</style> 