<template>
  <div 
    v-if="showDebug && scaleInfo.detected !== 1" 
    class="scale-debug-info"
    :class="{ hidden: !visible }"
  >
    <div>系统缩放: {{ scaleInfo.percentage }}%</div>
    <div>反向缩放: {{ Math.round(scaleInfo.counter * 100) }}%</div>
    <div>设备像素比: {{ devicePixelRatio }}</div>
    <button @click="toggleVisibility" class="toggle-btn">{{ visible ? '隐藏' : '显示' }}</button>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import { scaleManager } from '@/utils/scaleManager.js'

export default {
  name: 'ScaleDebugInfo',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const scaleInfo = ref({ detected: 1, counter: 1, percentage: 100 })
    const devicePixelRatio = ref(window.devicePixelRatio || 1)
    const visible = ref(true)
    const showDebug = ref(props.show || process.env.NODE_ENV === 'development')

    const toggleVisibility = () => {
      visible.value = !visible.value
    }

    const handleScaleChange = (scale) => {
      scaleInfo.value = scaleManager.getScaleInfo()
      devicePixelRatio.value = window.devicePixelRatio || 1
    }

    onMounted(() => {
      scaleManager.onScaleChange(handleScaleChange)
    })

    onUnmounted(() => {
      scaleManager.removeScaleChangeListener(handleScaleChange)
    })

    return {
      scaleInfo,
      devicePixelRatio,
      visible,
      showDebug,
      toggleVisibility
    }
  }
}
</script>

<style lang="scss" scoped>
.scale-debug-info {
  position: fixed;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 12px;
  border-radius: 6px;
  font-size: 11px;
  font-family: 'Courier New', monospace;
  z-index: 9999;
  min-width: 160px;
  
  div {
    margin-bottom: 4px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .toggle-btn {
    background: #1890ff;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 10px;
    cursor: pointer;
    margin-top: 8px;
    
    &:hover {
      background: #0077b6;
    }
  }
  
  &.hidden {
    opacity: 0.3;
    
    .toggle-btn {
      opacity: 1;
    }
  }
}
</style>