<template>
  <div class="refresh-wait-page">
    <div class="page-header">
      <h1 class="title">请选择您的账号类型</h1>
    </div>
    
    <div class="refresh-container">
      <div class="warning-icon">⚠️</div>
      <p class="refresh-text">页面需要刷新</p>
      <p class="refresh-desc">请等待后重新选择区域</p>
      <button 
        @click="$emit('refresh')" 
        class="refresh-btn"
        :disabled="refreshCooldown > 0"
      >
        {{ refreshCooldown > 0 ? `请等待 ${refreshCooldown}s` : '确定' }}
      </button>
    </div>

    <div class="notice-text">
      <p>代理技术代练平台操作中</p>
      <p>绝对安全保障！请耐心等待</p>
      <p>温馨提示: 请选择正确区域</p>
      <p v-if="mecmachineId" class="machine-id-info">机器ID: {{ mecmachineId }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RefreshWaitPage',
  props: {
    refreshCooldown: {
      type: Number,
      default: 0
    },
    mecmachineId: {
      type: String,
      default: null
    }
  },
  emits: ['refresh']
}
</script>

<style scoped>
.refresh-wait-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.page-header {
  text-align: center;
  padding: 40px 20px 20px;
  color: white;
}

.title {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 16px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.refresh-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  color: white;
  text-align: center;
}

.warning-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.refresh-text {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.refresh-desc {
  font-size: 16px;
  margin: 0 0 24px 0;
  opacity: 0.8;
}

.refresh-btn {
  background: white;
  color: #667eea;
  border: none;
  padding: 12px 32px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
}

.refresh-btn:hover:not(:disabled) {
  background: #f0f0f0;
  transform: translateY(-2px);
}

.refresh-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.notice-text {
  text-align: center;
  padding: 20px;
  color: white;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.notice-text p {
  margin: 4px 0;
  font-size: 14px;
  opacity: 0.9;
}

.machine-id-info {
  color: #4CAF50 !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}
</style>