<template>
  <div class="scale-test-page">
    <div class="container">
      <h1 class="page-title">系统缩放检测测试</h1>
      
      <div class="test-grid">
        <div class="test-card">
          <h3>当前检测信息</h3>
          <div class="info-item">
            <span class="label">系统缩放:</span>
            <span class="value">{{ scaleInfo.percentage }}%</span>
          </div>
          <div class="info-item">
            <span class="label">设备像素比:</span>
            <span class="value">{{ devicePixelRatio }}</span>
          </div>
          <div class="info-item">
            <span class="label">反向缩放:</span>
            <span class="value">{{ Math.round(scaleInfo.counter * 100) }}%</span>
          </div>
          <div class="info-item">
            <span class="label">是否应用缩放:</span>
            <span class="value" :class="{ active: scaleInfo.shouldApply }">
              {{ scaleInfo.shouldApply ? '是' : '否' }}
            </span>
          </div>
          <div class="info-item">
            <span class="label">当前策略:</span>
            <span class="value">{{ currentStrategy }}</span>
          </div>
        </div>
        
        <div class="test-card">
          <h3>缩放策略控制</h3>
          <div class="strategy-controls">
            <div class="control-group">
              <label>选择策略:</label>
              <select v-model="selectedStrategy" @change="changeStrategy">
                <option value="css">CSS变量策略</option>
                <option value="viewport">Viewport策略</option>
                <option value="hybrid">混合策略</option>
                <option value="none">不处理</option>
              </select>
            </div>
            <div class="control-group">
              <label>
                <input type="checkbox" v-model="scaleEnabled" @change="toggleScale">
                启用缩放处理
              </label>
            </div>
            <button @click="resetStrategy" class="reset-btn">重置策略</button>
          </div>
        </div>
        
        <div class="test-card">
          <h3>测试元素</h3>
          <div class="test-elements">
            <div class="test-box">100px × 100px</div>
            <div class="test-text">标准文本大小 (16px)</div>
            <button class="test-button">测试按钮</button>
          </div>
        </div>
        
        <div class="test-card">
          <h3>屏幕信息</h3>
          <div class="info-item">
            <span class="label">屏幕宽度:</span>
            <span class="value">{{ screenInfo.width }}px</span>
          </div>
          <div class="info-item">
            <span class="label">屏幕高度:</span>
            <span class="value">{{ screenInfo.height }}px</span>
          </div>
          <div class="info-item">
            <span class="label">可用宽度:</span>
            <span class="value">{{ screenInfo.availWidth }}px</span>
          </div>
          <div class="info-item">
            <span class="label">可用高度:</span>
            <span class="value">{{ screenInfo.availHeight }}px</span>
          </div>
        </div>
        
        <div class="test-card">
          <h3>窗口信息</h3>
          <div class="info-item">
            <span class="label">窗口宽度:</span>
            <span class="value">{{ windowInfo.width }}px</span>
          </div>
          <div class="info-item">
            <span class="label">窗口高度:</span>
            <span class="value">{{ windowInfo.height }}px</span>
          </div>
          <div class="info-item">
            <span class="label">内部宽度:</span>
            <span class="value">{{ windowInfo.innerWidth }}px</span>
          </div>
          <div class="info-item">
            <span class="label">内部高度:</span>
            <span class="value">{{ windowInfo.innerHeight }}px</span>
          </div>
        </div>
      </div>
      
      <div class="instructions">
        <h3>测试说明</h3>
        <ul>
          <li>在Windows系统设置中更改显示缩放（100%, 125%, 150%, 175%, 200%）</li>
          <li>刷新页面或调整浏览器窗口大小</li>
          <li>观察上方信息的变化</li>
          <li>检查页面元素是否保持正确的显示比例</li>
        </ul>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: 'ScaleTestPage',
  setup() {
    const scaleInfo = ref({ detected: 1, counter: 1, percentage: 100, shouldApply: false })
    const devicePixelRatio = ref(window.devicePixelRatio || 1)
    const screenInfo = ref({})
    const windowInfo = ref({})
    const currentStrategy = ref(scaleManager.getCurrentStrategy())
    const selectedStrategy = ref(scaleManager.getCurrentStrategy())
    const scaleEnabled = ref(true)

    const updateInfo = () => {
      scaleInfo.value = scaleManager.getScaleInfo()
      devicePixelRatio.value = window.devicePixelRatio || 1
      
      screenInfo.value = {
        width: window.screen.width,
        height: window.screen.height,
        availWidth: window.screen.availWidth,
        availHeight: window.screen.availHeight
      }
      
      windowInfo.value = {
        width: window.outerWidth,
        height: window.outerHeight,
        innerWidth: window.innerWidth,
        innerHeight: window.innerHeight
      }
    }

    const handleScaleChange = () => {
      updateInfo()
      currentStrategy.value = scaleManager.getCurrentStrategy()
    }

    const handleResize = () => {
      updateInfo()
    }

    const changeStrategy = () => {
      scaleManager.setStrategy(selectedStrategy.value)
      currentStrategy.value = selectedStrategy.value
    }

    const toggleScale = () => {
      scaleManager.setEnabled(scaleEnabled.value)
    }

    const resetStrategy = () => {
      scaleManager.resetStrategy()
      scaleManager.selectBestStrategy()
      selectedStrategy.value = scaleManager.getCurrentStrategy()
      currentStrategy.value = selectedStrategy.value
      scaleEnabled.value = true
    }

    onMounted(() => {
      updateInfo()
      scaleManager.onScaleChange(handleScaleChange)
      window.addEventListener('resize', handleResize)
    })

    onUnmounted(() => {
      scaleManager.removeScaleChangeListener(handleScaleChange)
      window.removeEventListener('resize', handleResize)
    })

    return {
      scaleInfo,
      devicePixelRatio,
      screenInfo,
      windowInfo,
      currentStrategy,
      selectedStrategy,
      scaleEnabled,
      changeStrategy,
      toggleScale,
      resetStrategy
    }
  }
}
</script>

