<template>
  <!-- 手机端地址卡片 -->
  <div class="bg-white/90 backdrop-blur-sm rounded-2xl shadow-xl p-5 transform transition-all duration-300 hover:shadow-2xl border border-gray-100">
    <div class="flex items-center mb-4">
      <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
        <i class="fa-solid fa-mobile-screen text-blue-500"></i>
      </div>
      <h3 class="font-semibold">手机端地址</h3>
    </div>
    
    <div class="bg-gray-50 p-3 rounded-xl border border-gray-100 transition-all duration-300 hover:border-primary/20 hover:bg-primary/5">
      <div class="text-xs text-gray-500 mb-1">连接地址</div>
      <div class="font-mono text-blue-600 truncate break-all">{{ phoneAddress || '未连接' }}</div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, onMounted, onUnmounted, watch } from 'vue';

// Props
const props = defineProps({
  isConnected: {
    type: Boolean,
    required: true
  },
  wsUrl: {
    type: String,
    required: true
  }
});

// 手机端地址状态
const phoneAddress = ref('');

// 定时轮询获取手机端地址
let pollInterval = null;

const fetchPhoneAddress = async () => {
  // 只有在连接状态时才查询手机端地址
  if (!props.isConnected) {
    return;
  }
  
  try {
    const response = await fetch('/api/phone-addr');
    if (response.ok) {
      const data = await response.json();
      if (data.phoneAddress) {
        phoneAddress.value = data.phoneAddress;
      } else {
        phoneAddress.value = '';
      }
    }
  } catch (error) {
    
  }
};

// 监听连接状态变化
watch(
  () => props.isConnected,
  (newVal) => {
    if (newVal) {
      // 连接成功时立即获取一次
      fetchPhoneAddress();
      // 开始轮询
      startPolling();
    } else {
      // 断开连接时清除轮询
      stopPolling();
      // 清空显示的手机端地址
      phoneAddress.value = '';
    }
  }
);

// 开始轮询
const startPolling = () => {
  if (pollInterval) {
    clearInterval(pollInterval);
  }
  pollInterval = setInterval(fetchPhoneAddress, 3000);
};

// 停止轮询
const stopPolling = () => {
  if (pollInterval) {
    clearInterval(pollInterval);
    pollInterval = null;
  }
};

// 组件挂载时的处理
onMounted(() => {
  // 如果已经连接，开始轮询
  if (props.isConnected) {
    fetchPhoneAddress();
    startPolling();
  }
});

// 组件卸载时清除轮询
onUnmounted(() => {
  stopPolling();
});

// 移除了不需要的computed属性
</script>