<template>
  <div class="api-key-display">
    <span class="api-key-text">
      {{ displayedApiKey }}
    </span>
    <i :class="[iconClass, 'toggle-icon']" @click="toggleApiKey" />
  </div>
</template>

<script>
export default {
  name: 'ApiKeyDisplay', // 组件名称
  props: {
    apiKey: {
      type: String,
      required: true
    },
    // 可以自定义占位符的字符，默认为 '*'
    placeholderChar: {
      type: String,
      default: '*'
    },
    // 可以自定义占位符的长度，如果设置为0或负数，则与apiKey长度相同
    placeholderLength: {
      type: Number,
      default: 0 // 默认为0，表示与真实key长度一致
    }
  },
  data() {
    return {
      showApiKey: false // 控制 API Key 显示/隐藏的状态
    }
  },
  computed: {
    // 根据 showApiKey 的状态返回要显示的内容
    displayedApiKey() {
      if (this.showApiKey) {
        return this.apiKey
      } else {
        // 根据 placeholderLength 或 apiKey 长度生成星号占位符
        const length = this.placeholderLength > 0 ? this.placeholderLength : this.apiKey.length
        return this.placeholderChar.repeat(length)
      }
    },
    // 根据显示状态返回不同的 El-Icon 类名
    iconClass() {
      // Element Plus 的图标在 Vue 2 中通常是 el-icon-xxx 这种形式
      return this.showApiKey ? 'el-icon-view' : 'el-icon-view'
    }
  },
  methods: {
    // 切换显示状态的方法
    toggleApiKey() {
      this.showApiKey = !this.showApiKey
    }
  }
}
</script>

<style scoped>
.api-key-display {
  display: flex;
  align-items: center;
  gap: 10px; /* 文本和图标之间的间距 */
  font-family: monospace; /* 为了让星号和真实字符对齐 */
  font-size: 16px;
  line-height: 1; /* 避免额外的行高影响对齐 */
}

.api-key-text {
  /* 可以添加一些样式来区分文本区域 */
  padding: 5px 0;
  min-width: 150px; /* 确保有足够的空间，避免内容跳动 */
}

.toggle-icon {
  cursor: pointer;
  font-size: 18px; /* 图标大小 */
  color: #888888; /* Element Plus 主题蓝 */
  transition: color 0.3s ease; /* 颜色过渡效果 */
}

.toggle-icon:hover {
  color: #a1a0a0; /* 鼠标悬停时颜色变浅 */
}
</style>
