<template>
  <div class="connection-page">
    <div class="status-display">
      <div class="status-card">
        <div class="status-icon disconnected">
          <i class="fas fa-unlink"></i>
        </div>
        <div class="status-text">
          <h3>未连接</h3>
          <p>当前没有连接到任何CAD软件</p>
        </div>
      </div>
    </div>

    <div class="action-buttons">
      <BaseButton type="primary" icon="fas fa-plug" @click="connectCAD">
        连接CAD软件
      </BaseButton>
      <BaseButton type="secondary" icon="fas fa-wrench" @click="openSettings">
        配置设置
      </BaseButton>
    </div>
  </div>
</template>

<script setup>
import BaseButton from '@/components/ui/BaseButton.vue'

const emit = defineEmits(['page-change'])

const connectCAD = () => {
  // CAD连接逻辑
}

const openSettings = () => {
  emit('page-change', 'settings')
}
</script>

<script>
export default {
  name: 'ConnectionPage'
}
</script>

<style scoped>
.connection-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 24px;
  padding: 24px;
}

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

.status-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--color-white-rgb-05);
  border: 1px solid var(--color-white-rgb-1);
  border-radius: 8px;
}

.status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 20px;
}

.status-icon.disconnected {
  background: var(--color-error-rgb-1);
  color: var(--color-text-error);
  border: 1px solid var(--color-error-rgb-3);
}

.status-text h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 4px 0;
}

.status-text p {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0;
}

.action-buttons {
  display: flex;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
}
</style>