<style lang="scss" scoped>
.scale-test-page {
  padding: 40px 0;
  min-height: calc(100vh - 140px);
  background: #f8f9fa;
}

.page-title {
  font-size: 32px;
  font-weight: 600;
  color: #333;
  text-align: center;
  margin-bottom: 40px;
}

.test-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.test-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  
  h3 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
    border-bottom: 2px solid #1890ff;
    padding-bottom: 8px;
  }
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
  
  .label {
    font-weight: 500;
    color: #666;
  }
  
  .value {
    font-weight: 600;
    color: #333;
    
    &.active {
      color: #1890ff;
    }
  }
}

.test-elements {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.test-box {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #1890ff, #00b4d8);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
}

.test-text {
  font-size: 16px;
  color: #333;
  text-align: center;
}

.test-button {
  padding: 12px 24px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    background: #0077b6;
    transform: translateY(-2px);
  }
}

.strategy-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 12px;
  
  label {
    font-weight: 500;
    color: #333;
    min-width: 80px;
  }
  
  select {
    padding: 8px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    background: white;
    font-size: 14px;
    
    &:focus {
      outline: none;
      border-color: #1890ff;
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
    }
  }
  
  input[type="checkbox"] {
    margin-right: 8px;
  }
}

.reset-btn {
  padding: 8px 16px;
  background: #f5f5f5;
  color: #333;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    background: #e6f7ff;
    border-color: #1890ff;
    color: #1890ff;
  }
}

.instructions {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  
  h3 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
  }
  
  ul {
    list-style: none;
    
    li {
      position: relative;
      padding-left: 20px;
      margin-bottom: 8px;
      color: #666;
      line-height: 1.5;
      
      &:before {
        content: '•';
        position: absolute;
        left: 0;
        color: #1890ff;
        font-weight: bold;
      }
    }
  }
}

@media (max-width: 768px) {
  .scale-test-page {
    padding: 20px 0;
  }
  
  .page-title {
    font-size: 24px;
    margin-bottom: 24px;
  }
  
  .test-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .test-card {
    padding: 16px;
  }
}
</style>