<template>
  <div class="network-error">
    <div class="error-container">
      <div class="error-icon">
        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" fill="#f44336"/>
        </svg>
      </div>
      <h1 class="error-title">网络连接错误</h1>
      <p class="error-message">无法连接到服务器，请检查您的网络连接</p>
      <div class="error-actions">
        <button @click="retryConnection" class="retry-btn">重启服务</button>
      </div>
      <div class="tray-tip">
        <p class="tip-text">
          💡 提示：在系统托盘中找到软件图标，右键单击 <strong>配置 -> 配置客户端地址</strong>，查看客户端地址是否正确以及<strong>是否有网络访问权限</strong>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NetworkError',
  methods: {
    async retryConnection() {
      try {
        // 调用重启软件的方法
        await window.electron.ipcRenderer.invoke('restartApp');
      } catch (error) {
        console.error('重启软件失败:', error);
        // 如果重启失败，回退到页面刷新
        window.location.reload();
      }
    },
    goToConfig() {
      // 跳转到配置页面
      this.$router.push('/config')
    }
  }
}
</script>

<style scoped>
.network-error {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.error-container {
  text-align: center;
  padding: 2rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  max-width: 400px;
}

.error-icon {
  margin-bottom: 1rem;
}

.error-title {
  color: #333;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.error-message {
  color: #666;
  margin-bottom: 2rem;
  line-height: 1.5;
}

.error-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.retry-btn, .config-btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s;
}

.retry-btn {
  background-color: #2196f3;
  color: white;
}

.retry-btn:hover {
  background-color: #1976d2;
}

.config-btn {
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
}

.config-btn:hover {
  background-color: #e0e0e0;
}

.tray-tip {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.tip-text {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0;
}

.tip-text strong {
  color: #333;
  font-weight: 600;
}
</style>
