<!--
  ViewControls.vue
  视图控制面板组件
  提供标准视图（顶视图、底视图、前视图等）的快捷按钮
-->
<template>
  <div class="absolute bottom-4 right-4 z-10 pointer-events-none">
    <!-- 标准视图控制面板 -->
    <div
      class="grid grid-cols-3 gap-1 pointer-events-auto bg-slate-900/80 p-2 rounded-lg border border-cyan-500/20 backdrop-blur-sm"
    >
      <!-- 第一行：顶、前、左 -->
      <el-tooltip content="顶视图" placement="top" effect="dark">
        <button class="view-btn" @click="$emit('setStandardView', 'top')">顶</button>
      </el-tooltip>
      <el-tooltip content="前视图" placement="top" effect="dark">
        <button class="view-btn" @click="$emit('setStandardView', 'front')">前</button>
      </el-tooltip>
      <el-tooltip content="左视图" placement="bottom" effect="dark">
        <button class="view-btn" @click="$emit('setStandardView', 'left')">左</button>
      </el-tooltip>

      <!-- 第二行：底、后、右 -->
      <el-tooltip content="底视图" placement="bottom" effect="dark">
        <button class="view-btn" @click="$emit('setStandardView', 'bottom')">底</button>
      </el-tooltip>
      <el-tooltip content="后视图" placement="bottom" effect="dark">
        <button class="view-btn" @click="$emit('setStandardView', 'back')">后</button>
      </el-tooltip>
      <el-tooltip content="右视图" placement="top" effect="dark">
        <button class="view-btn" @click="$emit('setStandardView', 'right')">右</button>
      </el-tooltip>

      <!-- 第三行：轴侧视图（跨3列） -->
      <el-tooltip content="轴侧图" placement="bottom" effect="dark">
        <button class="view-btn col-span-3 mt-1" @click="$emit('setStandardView', 'iso')">
          轴侧视图
        </button>
      </el-tooltip>
    </div>
  </div>
</template>

<script setup lang="ts">
/**
 * ViewControls 组件
 * 提供标准视图的快捷切换按钮
 */

// ============================================================
// 类型定义
// ============================================================

/** 标准视图类型 */
type StandardViewType = 'top' | 'bottom' | 'front' | 'back' | 'left' | 'right' | 'iso'

// ============================================================
// Emits 定义
// ============================================================

defineEmits<{
  /** 设置标准视图 */
  (e: 'setStandardView', view: StandardViewType): void
}>()
</script>

<style scoped>
/* ============================================================
   视图按钮样式
   ============================================================ */

.view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.2s;
}

.view-btn:hover {
  background: rgba(6, 182, 212, 0.2);
  border-color: #22d3ee;
  color: #22d3ee;
}
</style>
